在 JavaScript 中创建多行字符串

问：

我在 Ruby 中有以下代码。我想将此代码转换为 JavaScript。 JS中的等效代码是什么？

text = <<"HERE"
This
Is
A
Multiline
String
HERE

答1:

huntsbot.com全球7大洲远程工作机会，探索不一样的工作方式

更新：

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

模板文字由反引号分隔：

var html = `
  
    Some HTML here
  
`;

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

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

原始 ES5 答案：

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

"foo \
bar"

请注意：有些浏览器会在延续时插入换行符，有些则不会。

Visual Studio 2010 似乎也被这种语法弄糊涂了。

@Nate 它在 ECMA-262 5th Edition 第 7.8.4 节中指定并称为 LineContinuation ：“行终止符不能出现在字符串文字中，除非作为 LineContinuation 的一部分产生空字符序列。使行终止符成为字符串文字的字符串值的一部分的正确方法是使用转义序列，例如 \n 或 \u000A。

当浏览器不一致地对待它时，我不明白为什么你会这样做。跨多行的 "line1\n" + "line2" 具有足够的可读性，并且可以保证您的行为一致。

“浏览器支持正常”... IE11 不支持 - 不正常

答2:

huntsbot.com – 高效赚钱，自由工作

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 兔子脸红（直接通过’ + ‘那些施瓦辛格的阴影）！我在哪里？哦，是的，’+‘你有一个错误，所有无关的空格都是’+‘只是肉汁。祝你今天过得愉快。’;

我不明白谷歌的建议。除了非常旧的浏览器之外，所有浏览器都支持反斜杠后跟换行符的方法，并且将来会继续这样做以实现向后兼容性。唯一需要避免的情况是，如果您需要确保在每行末尾添加一个且只有一个换行符（或没有换行符）（另请参阅我对已接受答案的评论）。

请注意，IE11、Firefox 31、Chrome 35 或 Safari 7 不支持模板字符串。请参阅 kangax.github.io/compat-table/es6

@MattBrowne Google 的建议已经被他们记录下来，按照原因的重要性排列：（1）每行开头的空格[在示例中，您不希望字符串中出现该空格，但它在代码中看起来更好] (2) 斜杠后的空格会导致棘手的错误 [如果您以 \ 而不是 ` 结束一行，则很难注意到] 和 (3) 虽然大多数脚本引擎都支持这一点，但它不是 ECMAScript 的一部分[即为什么要使用非标准功能？] 请记住，它是一个样式指南，它是关于使代码易于阅读+维护+调试：不仅仅是“它工作”正确。`

令人惊讶的是，经过这么多年，字符串连接仍然是最好/最安全/最合规的方式。模板文字（上面的答案）在 IE 中不起作用，转义行只是一团糟，你很快就会后悔

发现旧版本的 Android 不支持反引号的困难方式，所以如果您有一个使用 webView 的 Android 应用程序，您的反引号会导致您的应用程序无法运行！

答3:

HuntsBot周刊–不定时分享成功产品案例，学习他们如何成功建立自己的副业–huntsbot.com

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

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

var myString = 
   ['',
    'some content',
    'someRefTxt',
    ''
   ].join('\n');

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

    var myString = 
       ' \
some content \
someRefTxt \
';

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

var myString = (function () {/*
   
     some content
     someRefTxt
            
*/}).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 注意：缩小/混淆您的代码后，这将丢失

请不要使用数组模式。在大多数情况下，它会比普通的字符串连接慢。

数组模式更具可读性，应用程序的性能损失通常可以忽略不计。正如那个性能测试所示，即使是 IE7 每秒也可以执行数万次操作。

+1 是一种优雅的替代方案，它不仅在所有浏览器中都以相同的方式工作，而且面向未来。

@KooiInc您的测试从已经创建的数组开始，这会扭曲结果。如果添加数组的初始化，直接连接会更快 jsperf.com/string-concat-without-sringbuilder/7 请参阅 stackoverflow.com/questions/51185/… 作为换行符的技巧，它可能没问题，但它肯定做的工作比它应该做的要多

@BMiner：1）“过早的优化是万恶之源” - Donald Knuth，2）“可读性”在旁观者的眼中

答4:

与HuntsBot一起，探索全球自由职业机会–huntsbot.com

您可以在纯 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 字符串方法… 😉

什么！？创建和反编译函数以将多行注释破解为多行字符串？现在这很难看。

jsfiddle.net/fqpwf 适用于 Chrome 13 和 IE8/9，但不适用于 FF6。我不想这么说，但我喜欢它，如果它可以成为每个浏览器的有意功能（这样它就不会消失），我会使用它。

@uosɐſ：为了它是故意的，它必须在规范中；或者如此广泛使用，以至于浏览器制造商不想删除这个“意外”功能。不过感谢您的实验……尝试一些咖啡脚本。

a.toString().substring(15, a.toString().length-4) 也有效，并且不需要扫描整个字符串（尽管它很可能会扫描，并且计数无论如何都会使其再次扫描。哦，好吧.)

非常方便。我将它用于（Jasmine）单元测试，但避免将它用于生产代码。

答5:

保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com

你可以这样做…

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

第一个例子很好很简单。比 \ 方法要好得多，因为我不确定浏览器如何将反斜杠作为转义字符和多行字符处理。

CDATA 代码 (E4X) 是 obsolete and will soon stop working even in Firefox。

e4x.js 将是面向未来的良好解决方案

答6:

huntsbot.com汇聚了国内外优秀的初创产品创意，可按收入、分类等筛选，希望这些产品与实践经验能给您带来灵感。

我想出了这种非常简单的多线绳索装配方法。由于将函数转换为字符串还会返回函数内的任何注释，因此您可以使用多行注释 /**/ 将注释用作字符串。你只需要剪掉末端，你就有了你的绳子。

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)

这绝对是可怕的。我喜欢它（尽管您可能需要进行正则表达式匹配，因为我不确定 toString() 的空格有多精确。

该解决方案似乎不适用于Firefox，也许它是浏览器的安全功能？编辑：没关系，它仅不适用于 Firefox 版本 16。

还要提防删除评论的缩小器...：D

这就是为什么我们不能拥有美好的事物。

你可以在 javascript 领域做一些奇怪的事情。虽然老实说，你不应该使用它。

答7:

huntsbot.com精选全球7大洲远程工作机会，涵盖各领域，帮助想要远程工作的数字游民们能更精准、更高效的找到对方。

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

    My
    multiline
    string


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

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

任何你不想将你的字符串放入单独和遥远的脚本元素的地方。

一个有效的反对！它并不完美。但是对于模板，这种分离不仅可以，甚至可以鼓励。

我更喜欢将超过 80/120 个字符的所有内容拆分为多行，恐怕这不仅仅是模板。我现在更喜欢 'line1 ' + 'line2' 语法。它也是最快的（尽管这可能与非常大的文本相媲美）。不过这是一个不错的技巧。

实际上，这是 HTML 而不是 Javascript：-/

然而，在 javascript 中获取多行字符串的任务可以通过这种方式完成

答8:

huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

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

例如

     Strings
     On
     Multiple
     Lines
     Here

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

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

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

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

我得到：

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

谢谢你！这是我发现的唯一解决我的问题的答案，其中涉及可能包含单引号和双引号的任意组合的未知字符串，这些字符串直接插入到代码中，没有机会进行预编码。 （它来自创建 JS 的模板语言——仍然来自受信任的来源，而不是表单提交，所以它不是完全疯狂的）。

这是唯一对我有用的从 Java 字符串创建多行 javascript 字符串变量的方法。

如果字符串是 HTML 怎么办？

$('#UniqueID').content()

@Pacerier 我从 Google 和其他网站读到的所有内容都表示，现在 Google 确实索引 display:none 内容，这很可能是由于 JavaScript 样式前端的流行。 （例如，具有隐藏/显示功能的常见问题解答页面。）但您需要小心，因为谷歌表示如果隐藏内容似乎旨在人为地提高您的 SEO 排名，他们会惩罚您。

答9:

huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

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

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，我们可以利用其模板字符串功能。有了它，我们只需要使用反引号来创建多行字符串

例子：

 `{{title}}
  {{hero.name}} details!
  id: {{hero.id}}
  name: {{hero.name}}
  `

我认为这是您刚刚在页面上重复了五年的内容，但是以一种更简洁的方式。

斜线连接不会在行首包含空格吗？

答10:

一个优秀的自由职业者，应该有对需求敏感和精准需求捕获的能力，而huntsbot.com提供了这个机会

使用脚本标签：

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

按原样获取多行文本…（注意文本编码：UTF-8、ASCII） // 纯 javascript var text = document.getElementById(“mySoapMessage”).innerHTML ; // 使用 JQuery 的文档为安全做好准备 $(document).ready(function() { var text = $(“#mySoapMessage”).html(); }); <soapenv:Envelope xmlns:soapenv=“http://schemas.xmlsoap.org/soap/envelope/” xmlns:typ=“… .”> soapenv:Header/ soapenv:Body typ:getConvocadosElement … </typ:getConvocadosElement> </soapenv:Body> </soapenv:Envelope> //呃-哦，javascript 注释… SOAP 请求将失败

我认为这种策略是干净的，而且远未得到充分利用。 jsrender 使用这个。

我将它与 innerText iso innerHTML 一起使用，但是如何确保保留空格？

如果您正在使用它们，还有 ajax 查询。您可以尝试更改您的标题 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 我不记得除了在 JS 中输入错误的注释之外还有其他问题。没有问题的空间。

答11:

huntsbot.com – 程序员副业首选，一站式外包任务、远程工作、创意产品分享订阅平台。

我喜欢这种语法和缩进：

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

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

我使用它，除了我在前一行的末尾加上“+”，以明确该语句在下一行继续。不过，您的方式确实可以更均匀地排列缩进。

@Sean我也用这个，我还是喜欢把'+'放在每一个新行的开头，最后是';'在一条新线上，因为我发现它更“正确”。

将 + 放在开头可以注释掉该行，而无需在序列的第一行/最后一行时编辑其他行。

我也更喜欢前面的 +，因为在视觉上我不需要扫描到行尾就知道下一个是延续。

原文链接：https://www.huntsbot.com/qa/ZveB/creating-multiline-strings-in-javascript?lang=zh_CN&from=csdn

huntsbot.com精选全球7大洲远程工作机会，涵盖各领域，帮助想要远程工作的数字游民们能更精准、更高效的找到对方。