如何将多行字符串文字赋给变量？

Question

如何将带有多行字符串的Ruby代码转换为JavaScript？

text=<<“此处”这个是A类多行字符串酒店雇员和饭馆雇员

Answer 1

更新：

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

模板文字由分隔反勾号:

var html=变量html=`<div><span>此处显示一些HTML</span></div>`;

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

浏览器支持正常，但您可以使用输送器更加兼容。

---

ES5原始答案：

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

“foo\巴“

Answer 2

ES6更新：

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

const htmlString=`问候多线字符串！`；

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

const htmlString=`${user.name}喜欢您关于字符串的帖子`；

这可以归结为串联：

user.name+“喜欢你关于字符串的帖子”

ES5原始答案：

谷歌JavaScript风格指南建议使用字符串串联而不是转义换行：

不要这样做：

var myString='一个相当长的英文文本字符串，错误消息\事实上，这只是一个错误\让活力兔子脸红的信息（通过\那些施瓦辛格墨镜）！我在哪里？哦，是的\您有一个错误，所有多余的空白都是\只是肉汁。祝你今天愉快；

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

使用字符串串联：

var myString='相当长的英语文本字符串，错误消息'+“实际上，这只是一个错误”+“让活力兔脸红的信息（一直到现在”+“那些施瓦辛格墨镜）！我在哪里？哦，是的，”+'您有一个错误，所有多余的空白都是'+“只是肉汁。祝你今天愉快；

Answer 3

图案text=<<“HERE”这是一个多行字符串在js中不可用（我记得在我的Perl好日子里经常使用它）。

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

var myString=['<div id=“someId”>'，'一些内容<br/>'，'<a href=“#someRef”>someRefTxt</a>'，'</div>'].join（“\n”）；

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

var myString='<div id=“someId”>\一些内容<br/>\someRefTxt\</div>'；

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

var myString=（函数（）{/*<div id=“someId”>一些内容<br/>someRefTxt</a></div>*/}).toString（）.match（/[^]*\/\*（[^]*）\*\/\}$/）[1]；

外部编辑：J小提琴

ES20xx系列支持使用跨越多行的字符串模板字符串:

let str=`这是一个文本具有多行。解释逃逸，\n是一个换行符；let str=String.raw`这是一个文本具有多行。不解释Escapes，\n不是换行符；

¹注意：缩小/混淆代码后，此信息将丢失

Answer 4

你可以在纯JavaScript中具有多行字符串。

此方法基于函数的序列化，即定义为依赖于实现。它在大多数浏览器中都能正常工作（见下文），但不能保证它在未来仍能正常工作，所以不要依赖它。

使用以下功能：

此处的函数Doc（f）{return f.toString（）。替换（/^[^\/]+\/\*！？/，''）。替换（/\*\/[^\/]+$/，''）；}

您可以有这样的here-documents：

var tennysonQuote=hereDoc（函数（）{/*！他们不回答，他们没有理由，他们只有做和死*/});

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

• IE 4-10
• 歌剧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压缩机，注释以开头/*!（就像我用过的一样）会被保存下来。

我认为真实的解决方案是使用咖啡脚本.

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

设foo=`酒吧喜欢蛋糕baz喜欢啤酒啤酒爱人们`.remove缩进（）

应该有人写这个。removeIndentation字符串方法…；）

Answer 5

你可以这样做。。。

var string='这是\n'+“多行\n”+“string”；

Answer 6

我想出了一个非常巧妙的多行字符串方法。由于将函数转换为字符串也会返回函数内的任何注释，因此可以使用多行注释/**/将注释用作字符串。你只需剪掉末端，你就有了你的绳子。

var myString=函数（）{/*这是一些令人敬畏的多线使用注释的字符串函数内部作为字符串返回。享受jimmy操纵的代码。*/}.toString（）.slice（14，-3）警报（myString）

Answer 7

我很惊讶我没有看到这一点，因为它在任何地方都有效，我测试过它，它对模板非常有用：

<script type=“bogus”id=“multi”>我的多行一串</script><脚本>警报（$（'#multi'）.html（））；</script>

有人知道有HTML但不工作的环境吗？

Answer 8

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

例如

<div id=“UniqueID”style=“display:none；”>串打开多个线在这里</div>

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

$（“#UniqueID”）.html（）；

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

警报（$（'#UniqueID'）.html（））；

我得到：

Answer 9

有多种方法可以实现这一点

1.斜杠拼接

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

2.常规串联

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

3.数组连接连接

var多线=['1','2','3','4','5'].join（“”）；

性能方面，斜杠串联（第一个）是最快的。

请参阅 这个测试用例有关性能的更多详细信息

更新：

使用2015年欧洲标准，我们可以利用其模板字符串功能。有了它，我们只需要使用回退来创建多行字符串

例子：

`{{title}}</h1><h2>{{hero.name}}详细信息</h2><div><label>id:</label>{hero.id}}<div><label>name:</label>{hero.name}}`

Answer 10

使用脚本标记：

• 添加<script></脚本>包含多行文本的块头标签；

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

  <脚本>//纯javascriptvar text=document.getElementById（“mySoapMessage”）.innerHTML；//使用JQuery的安全文档$（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:标题/><soapenv:正文><典型：getConvocadosElement>...</typ:getConvocadosElement></soapenv:Body></soapenv:信封><!-- 此注释将出现在字符串-->中//呃，javascript注释。。。SOAP请求将失败</script>

Answer 11

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

你也可以

const value=`多行`const text=`这是一个${value}js中的字符串`；console.log（文本）；

Answer 12

我喜欢这种语法和含义：

string='我的长字符串…\n'+'在此处继续\n'+“还有这里。”；

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

Answer 13

落选者：此代码仅供参考。

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

演示

var新注释/*<<<电动势<li class=“photobooth-comment”><span class=“username”><a href=“#”>您</a>：</span><span class=“comment-text”>$文本</span>@<span class=“comment-time”>二维</span>以前</li>电动势*///注意，这里的script标记被硬编码为FIRST标记new_comment=document.currentScript.innerHTML.split（“EOF”）[1]；document.querySelector（“ul”）.innerHTML=new_comment.replace（'$text'，'这是一个动态创建的文本'）；

<ul>

Answer 14

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

https://github.com/sindresorhus/multiline网站

之前

var str=“”+'<!doctype html>'+'<html>'+“<正文>”+'<h1>❤ 独角兽</h1>'+“</body>”+'</html>'+'';

之后

var str=多行（函数（）{/*<!doctype html><html><body><h1>❤ 独角兽</h1></body></html>*/});

Answer 15

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

1:

let str=`多行字符串。福。巴`

最终记录：

多行字符串。福。酒吧。

2:

let str=`多行字符串。食品。巴`

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

多行字符串。食品。酒吧。

我用regex给出了一个非常简单的答案，它正确地记录了str：

let str=`多行字符串。食品。酒吧。`。替换（/\n+/g，'\n'）；

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

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

Answer 16

javascript中的等效项是：

var文本=`这个是A类多行字符串`;

这里是规范。请参阅底部的浏览器支持第页。这里有一些示例也是。

Answer 17

完全正确

红宝石生产:“这是一个多行字符串”-下面的JS生成完全相同的字符串

text=`此是A类多行字符串`//测试console.log（JSON.stringify（文本））；console.log（文本）；

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

Answer 18

这适用于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='<表border=“0”><tr><td><span class=“mlayouttablecellsdynamic”>套餐价格65.00美元</span></td></tr></table>'></div><script type=“text/javascript”>警报（$（“.crady_idea”）.attr（“thorn_in_my-side”）；</script>

Answer 19

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

• 这个不起作用：在JavaScript中创建多行字符串
• 这工作得很好，我还发现了如何在记事本++源代码视图中使其看起来很好：在JavaScript中创建多行字符串

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

它对firefox或opera不起作用；仅适用于IE、chrome和safari。

这在歌剧11中确实有效。至少在用户JS脚本中。遗憾的是，我不能对个人的答案发表评论或投票支持，我会立即这样做。如果可能的话，请有更高权限的人帮我做。

Answer 20

我的分机https://stackoverflow.com/a/15558082/80404.它需要表单中的注释/*! 任何多行注释*/where符号！用于防止通过缩小来移除（至少对于YUI压缩机）

Function.prototype.extractComment=函数（）{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=函数（）{/*！<div class=“navbar-collapse崩溃”><ul class=“nav-navbar-nav”></ul></div>*/}.extractComment（）；

Answer 21

2015年更新：六年过去了：大多数人使用模块加载器，而主要模块系统都有加载模板的方法。它不是内联的，但最常见的多行字符串类型是模板，以及无论如何，模板通常不应出现在JS中.

require.js：“需要文本”。

使用require.js“文本”插件中的多行模板模板.html

var-template=require（'text！template.html’）

NPM/browserify：“brfs”模块

浏览验证使用“brfs”模块以加载文本文件。这实际上会将模板构建到捆绑的HTML中。

var fs=要求（“fs”）；var template=fs.readFileSync（template.html，'utf8'）；

容易的。

Answer 22

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

Answer 23

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

例子：

let name='Willem'；让年龄=26；let multilineString=`我的名字是：$｛name｝我的年龄是：${age}`;console.log（multilineString）；

兼容性：

• 它是在欧洲标准6//预计2015年
• 现在所有主要浏览器供应商（除了internet explorer）都支持它

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

Answer 24

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

const str=`此是一多行文字`；console.log（str）；

更多参考在这里

Answer 25

你可以使用类型脚本（JavaScript SuperSet），它支持多行字符串，并在无开销的情况下将文件转换回纯JavaScript：

var模板={myString:`这是多行字符串`}警报（templates.myString）；

如果您想用普通JavaScript实现同样的功能：

var模板={myString:function（）{/*这是一些令人敬畏的多层使用注释的字符串函数内部作为字符串返回。享受jimmy操纵的代码。*/}.toString（）.slice（14，-3）}警报（templates.myString）

请注意，iPad/Safari不支持'functionName.toString（）'

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

接口外部模板{myString：字符串；}声明var模板：externTemplates；警报（templates.myString）

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

您可以在以下位置尝试TypeScript
http://www.typescriptlang.org/Playground网站

Answer 26

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

var multilineString=`一行文本第二行文本第三行文字文本的第四行`；

使用反勾在NodeJS中有效，Chrome、Firefox、Edge、Safari和Opera都支持反勾。

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

Answer 27

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

例如：

//合并多个空白并修剪输出const t=（strings）=>{return strings.map（s）=>s.replace（/\s+/g，''））.join（“”）.trim（）}控制台.log（t`这个是A类多行字符串`);//输出：“这是一个多行字符串”//类似但保留空白：const tW=（strings）=>{return strings.map（s）=>s.replace（/\s+/g，'\n'））.join（“”）.trim（）}控制台.log（tW`这个是A类多行字符串`);//输出：“这是多行字符串”

Answer 28

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

var string=“line1\//注释、空格或制表符在此处引发错误第2行“；

Answer 29

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

例子：

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

Answer 30

带变量的多行字符串

var x=1string=string+`<label class=“container”><p>${x}</p></label>`；