小开

你能做到的…

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

小开

最佳答案

更新时间：

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

模板文字由反引号分隔：

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

（注意：我不提倡在字符串中使用超文本标记语言）

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

原ES5答案：

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

"foo \bar"

小开

模式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>';

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

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

外部编辑：jsfiddle

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

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

¹注意：这将在缩小/混淆代码后丢失

小开

这适用于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中有多行字符串。

此方法基于函数的序列化，即定义为依赖于实现。它确实适用于大多数浏览器（见下文），但不能保证它将来仍然有效，所以不要依赖它。

使用以下函数：

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*/});

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

IE 4-10
Opera 9.50-12（不在9-）
Safari4-6（不是3-）
Chrome1-45
Firefox 17-21（不是16-）
Rekonq 0.7.0-0.8.0
在Konqueror 4.7.4中不支持

不过，要小心使用你的小程序。它倾向于删除注释。对于YUI压缩器，以/*!开头的注释（就像我使用的那个）将被保留。

我认为真正的解决方案是使用脚本编写。

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

let foo = `bar loves cakebaz loves beerbeer loves people`.removeIndentation()

有人应该写这个。

小开

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

这个没有用：在JavaScript中创建多行字符串
这工作得很好，我也想出了如何让它在Notepad++源代码视图中看起来不错：在JavaScript中创建多行字符串

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

它不适用于Firefox或Opera；仅适用于IE，chrome和Safari。

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

小开

ES6更新：

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

const htmlString = `Say hello tomulti-linestrings!`;

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

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

这只是转化为连接：

user.name + ' liked your post about strings'

原ES5答案：

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

不要这样做：
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的一部分。

改用字符串连接：
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.';

小开

我喜欢这个语法和缩进：

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

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

小开

我很惊讶我没有看到这个，因为它适用于我测试过的任何地方，并且对模板非常有用：

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

有没有人知道有超文本标记语言但不起作用的环境？

小开

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

e. g.

<div id="UniqueID" style="display:none;">StringsOnMultipleLinesHere</div>

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

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

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

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

我得到：

输入图片描述

小开

使用脚本标签：

将包含多行文本的<script>...</script>块添加到head标签中；

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

<script>
// pure javascriptvar text = document.getElementById("mySoapMessage").innerHTML ;
// using JQuery's document ready for safety$(document).ready(function() {
var text = $("#mySoapMessage").html();
});
</script>
<script id="mySoapMessage" type="text/plain">
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:typ="..."><soapenv:Header/><soapenv:Body><typ:getConvocadosElement>...</typ:getConvocadosElement></soapenv:Body></soapenv:Envelope>
<!-- this comment will be present on your string -->//uh-oh, javascript comments...  SOAP request will fail

</script>

小开

刚刚尝试了匿名答案，发现这里有一个小技巧，如果反斜杠\后有空格，它不起作用
所以下面的解决方案不起作用-

var x = { test:'<?xml version="1.0"?>\ <-- One space here<?mso-application progid="Excel.Sheet"?>'};

但是当空间被移除时，它就起作用了-

var x = { test:'<?xml version="1.0"?>\<-- No space here now<?mso-application progid="Excel.Sheet"?>'};
alert(x.test);

希望有帮助！！！

小开

我认为这个解决方法应该在IE，Chrome，Firefox，Safari，Opera中工作-

使用jQuery：

<xmp id="unique_id" style="display:none;">Some plain textBoth type of quotes :  " ' " And  ' " 'JS Code : alert("Hello World");HTML Code : <div class="some_class"></div></xmp><script>alert($('#unique_id').html());</script>

使用纯JavaScript：

<xmp id="unique_id" style="display:none;">Some plain textBoth type of quotes :  " ' " And  ' " 'JS Code : alert("Hello World");HTML Code : <div class="some_class"></div></xmp><script>alert(document.getElementById('unique_id').innerHTML);</script>

干杯！！

小开

下选民：此代码仅供参考。

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

演示

var new_comment; /*<<<EOF<li class="photobooth-comment"><span class="username"><a href="#">You</a>:</span><span class="comment-text">$text</span>@<span class="comment-time">2d</span> ago</li>EOF*/// note the script tag here is hardcoded as the FIRST tagnew_comment=document.currentScript.innerHTML.split("EOF")[1];document.querySelector("ul").innerHTML=new_comment.replace('$text','This is a dynamically created text');

<ul></ul>

小开

它不是非常优雅，但对我来说足够干净：

var myString = "First line" + "\n";var myString = myString + "Second line" + "\n";var myString = myString + "Third line" + "\n";

小开

这是一种相当经济的方法，至少在源代码方面：

function s() {var args = [],index;for (index = 0; index< arguments.length; index++) {args.push (arguments [index]);}return args.join ("\n");}console.log (s ("This is the first line","and this is the second","finally a third"));
function s() {return arguments.join ("\n")}

当然，如果“参数”属性是一个正确的数组，那就更好了。

第二个版本可能会使用“”在您想要控制非常长的字符串中的换行符时对大小写进行连接。

小开

我想出了这个非常吉米操纵的多行字符串方法。由于将函数转换为字符串也会返回函数内的任何注释，因此您可以使用多行注释将注释用作字符串 /**/. 您只需修剪末端，就可以得到字符串。

var myString = function(){/*This is someawesome multi-linedstring using a commentinside a functionreturned as a string.Enjoy the jimmy rigged code.*/}.toString().slice(14,-3)
alert(myString)

小开

我这样编程：

sys = {layout: null,makeLayout: function (obCLS) {this.layout = $('<div />').addClass('editor').appendTo($(obCLS)).append(
/* Cargador *//* @this.layout.find('> div:nth-of-child(1)'); */'<div>' +'   <p>Seleccione la imagen que desea procesar.</p>' +'   <input type="button" value="Seleccionar" class="btn btn-xlarge btn-success" />' +'   <span></span>' +'</div>' +
/* Cargador - Progreso *//* @this.layout.find('> div:nth-of-child(2)'); */'<div>' +'   <div>' +'       <div></div>' +'       <div>' +'           <div></div>' +'       </div>' +'   </div>' +'</div>' +
/* Editor *//* @this.layout.find('> div:nth-of-child(3)');* @sidebar = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(1)');* @body    = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(2) > div'); */'<div>' +'   <div>' +'       <div>' +'           <div></div>' +'           <div>' +'               <div></div>' +'           </div>' +'       </div>' +'   </div>' +'</div>');}}
sys.makeLayout('#div');

小开

我想我发现了另一种内联的方法，而每一行都没有任何侵入性的语法。使用Javascript将函数转换为字符串并使用/**/语法创建多行注释，然后删除“函数() {/*\n”和“\n*/}”。

var multiline = function(string) { return string.toString().replace(/(^[^\n]*\n)|(\n\*\/\})/g, ""); };
console.log(multiline(function() {/*Hello world!I'm a multiline string!
Tada!*/}));

我能看到的唯一缺陷是语法突出显示。

编辑：如果我再向下滚动一点，我会看到这个答案做了完全相同的事情：https://stackoverflow.com/a/5571069/916553

小开

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

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

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

要添加到数组中的. ush（）是否占用了很多时间？请看这个相关答案：

（JavaScript开发人员不使用Array.push（）的原因是什么？）

在查看了这些（相反的）测试运行之后，看起来. ush（）对于字符串数组来说是可以的，它不太可能增长超过100个项目-我将避免它，以支持较大数组的索引添加。

小开

我找到了一个更优雅的解决方案，也许有点非主题相关，因为它使用PHP，但我相信它会对你的一些人有用和可爱*……

这个javascript代码应该留在脚本标签内

var html=<?php echo json_encode("
<div class=container><div class=area1>xxx</div><div class=area2>".$someVar."</div></div>
"); ?>

在你的输出html中，你会看到类似的东西

var html="\r\n\r\n\t\t\t<div class=container>\r\n\t\t\t\t<div class=area1>\r\n\t\t\t\t\txxx\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=area2>\r\n\t\t\t\t\t44\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t";

瞧！，它为您的文件提供代码易读性。

pD：此示例使用json_encode（）PHP函数，但肯定有ASP、Ruby和JSP语言的等效函数。

pD：但是，这个解决方案也有他的局限性，其中之一是你不能在封装的代码中使用JavaScript变量。

小开

我的扩展名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();

小开

您可以使用+=连接您的字符串，似乎没有人回答，这将是可读的，也整洁……像这样的东西

var hello = 'hello' +'world' +'blah';

也可以写成

var hello = 'hello';hello += ' world';hello += ' blah';
console.log(hello);

小开

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

require.js：“需要文本”。

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

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

NPM/Browserfy：'brfs'模块

浏览使用'brfs'模块以加载文本文件。这实际上会将您的模板构建到捆绑的超文本标记语言中。

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

简单。

小开

有一个图书馆让它变得美丽：

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.斜线连接

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

2.正则串联

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

3.数组连接串联

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

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

参考这个测试用例关于性能的更多细节

更新时间：

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

示例：

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

小开

如果您碰巧仅在Node中运行，您可以使用fs模块从文件中读取多行字符串：

var diagram;var fs = require('fs');fs.readFile( __dirname + '/diagram.txt', function (err, data) {if (err) {throw err;}diagram = data.toString();});

小开

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

输入图片描述

小开

您可以使用TypeScript（JavaScript SuperSet），它支持多行字符串，并转译回纯JavaScript而没有开销：

var templates = {myString: `this isa multilinestring`}
alert(templates.myString);

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

var templates ={myString: function(){/*This is someawesome multi-linedstring using a commentinside a functionreturned 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变体中的multiline-string对象，将模板放入另一个文件（您可以将其合并到捆绑包中）。

您可以在
尝试TypeScripthttp://www.typescriptlang.org/Playground

小开

JavaScript中的等价物是：

var text = `ThisIsAMultilineString`;

这是产品规格。请参阅此页面底部的浏览器支持。这里也有一些示例。

小开

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

var multilineString = `One line of textsecond line of textthird line of textfourth 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 errorline2";

小开

您必须使用连接运算符“+”。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><p id="demo"></p><script>var str = "This "+ "\n<br>is "+ "\n<br>multiline "+ "\n<br>string.";document.getElementById("demo").innerHTML = str;</script></body></html>

通过使用\n，您的源代码将看起来像-

This<br>is<br>multiline<br>string.

通过使用<br>，您的浏览器输出将看起来像-

Thisismultilinestring.

小开

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

示例：

var str=“这个世界既不平也不圆。”+“一旦丢失就会被找到”；

小开

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

const str = `This
is
a
multiline text`;
console.log(str);

更多参考这里

小开

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

示例：

let name = 'Willem';let age = 26;
let multilineString = `my name is: ${name}
my age is: ${age}`;
console.log(multilineString);

兼容性：

它是在ES6//es2015中引入的
它现在被所有主要浏览器供应商（Internet Explorer除外）原生支持

在此处检查Mozilla文档中的确切兼容性

小开

规则是：当在字符串中时，在任何需要新行的地方使用\n；您不必在\n之前或之后放置空格，JavaScript的解释器足够聪明，可以知道不可打印的字符表示有多长。

小开

确切

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

text = `ThisIsAMultilineString`
// TESTconsole.log(JSON.stringify(text));console.log(text);

这是对Lonnie最佳答案的改进，因为他的答案中的新行字符与ruby输出中的位置不完全相同

小开

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

例如：

// Merging multiple whitespaces and trimming the output
const t = (strings) => { return strings.map((s) => s.replace(/\s+/g, ' ')).join("").trim() }console.log(t`ThisIsAMultilineString`);// 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`ThisIsAMultilineString`);// Output: 'This\nIs\nA\nMultiline\nString'

小开

JavaScript从来没有真正的好方法来处理多行字符串，直到2015年ES6与模板文字一起引入。

模板文字是由反引号（"）分隔的字符串，而不是普通的单（"）/双（""）e引号分隔符。

小开

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

1：

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

最终记录：

Multiline string.foo.bar.

2：

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

这会正确记录它，但如果str嵌套在函数/对象等中，它在脚本文件中会很难看…：

Multiline string.foo.bar.

我用regex正确记录str的简单答案：

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

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

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

小开

带变量的多行字符串

var x = 1string = string + `<label class="container"><p>${x}</p></label>`;

小开

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

您也可以

const value = `multiline`const text = `This is a${value}string in js`;console.log(text);

在JavaScript中创建多行字符串

更新时间：

原ES5答案：

ES6更新：

原ES5答案：

require.js：“需要文本”。

NPM/Browserfy：'brfs'模块

之前

之后

示例：

兼容性：

确切