JS 如何创建多行字符串？

在 JavaScript 中，创建多行字符串可以通过以下几种方式实现：

1. 使用传统的转义符 \n

在 ES5 及之前的版本中，创建多行字符串通常需要使用换行符 \n 来实现换行效果。例如：

javascript
var multiLineString = "这是第一行。\n" +
                      "这是第二行。\n" +
                      "这是第三行。";
console.log(multiLineString);

2. 使用数组和 join 方法

还可以通过将每一行字符串作为数组的元素，然后使用 join 方法将它们连接成一个多行字符串。例如：

javascript
var multiLineString = [
  "这是第一行。",
  "这是第二行。",
  "这是第三行。"
].join('\n');
console.log(multiLineString);

3. 使用 ES6 的模板字符串（模板字面量）

在 ES6（ECMAScript 2015）中引入了模板字符串，可用于创建多行字符串。模板字符串使用反引号 (`) 而不是单引号或双引号，可以直接在字符串中进行换行。例如：

javascript
var multiLineString = `这是第一行。
这是第二行。
这是第三行。`;
console.log(multiLineString);

模板字符串还可以用于插入变量或表达式，这使得构建动态的多行字符串变得十分方便。举例来说，如果我们想在多行字符串中插入变量，可以这样做：

javascript
var name = "张三";
var multiLineString = `你好，${name}。
欢迎来到JavaScript世界。
这是一个多行字符串的例子。`;
console.log(multiLineString);

在实际开发中，我通常会根据具体情况选择使用哪种方法。在 ES6 及更新版本的 JavaScript 中，我会优先选择模板字符串，因为它的语法简洁，易于阅读和编写多行文本内容。

更新：

ECMAScript 6 (ES6) 引入了一种新的文字类型，即模板文字。它们有很多功能，变量插值等，但对于这个问题最重要的是，它们可以是多行的。

模板文字由_反引号_分隔：

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

（注意：我不提倡在字符串中使用 HTML）

浏览器支持还可以，但是您可以使用转译器来提高兼容性。

---

ES5 原始答案：

Javascript 没有此处文档语法。但是，您可以转义文字换行符，它很接近：

shell
"foo \
bar"

ES6 更新：

正如第一个答案提到的，使用 ES6/Babel，您现在只需使用反引号即可创建多行字符串：

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

插值变量是一项流行的新功能，带有反引号分隔字符串：

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

这只是转换为串联：

shell
user.name + ' liked your post about strings'

ES5 原始答案：

Google 的 JavaScript 样式指南建议使用字符串连接而不是转义换行符：

不要这样做：

shell
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.';

每行开头的空格在编译时无法安全地去除；斜杠后面的空格会导致棘手的错误；虽然大多数脚本引擎都支持这一点，但它不是 ECMAScript 的一部分。

使用字符串连接代替：

shell
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.';

该模式text = <<"HERE" This Is A Multiline String HERE在 js 中不可用（我记得在我美好的 Perl 岁月里经常使用它）。

为了对复杂或长的多行字符串进行监督，我有时使用数组模式：

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

或者已经显示的匿名模式（转义换行符），这可能是代码中的一个丑陋的块：

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

这是另一个奇怪但有效的“技巧” 1：

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

外部编辑：jsfiddle

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

shell
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注意：缩小/混淆代码后这将丢失

您_可以_在纯 JavaScript 中使用多行字符串。

该方法基于函数的序列化，其被定义为依赖于实现的。它确实可以在大多数浏览器中工作（见下文），但不能保证它将来仍然可以工作，所以不要依赖它。

使用以下函数：

shell
function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*!?/, '').
      replace(/\*\/[^\/]+$/, '');
}

你可以在这里拥有这样的文档：

shell
var tennysonQuote = hereDoc(function() {/*!
  Theirs not to make reply,
  Theirs not to reason why,
  Theirs but to do and die
*/});

该方法已在以下浏览器中成功测试（未提及=未测试）：

• 浏览器 4 - 10
• Opera 9.50 - 12（9- 中没有）
• Safari 4 - 6（不在 3- 中）
• 铬1 - 45
• Firefox 17 - 21（16- 没有）
• 雷康克 0.7.0 - 0.8.0
• Konqueror 4.7.4 不支持

不过，要小心你的缩小器。它往往会删除评论。对于YUI 压缩器/*!，以（就像我使用的那样）开头的注释将被保留。

我认为_真正的_解决方案是使用CoffeeScript。

ES6 更新：您可以使用反引号，而不是创建带有注释的函数并在注释上运行 toString。正则表达式需要更新为仅删除空格。您还可以使用字符串原型方法来执行此操作：

shell
let foo = `
  bar loves cake
  baz loves beer
  beer loves people
`.removeIndentation()

有人应该写这个 .removeIndentation 字符串方法...;)

你可以这样做...

shell
var string = 'This is\n' +
'a multiline\n' + 
'string';