我在Ruby中有以下代码。我想把这段代码转换成JavaScript。JS中的等效代码是什么？
text = <<"HERE"
This
Is
A
Multiline
String
HERE
更新：
ECMAScript6（ES6）引入了一种新的文本类型，即模板文本。它们有很多特性，变量插值等等，但对于这个问题最重要的是，它们可以是多行的。
模板文本由反引号分隔：
var html = `
<div>
<span>Some HTML here</span>
</div>
`;
（注意：我并不主张在字符串中使用HTML）
浏览器支持是可以的，但您可以使用更兼容的转发器。
ES5原始答案：
Javascript没有here文档语法。但是，您可以转义字面换行符，这很接近：
"foo \
bar"
模式text=<<“HERE”这是一个多行字符串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支持使用模板字符串跨多行生成字符串：
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注意：缩小/模糊代码后，这将丢失
这适用于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
*/});
该方法已在以下浏览器中成功测试（未提及=未测试）：
即4-10歌剧9.50-12（不在9-）Safari 4-6（不在3-中）铬1-45Firefox 17-21（非16-）Rekonq 0.7.0-0.8.0Konqueror 4.7.4不支持
不过，要小心你的缩小镜。它倾向于删除评论。对于YUI压缩程序，以/*开头的注释！（像我用过的那个）将被保留。
我认为真正的解决方案是使用CoffeeScript。
ES6 UPDATE：您可以使用backtick代替创建带有注释的函数，并在注释上运行toString。正则表达式需要更新为仅删除空格。您还可以使用字符串原型方法来执行此操作：
let foo = `
bar loves cake
baz loves beer
beer loves people
`.removeIndentation()
应该有人编写此.removeIndentation字符串方法…；）
总之，我在用户javascript编程（Opera 11.01）中尝试了两种方法：
这一个不起作用：在JavaScript中创建多行字符串这非常有效，我还找到了如何让它在Notepad++源代码视图中看起来很好：在JavaScript中创建多行字符串
所以我推荐Opera用户JS用户的工作方法。与作者所说的不同：
它不适用于萤火虫或歌剧；仅在IE、chrome和safari上。
它在歌剧11中确实有效。至少在用户JS脚本中。遗憾的是，我不能对个人答案发表评论，也不能对答案进行投票，我会立即这样做。如果可能，请有更高权限的人帮我做。
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原始答案：
谷歌的JavaScript风格指南建议使用字符串连接而不是转义换行：不要这样做：var myString='相当长的英文文本字符串，错误消息\事实上，这是一个错误\让精力充沛的兔子脸红的信息\那些施瓦辛格的阴影）！我在哪里？哦，是的\你有一个错误，所有多余的空格都是\只是肉汁。祝你今天愉快；在编译时，不能安全地删除每行开头的空白；斜杠后的空白将导致棘手的错误；虽然大多数脚本引擎都支持这一点，但它不是ECMAScript的一部分。请改用字符串串联：var myString='相当长的英文文本字符串，错误消息'+“事实上，这是一个错误”+“让Energizer兔子脸红的消息（直接通过）”+那些施瓦辛格的阴影）！我在哪里？哦，是的，”+'您有一个错误，所有多余的空格都是'+只是肉汁。祝你今天愉快；
我喜欢这种语法和含义：
string = 'my long string...\n'
+ 'continue here\n'
+ 'and here.';
（但实际上不能视为多行字符串）
我很惊讶我没有看到这一点，因为它在我测试过的任何地方都有效，并且对模板非常有用：
<script type="bogus" id="multi">
My
multiline
string
</script>
<script>
alert($('#multi').html());
</script>
有人知道有HTML但不起作用的环境吗？
我通过输出一个div，使其隐藏，并在需要时通过jQuery调用div id来解决这个问题。
e.g.
<div id="UniqueID" style="display:none;">
Strings
On
Multiple
Lines
Here
</div>
然后，当我需要获取字符串时，我只需使用以下jQuery：
$('#UniqueID').html();
它会在多行上返回我的文本。如果我打电话
alert($('#UniqueID').html());
我得到：
使用脚本标记：
添加＜script＞</script>块，其中包含head标记中的多行文本；按原样获取多行文本…（注意文本编码：UTF-8、ASCII）<脚本>//纯javascriptvar text=document.getElementById（“mySoapMessage”）.innerHTML；//使用JQuery的文档做好安全准备$（文档）.ready（函数）{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:getConvocatosElement>...</typ:getConvocatosElement></soapenv:Body></soapenv:信封><!-- 此注释将出现在字符串-->中//呃哦，javascript注释。。。SOAP请求将失败</script>
刚刚尝试了Anonymous的答案，发现这里有一个小技巧，如果反斜杠后面有空格，它就不起作用了因此，以下解决方案不起作用-
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 text
Both 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 text
Both 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和Chrome 24中进行了测试
DEMO
var new_comment/*<<<（英）<li class=“photobooth comment”><span class=“username”><a href=“#”>您</a>：</span><span class=“comment text”>$文本</span>@<span class=“comment time”>第二天</span>前</li>（英）*///注意，这里的脚本标记被硬编码为FIRST标记new_comment=document.currentScript.innerHTML.split（“EOF”）[1]；document.querySelector（“ul”）.innerHTML=new_comment.replace（“$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")}
如果“arguments”属性是一个正确的数组，当然会更好。
第二个版本可能使用“”来进行连接，当您想要控制非常长的字符串中的换行符时。
我想出了一个非常巧妙的方法来处理多行字符串。由于将函数转换为字符串也会返回函数内的任何注释，因此可以使用多行注释/**/将注释用作字符串。你只需要把两端修剪一下，你就有了你的绳子。
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)
我这样编程：
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将函数转换为字符串并使用/**/语法创建多行注释，然后删除“function（）｛/*\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
我的基于数组的字符串连接版本：
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（）是否占用了大量时间？请参阅此相关答案：
（JavaScript开发人员不使用Array.push（）有什么原因吗？）
在查看了这些（相反的）测试运行之后，看起来.push（）对于不太可能增长超过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.它需要格式为/*！任何多行注释*/where符号！用于防止缩小移除（至少适用于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/browserify:“brfs”模块
Browserify使用“brfs”模块加载文本文件。这实际上会将模板构建到捆绑的HTML中。
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 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变体中的多行字符串对象，将模板放入另一个文件中（可以合并到捆绑包中）。
您可以在以下位置尝试TypeScripthttp://www.typescriptlang.org/Playground
javascript中的等效值为：
var text = `
This
Is
A
Multiline
String
`;
这是规格。请参阅本页底部的浏览器支持。这里也有一些例子。
ES6允许您使用反勾号在多行上指定字符串。它被称为模板文字。这样地：
var multilineString = `One line of text
second line of text
third line of text
fourth line of text`;
在NodeJS中使用backtick，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";
您必须使用串联运算符“+”。
<!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>
通过使用源代码-
This <br>is <br>multiline <br>string.
通过使用<br>，您的浏览器输出将如下所示-
This is multiline string.
出于对互联网的热爱，请使用字符串连接，并选择不使用ES6解决方案。ES6并不是全面支持的，很像CSS3，某些浏览器适应CSS3的移动速度很慢。使用简单的JavaScript，您的最终用户将感谢您。
例子：
var str=“这个世界既不是平的，也不是圆的。”+“一旦丢失将被发现”；
ES6的方法是使用模板文字：
const str = `This
is
a
multiline text`;
console.log(str);
此处提供更多参考
在Javascrip中创建多行字符串最简单的方法是使用反引号（``）。这允许您创建多行字符串，在其中可以插入带有${variableName}的变量。
例子：
let name='Willem'；假设年龄=26岁；让multilineString=`我的名字是：$｛name｝我的年龄是：${age}`;console.log（multilineString）；
兼容性：
它在ES6//es2015中介绍现在，所有主要浏览器供应商（internet explorer除外）都支持它
在此处查看Mozilla文档中的确切兼容性
规则是：当在字符串中时，在需要换行的地方使用；您不必在JavaScript之前或之后放置空格，JavaScript的解释器足够聪明，可以知道不可打印字符表示的长度。
准确的
Ruby produce：“This\nIs\nMultiline\nString\n”-在JS下面生成完全相同的字符串
text=`此是A.多行一串`//测试console.log（JSON.stringify（文本））；console.log（文本）；
这是对朗尼最佳答案的改进，因为他的答案中的换行符与ruby输出中的位置不完全相同
您可以使用标记的模板来确保获得所需的输出。
例如：
// 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'
JavaScript从未有过处理多行字符串的真正好方法，直到2015年引入ES6以及模板文本。
模板文本是由反引号（``）分隔的字符串，而不是普通的单引号（“”）/双引号（““”）分隔符。
在这里找到了很多过度设计的答案。我认为最好的两个答案是：
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次。
带变量的多行字符串
var x = 1
string = string + `<label class="container">
<p>${x}</p>
</label>`;
在JavaScript中打印多行字符串的一种简单方法是使用由反引号（``）表示的模板文本（模板字符串）。还可以在模板字符串中使用变量，如（“name is$｛value｝”）
你也可以
常量值=`multiline`const text=`这是一个$｛value｝js中的字符串`；console.log（文本）；
推荐文章
- 如何在Typescript中解析JSON字符串
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- 如何分割逗号分隔的字符串?
- Java字符串—查看字符串是否只包含数字而不包含字母
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中，'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
