Creating multiline strings in JavaScript （JS中字串換行問題）

Q

I have the following code in Ruby. I want to convert this code into JavaScript. what’s the equivalent code in JS?

text = <<"HERE"
This
Is
A
Multiline
String
HERE

A-1

ECMAScript 6 (ES6) introduces a new type of literal, namely template literals. They have many features, variable interpolation among others, but most importantly for this question, they can be multiline.

ECMAScript 6（ES6）引入了一種新型的文字，即模板文字，它們具有許多功能，其中包括變數插值，但對于這個問題最重要的是，它們可以是多行的，

A template literal is delimited by backticks:

模板文字由反引號分隔：

var html = `
  <div>
    <span>Some HTML here</span>
  </div>
`;

(Note: I’m not advocating to use HTML in strings)

（注意：我不主張在字串中使用HTML）

A-2

As the first answer mentions, with ES6/Babel, you can now create multi-line strings simply by using backticks:

如第一個答案所述，使用ES6 / Babel，您現在只需使用反引號即可創建多行字串：

const htmlString = `Say hello to 
multi-line
strings!`;

Interpolating variables is a popular new feature that comes with back-tick delimited strings:

插值變數是流行的新功能，帶有反引號分隔的字串：

const htmlString = `${user.name} liked your post about strings`;

This just transpiles down to concatenation:

這只是轉換為串聯：

user.name + ' liked your post about strings'

Original ES5 answer:

ES5原始答案：

Google’s JavaScript style guide recommends to use string concatenation instead of escaping newlines:

Google的JavaScript樣式指南建議使用字串串聯而不是換行符：

Do not do this:

不要這樣做：

var myString = 'A rather long string of English text, an error message \
                actually that just keeps going and going -- an error \
                message to make the Energizer bunny blush (right through \
                those Schwarzenegger shades)! Where was I? Oh yes, \
                you\'ve got an error and all the extraneous whitespace is \
                just gravy.  Have a nice day.';

The whitespace at the beginning of each line can’t be safely stripped at compile time; whitespace after the slash will result in tricky errors; and while most script engines support this, it is not part of ECMAScript.

在編譯時不能安全地剝離每行開頭的空白；斜杠后的空格將導致棘手的錯誤；盡管大多數腳本引擎都支持此功能，但它不是ECMAScript的一部分，

Use string concatenation instead:

請使用字串串聯：

var myString = 'A rather long string of English text, an error message ' +
               'actually that just keeps going and going -- an error ' +
               'message to make the Energizer bunny blush (right through ' +
               'those Schwarzenegger shades)! Where was I? Oh yes, ' +
               'you\'ve got an error and all the extraneous whitespace is ' +
               'just gravy.  Have a nice day.';

A-3

the pattern text = <<"HERE" This Is A Multiline String HERE is not available in js (I remember using it much in my good old Perl days).

該模式text = <<"HERE" This Is A Multiline String HERE在js中不可用（我記得我在Perl的美好時光中經常使用它），

To keep oversight with complex or long multiline strings I sometimes use an array pattern:

為了對復雜或較長的多行字串進行監督，有時會使用陣列模式：

var myString = 
   ['<div id="someId">',
    'some content<br />',
    '<a href="#someRef">someRefTxt</a>',
    '</div>'
   ].join('\n');

or the pattern anonymous already showed (escape newline), which can be an ugly block in your code:

或已經顯示的匿名模式（換行符），這可能是代碼中的丑陋塊：

 var myString = 
       '<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';

Here’s another weird but working 'trick’1:

這是另一個奇怪但有效的“技巧” 1：

var myString = (function () {/*
   <div id="someId">
     some content<br />
     <a href="#someRef">someRefTxt</a>
    </div>        
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

ES20xx supports spanning strings over multiple lines using template strings:

ES20xx支持使用模板字串跨越多行字串：

let str = `This is a text
    with multiple lines.
    Escapes are interpreted,
    \n is a newline.`;
let str = String.raw`This is a text
    with multiple lines.
    Escapes are not interpreted,
    \n is not a newline.`;

1 Note: this will be lost after minifying/obfuscating your code

1注意：縮小/混淆代碼后，這將會丟失

A-4

141

I came up with this very jimmy rigged method of a multi lined string. Since converting a function into a string also returns any comments inside the function you can use the comments as your string using a multilined comment /**/. You just have to trim off the ends and you have your string.

我想出了多行字串的這種非常笨拙的操縱方法，由于將函式轉換為字串還會回傳函式內部的任何注釋，因此您可以使用多行注釋/ ** /將注釋用作字串，您只需要修剪兩端就可以了，

var myString = function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

alert(myString)