如何在 javascript 中的字符串中加入反斜杠？

Question

所以我正在为我的堡垒之夜统计网站制作一个很酷的终端，比如 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

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

Answer 2

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

一个问题是 String.raw 的定界符是反引号，它只能在每个反引号之前用反斜杠在模板文字中转义，因此为了保持艺术正确对齐，请将所有反引号替换为一些反引号其他字符，例如~，同时写艺术，然后用反引号替换所有~。

此外，在浏览器中显示文本时，使用边距为 0 的 <pre>s 以保持对齐正确：

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>

如何在 javascript 中的字符串中加入反斜杠？

How do I put backslash in strings in javascript?

javascript

formatting

markdown

ascii-art