网站上的 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 中， 模板字符串使用模板标记函数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 中的单引号替换两个反引号才能使其正常工作）