Question

因此，我为fortnite统计网站制作了一个很酷的终端，如404页面，因此，当您键入特定命令时，它会显示一些ascii艺术，但是所谓的内容是应用于ascii艺术并删除了一堆类似/\的东西，所以它只是/。有什么办法可以阻止这种情况的发生？谢谢。

    function showFortnite(){
    $('.terminal').append("<div class='fortnite'>"+
                             "<p class='prompt'>                                                                                   ,---,  </p>" +
                             "<p class='prompt'>                                                                                ,`--.' |  </p>" +
                             "<p class='prompt'>    ,---,.                       ___                           ___              |   :  :  </p>" +
                             "<p class='prompt'>  ,'  .' |                     ,--.'|_                ,--,   ,--.'|_            '   '  ;  </p>" +
                             "<p class='prompt'>,---.'   |   ,---.    __  ,-.  |  | :,'       ,---, ,--.'|   |  | :,'           |   |  |  </p>" +
                             "<p class='prompt'>|   |   .'  '   ,'\ ,' ,'/ /|  :  : ' :   ,-+-. /  ||  |,    :  : ' :           '   :  ;  </p>" +
                             "<p class='prompt'>:   :  :   /   /   |'  | |' |.;__,'  /   ,--.'|'   |`--'_  .;__,'  /     ,---.  |   |  '  </p>" +
                             "<p class='prompt'>:   |  |-,.   ; ,. :|  |   ,'|  |   |   |   |  ,' |,' ,'| |  |   |     /     \ '   :  |  </p>" +
                             "<p class='prompt'>|   :  ;/|'   | |: :'  :  /  :__,'| :   |   | /  | |'  | | :__,'| :    /    /  |;   |  ;  </p>" +
                             "<p class='prompt'>|   |   .''   | .; :|  | '     '  : |__ |   | |  | ||  | :   '  : |__ .    ' / |`---'. |  </p>" +
                             "<p class='prompt'>'   :  '  |   :    |;  : |     |  | '.'||   | |  |/ '  : |__ |  | '.'|'   ;   /| `--..`;  </p>" +
                             "<p class='prompt'>|   |  |   \   \  / |  , ;     ;  :    ;|   | |--'  |  | '.'|;  :    ;'   |  / |.--,_     </p>" +
                             "<p class='prompt'>|   :  \    `----'   ---'      |  ,   / |   |/      ;  :    ;|  ,   / |   :    ||    |`.  </p>" +
                             "<p class='prompt'>|   | ,'                        ---`-'  '---'       |  ,   /  ---`-'   \   \  / `-- -`, ; </p>" +
                             "<p class='prompt'>`----'                                               ---`-'             `----'    '---`   </p></div>");

Answer 1

一种选择是使用String.raw，这将使您可以在字符串中键入单个反斜杠而不必对它们进行两次转义。通常，要在字符串中使用文字反斜杠，您需要先对其进行转义，例如'\\'是其中包含单个反斜杠的字符串文字。但是，String.raw允许您精确键入您想要的字符串。

一个问题是String.raw的定界符是反引号，只能在每个反引号之前使用反斜杠转义到模板文字中，因此要使图正确对齐，请用其他字符替换所有反引号，例如~，同时编写该图片，然后用反引号替换所有~。

另外，在浏览器中显示文本时，请使用<pre>且边距为0来保持对齐正确：

const fortniteArt = String.raw`
                                                                                   ,---,
                                                                                ,~--.' |
    ,---,.                       ___                           ___              |   :  :
  ,'  .' |                     ,--.'|_                ,--,   ,--.'|_            '   '  ;
,---.'   |   ,---.    __  ,-.  |  | :,'       ,---, ,--.'|   |  | :,'           |   |  |
|   |   .'  '   ,'\ ,' ,'/ /|  :  : ' :   ,-+-. /  ||  |,    :  : ' :           '   :  ;
:   :  :   /   /   |'  | |' |.;__,'  /   ,--.'|'   |~--'_  .;__,'  /     ,---.  |   |  '
:   |  |-,.   ; ,. :|  |   ,'|  |   |   |   |  ,' |,' ,'| |  |   |     /     \ '   :  |
|   :  ;/|'   | |: :'  :  /  :__,'| :   |   | /  | |'  | | :__,'| :    /    /  |;   |  ;
|   |   .''   | .; :|  | '     '  : |__ |   | |  | ||  | :   '  : |__ .    ' / |~---'. |
'   :  '  |   :    |;  : |     |  | '.'||   | |  |/ '  : |__ |  | '.'|'   ;   /| ~--..~;
|   |  |   \   \  / |  , ;     ;  :    ;|   | |--'  |  | '.'|;  :    ;'   |  / |.--,_   
|   :  \    ~----'   ---'      |  ,   / |   |/      ;  :    ;|  ,   / |   :    ||    |~.
|   | ,'                        ---~-'  '---'       |  ,   /  ---~-'   \   \  / ~-- -~, ;
~----'                                               ---~-'             ~----'    '---~
`;
const htmlStr = "<div class='fortnite'>" + (
  fortniteArt
    .replace(/~/g, '`')
    .split('\n')
    .slice(1) // remove first empty line, which is there for spacing reasons
    .map(line => `<pre class='prompt'>${line}</pre>`)
    .join('')
) + '</div>';
$('.terminal').append(htmlStr);

pre {
  margin: 0;
}

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

Answer 2

尝试将p替换为pre。浏览器可能会在pre中保留空白和特殊字符。

如何在JavaScript的字符串中添加反斜杠？

2 个答案: