网站上的ASCII艺术

Question

我正在尝试使用JavaScript函数在我的网站上添加一些ASCII艺术，但目前的结果并不是我想要的...

这是应该是什么样子的： 这是我现在用来实现它的代码：

function log( text ) {
  $log = $('#log');
  //Add text to log
  $log.append(($log.val()?"":'')+ text );
  //Autoscroll
  $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
}
      
      
log('<div style="font-family: monospace; white-space: pre;">' + 
    "  _______                              <br>" +
    " |__   __|                             <br>" +
    "    | | ___  _ __ ___  _ __ ___  _   _ <br>" +
    "    | |/ _ \| '_ ` _ \| '_ ` _ \| | | |<br>" +
    "    | | (_) | | | | | | | | | | | |_| |<br>" +
    "    |_|\___/|_| |_| |_|_| |_| |_|\__, |<br>" +
    "                                  __/ |<br>" +
    "                                 |___/ <br>"  +
    
    "<br>" +
     "</div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

希望你们能得出比我更好的结果，因为现在对我来说这根本不起作用。

- Tommy

---

你尝试过用另一个反斜杠转义你的反斜杠吗？就像在字母“O”顶部右侧的反斜杠一样，每当你有一个单独的 \ 时，你需要使用 \ 来代替。请注意不要改变原意。 - Michael Platt

Answer 1

请注意，在字符串中，如果要打印 '\' 字符，必须使用 '\\' 代替 :)

function log( text ) {
    $log = $('#log');
    //Add text to log
    $log.append(($log.val()?"":'')+ text );
    //Autoscroll
    $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
}


log('<div style="font-family: monospace; white-space: pre;">' +
    "  _______                              <br>" +
    " |__   __|                             <br>" +
    "    | | ___  _ __ ___  _ __ ___  _   _ <br>" +
    "    | |/ _ \\| '_ ` _ \\| '_ ` _ \\| | | |<br>" +
    "    | | (_) | | | | | | | | | | | |_| |<br>" +
    "    |_|\\___/|_| |_| |_|_| |_| |_|\\__, |<br>" +
    "                                  __/ |<br>" +
    "                                 |___/ <br>"  +

    "<br>" +
    "</div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

- Arash Khajelou

---

你不应该只说“更改字母间距属性”，而应该展示一个能够解决问题的代码示例。 - takendarkk

这个回答应该是一条评论。 - Olian04

这解决了我在Tommy上的问题，但现在我有一个新的文本出现了同样的问题，我试图更改它们但没有任何结果:S这是代码https://jsfiddle.net/0snvu7e6/ - Tommy

请注意，您必须将所有 '' 字符替换为 '\'，您可以在新的形状中完成此操作，这将纠正您的 ASCII 艺术 :) 你能否关闭这个问题？ - Arash Khajelou

@ArashKhajelou 对不起，我忘记了我有这个问题，然后去睡觉了，现在我已经关闭了它，谢谢大家！ - Tommy

Answer 2

“

HTML中的 <pre> 标签是否可以作为替代解决方案适用于你？https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

编辑：如果你计划在JS字符串中使用反斜杠，则需要对其进行转义，如评论和其他答案所提到的。

pre 的实时示例：

”

<pre >
 ______
&lt; Moo! &gt;
 ------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||
</pre>

（基于https://jshields.github.io/cowsay.club/的输出）

- JHS

Answer 3

在ECMAScript 6中，模板字符串通过模板标签函数String.raw()得以拯救：

function log(text) {
  $log = $('#log');
  //Add text to log
  $log.append(($log.val() ? "" : '') + text);
  //Autoscroll
  $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
}


log('<div style="font-family: monospace; white-space: pre;">' +
  String.raw `  _______                              <br>` +
  String.raw ` |__   __|                             <br>` +
  String.raw `    | | ___  _ __ ___  _ __ ___  _   _ <br>` +
  String.raw `    | |/ _ \| '_ ' _ \| '_ ' _ \| | | |<br>` +
  String.raw `    | | (_) | | | | | | | | | | | |_| |<br>` +
  String.raw `    |_|\___/|_| |_| |_|_| |_| |_|\__, |<br>` +
  String.raw `                                  __/ |<br>` +
  String.raw `                                 |___/ <br>` +
  "<br>" +
  "</div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

（不幸的是，为了让它工作，我不得不用单引号替换m中的两个反引号）

- Patrick Roberts