网站上的 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>

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

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>

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/ 的输出）

Answer 3

在 ECMAScript 6 中，template strings come to the rescue with the template tag function 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 中的两个反引号替换为单引号才能使其工作）

网站上的 ASCII 艺术

ASCII art on website

javascript

html

ascii-art