在 JavaScript 中创建多行字符串

更新：

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

模板文字由反引号分隔：

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

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

Browser support is OK，但您可以使用 transpilers 来提高兼容性。

原始 ES5 答案：

Javascript 没有 here-document 语法。但是，您可以转义文字换行符，这很接近：

"foo \
bar"

---

ES6 更新：

正如第一个答案所提到的，使用 ES6/Babel，您现在可以简单地使用反引号创建多行字符串：

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

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

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

这只是转译为串联：

user.name + ' liked your post about strings'

原始 ES5 答案：

Google 的 JavaScript 样式指南建议使用字符串连接而不是转义换行符：不要这样做： var myString = '一个相当长的英文文本字符串，一个错误消息 \ 实际上只是不断前进 - 一个错误 \ 消息Energizer 兔子腮红（直接穿过那些施瓦辛格的色调）！我在哪里？哦，是的，\你有一个错误，所有无关的空白都是\只是肉汁。祝你今天过得愉快。';每行开头的空格不能在编译时安全地去除；斜杠后的空格会导致棘手的错误；虽然大多数脚本引擎都支持这一点，但它不是 ECMAScript 的一部分。改为使用字符串连接： var myString = '一个相当长的英文文本字符串，一个错误消息' + '实际上一直在继续 - 一个错误' + '消息让 Energizer 兔子脸红（直接通过' + '那些施瓦辛格的阴影）！我在哪里？哦，是的，'+'你有一个错误，所有无关的空格都是'+'只是肉汁。祝你今天过得愉快。';

---

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

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

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

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

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

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

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

外部编辑：jsfiddle

ES20xx 支持使用 template strings 跨越多行字符串：

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 中使用多行字符串。

该方法基于函数的序列化，即defined to be implementation-dependent。它在大多数浏览器中都可以工作（见下文），但不能保证它在将来仍然可以工作，所以不要依赖它。

使用以下功能：

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

你可以有这样的文件：

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- 中）

Rekonq 0.7.0 - 0.8.0

Konqueror 4.7.4 不支持

不过要小心你的缩小器。它倾向于删除评论。对于 YUI compressor，将保留以 /*! 开头的评论（就像我使用的评论一样）。

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

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

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

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

---

你可以这样做...

var string = 'This is\n' +
'a multiline\n' + 
'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)

---

我很惊讶我没有看到这个，因为它在我测试过的任何地方都可以工作，并且对于例如模板非常有用：

<script type="bogus" id="multi">
    My
    multiline
    string
</script>
<script>
    alert($('#multi').html());
</script>

有人知道有 HTML 但它不起作用的环境吗？

---

我通过输出一个 div，将其隐藏，并在需要时通过 jQuery 调用 div id 来解决这个问题。

例如

<div id="UniqueID" style="display:none;">
     Strings
     On
     Multiple
     Lines
     Here
</div>

然后当我需要获取字符串时，我只需使用以下 jQuery：

$('#UniqueID').html();

它在多行上返回我的文本。如果我打电话

alert($('#UniqueID').html());

我得到：

https://i.stack.imgur.com/vIVFc.png

---

有多种方法可以实现这一目标

1.斜线连接

  var MultiLine=  '1\
    2\
    3\
    4\
    5\
    6\
    7\
    8\
    9';

2. 正则连接

var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';

3. Array Join 串联

var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');

性能方面，斜线连接（第一个）是最快的。

请参阅 this test case 了解有关性能的更多详细信息

更新：

使用 ES2015，我们可以利用其模板字符串功能。有了它，我们只需要使用反引号来创建多行字符串

例子：

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

---

使用脚本标签：

将包含多行文本的 块添加到 head 标签中；

按原样获取多行文本...（注意文本编码：UTF-8、ASCII）

---

我喜欢这种语法和缩进：

string = 'my long string...\n'
       + 'continue here\n'
       + 'and here.';

（但实际上不能被视为多行字符串）

---

Downvoters：此代码仅供参考。

这已经在 Mac 上的 Fx 19 和 Chrome 24 中进行了测试

DEMO

var new_comment; /*<< 你: $text @ 2d ago EOF*/ // 注意这里的 script 标签被硬编码为 FIRST 标签 new_comment=document.currentScript .innerHTML.split("EOF")[1]; document.querySelector("ul").innerHTML=new_comment.replace('$text','这是一个动态创建的文本');

---

有这个库使它很漂亮：

https://github.com/sindresorhus/multiline

前

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>❤ unicorns</h1>' +
'   </body>' +
'</html>' +
'';

后

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});

---

在这里找到了很多过度设计的答案。我认为最好的两个答案是：

1：

 let str = `Multiline string.
            foo.
            bar.`

最终记录：

Multiline string.
           foo.
           bar.  

2：

let str = `Multiline string.
foo.
bar.`

这会正确记录它，但如果 str 嵌套在函数/对象等内部，它在脚本文件中会很丑陋......：

Multiline string.
foo.
bar.

我对正确记录 str 的正则表达式的非常简单的回答：

let str = `Multiline string.
           foo.
           bar.`.replace(/\n +/g, '\n');

请注意，这不是完美的解决方案，但如果您确定在新行 (\n) 之后至少会出现一个空格（+ 表示至少出现一次），它就会起作用。它也适用于 *（零个或多个）。

您可以更明确地使用 {n,} ，这意味着至少出现 n 次。

---

javascript中的等价物是：

var text = `
This
Is
A
Multiline
String
`;

这是specification。请参阅此 page 底部的浏览器支持。这里也有一些examples。

---

这适用于 IE、Safari、Chrome 和 Firefox：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="crazy_idea" thorn_in_my_side='<table  border="0">
                        <tr>
                            <td ><span class="mlayouttablecellsdynamic">PACKAGE price $65.00</span></td>
                        </tr>
                    </table>'></div>
<script type="text/javascript">
    alert($(".crazy_idea").attr("thorn_in_my_side"));
</script>

---

总而言之，我尝试了用户 javascript 编程（Opera 11.01）中列出的 2 种方法：

这个没用：在 JavaScript 中创建多行字符串

这工作得很好，我还想出了如何使它在 Notepad++ 源视图中看起来不错：在 JavaScript 中创建多行字符串

所以我推荐Opera用户JS用户的工作方法。与作者所说的不同：

它不适用于 Firefox 或 Opera；仅在 IE、chrome 和 safari 上。

它确实在 Opera 11 中工作。至少在用户 JS 脚本中。太糟糕了，我不能评论个别答案或支持答案，我会立即这样做。如果可能，请有更高权限的人为我做。

---

我对 https://stackoverflow.com/a/15558082/80404 的扩展。它期望以 /*! any multiline comment */ 的形式进行注释，其中符号 !用于防止通过缩小删除（至少对于 YUI 压缩器）

Function.prototype.extractComment = function() {
    var startComment = "/*!";
    var endComment = "*/";
    var str = this.toString();

    var start = str.indexOf(startComment);
    var end = str.lastIndexOf(endComment);

    return str.slice(start + startComment.length, -(str.length - end));
};

例子：

var tmpl = function() { /*!
 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    </ul>
 </div>
*/}.extractComment();

---

2015 年更新：现在已经六年了：大多数人使用模块加载器，并且主要模块系统每个都有加载模板的方法。它不是内联的，但最常见的多行字符串类型是模板，而且模板通常应该远离 JS。

require.js: '需要文本'。

使用 require.js 'text' plugin，在 template.html 中使用多行模板

var template = require('text!template.html')

NPM/browserify：“brfs”模块

Browserify uses a 'brfs' module 加载文本文件。这实际上会将您的模板构建到捆绑的 HTML 中。

var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');

简单的。

---

如果您愿意使用转义的换行符，它们可以很好地使用。它看起来像一个带有页面边框的文档。

https://i.stack.imgur.com/e51kg.png

---

精确的

Ruby produce: "This\nIs\nA\nMultiline\nString\n" - 下面的 JS 产生完全相同的字符串

text = `This Is A Multiline String ` // 测试 console.log(JSON.stringify(text));控制台.log（文本）；

这是对 Lonnie Best answer 的改进，因为他的答案中的换行符与 ruby 输出中的位置不完全相同

---

在 JavaScript 中打印多行字符串的一种简单方法是使用由反引号 (` `) 表示的模板文字（模板字符串）。您还可以在模板字符串中使用变量（` name is ${value} `）

你也可以

const value = `multiline` const text = `这是js中的${value}字符串`;控制台.log（文本）；

---

在 Javascrips 中创建多行字符串的最简单方法是使用反引号 ( `` )。这允许您创建多行字符串，您可以在其中使用 ${variableName} 插入变量。

例子：

让名称='威廉';让年龄= 26； let multilineString = ` 我的名字是：${name} 我的年龄是：${age} `; console.log(multilineString);

兼容性：

它是在 ES6//es2015 中引入的

它现在得到所有主要浏览器供应商的原生支持（除了 Internet Explorer）

Check exact compatibility in Mozilla docs here

---

ES6 的做法是使用模板文字：

const str = `This 

is 

a

multiline text`; 

console.log(str);

更多参考here

---

您可以使用 TypeScript（JavaScript SuperSet），它支持多行字符串，并且无需开销即可转译回纯 JavaScript：

var templates = {
    myString: `this is
a multiline
string` 
}

alert(templates.myString);

如果您想使用纯 JavaScript 完成相同的操作：

var templates = 
{
 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(templates.myString)

请注意，iPad/Safari 不支持 'functionName.toString()'

如果您有很多遗留代码，您还可以在 TypeScript 中使用纯 JavaScript 变体（用于清理目的）：

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

并且您可以使用纯 JavaScript 变体中的多行字符串对象，将模板放入另一个文件中（您可以将其合并到包中）。

您可以在
http://www.typescriptlang.org/Playground 试用 TypeScript

---

ES6 允许您使用反引号在多行上指定一个字符串。它被称为模板文字。像这样：

var multilineString = `One line of text
    second line of text
    third line of text
    fourth line of text`;

在 NodeJS 中可以使用反引号，Chrome、Firefox、Edge、Safari 和 Opera 都支持它。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

---

另请注意，当在每行末尾使用正反斜杠将字符串扩展到多行时，正反斜杠之后的任何额外字符（主要是空格、制表符和错误添加的注释）都会导致意外的字符错误，我花了一个小时才找到出去

var string = "line1\  // comment, space or tabs here raise error
line2";

---

出于对互联网的热爱，请使用字符串连接并选择不使用 ES6 解决方案。 ES6 并非全面支持，就像 CSS3 和某些浏览器在适应 CSS3 运动方面很慢。使用普通的 JavaScript，您的最终用户会感谢您。

例子：

var str = "This world is neither flat nor round. "+ "Once was lost will be found";

---

您可以使用标记模板来确保获得所需的输出。

例如：

// Merging multiple whitespaces and trimming the output

const t = (strings) => { return strings.map((s) => s.replace(/\s+/g, ' ')).join("").trim() }
console.log(t`
  This
  Is
  A
  Multiline
  String
`);
// Output: 'This Is A Multiline String'

// Similar but keeping whitespaces:

const tW = (strings) => { return strings.map((s) => s.replace(/\s+/g, '\n')).join("").trim() }
console.log(tW`
  This
  Is
  A
  Multiline
  String
`);
// Output: 'This\nIs\nA\nMultiline\nString'

---

我的字符串连接的基于数组的连接版本：

var c = []; //c stands for content
c.push("<div id='thisDiv' style='left:10px'></div>");
c.push("<div onclick='showDo(\'something\');'></div>");
$(body).append(c.join('\n'));

这对我来说效果很好，尤其是当我经常将值插入以这种方式构造的 html 时。但它有很多限制。缩进会很好。不必处理嵌套引号会非常好，只是它的笨重困扰着我。

添加到数组中的 .push() 是否会占用大量时间？请参阅此相关答案：

(Is there a reason JavaScript developers don't use Array.push()?)

在查看了这些（相反的）测试运行之后，看起来 .push() 对于不太可能增长超过 100 个项目的字符串数组很好 - 我会避免它，而支持更大数组的索引添加。

---