Question

我试图通过JavaScript功能在我的网站上获取一些ASCII艺术品，但结果并不是我现在正在寻找的......

这应该是它的样子：

以下是我试图实现的代码：

＆＃13;

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>");

＆＃13;

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

＆＃13;

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

Answer 1

如果您要打印字符串，则必须注意字符串\＆＃39; \性格，你必须使用＆＃39; \\＆＃39;相反:)）

＆＃13;

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>");

＆＃13;

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

＆＃13;

Answer 2

在ECMAScript 6中，template strings使用模板标记函数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中的单引号替换两个反引号才能使其工作）

Answer 3

HTML <pre>标记可以作为备用解决方案吗？ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

编辑：如果您计划在JS字符串中使用反斜杠，则需要转义反斜杠，如注释和其他答案所示。

pre的实例：

＆＃13;

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

＆＃13;

（基于http://cowsay.club/的输出）

网站上的ASCII艺术

3 个答案: