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

Question

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

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

Answer 1

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

Answer 2

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

例如：

// 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'

Answer 3

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

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

Answer 4

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

示例：

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

Answer 5

带变量的多行字符串

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

Answer 6

更新：

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

模板文字由反引号分隔：（

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

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

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

---

ES5 原始答案：

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

"foo \
bar"

Answer 7

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 = '一段相当长的英文文本字符串，一条错误消息\
                实际上，这只是一直持续下去——一个错误\
                让劲量兔子脸红的消息（直接通过\
                那些施瓦辛格色调）！我当时在哪儿？哦是的， \
                你有一个错误，所有无关的空格都是 \
                只是肉汁。祝你今天过得愉快。';

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

改用字符串连接：

var myString = '一串相当长的英文文本，一条错误消息' +
               '实际上，这只是一直持续下去——一个错误' +
               '让劲量兔子脸红的消息（直接通过 ' +
               '那些施瓦辛格的色调）！我当时在哪儿？哦，是的，'+
               '你遇到了一个错误，所有无关的空格都是 ' +
               '只是肉汁。祝你今天过得愉快。';

Answer 8

模式 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 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.`;

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

Answer 9

您可以在纯 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- 中）
• Safari 4 - 6 （不在 3- 中）
• Chrome 1 - 45
• Firefox 17 - 21 (16- 中没有）
• Rekonq 0.7.0 - 0.8.0
• Konqueror 4.7.4 不支持

不过，请小心您的压缩器。它往往会删除评论。对于 YUI 压缩器，以 /*! 开头的注释（例如我使用的那个）将被保留。

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

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

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

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

Answer 10

你可以这样做...

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

Answer 11

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

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)

Answer 12

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

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

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

Answer 13

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

例如

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

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

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

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

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

我会得到：

Answer 14

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

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>
  `

Answer 15

使用脚本标签：

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

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

  <前><代码><脚本>;

  // 纯 JavaScript
  var text = document.getElementById("mySoapMessage").innerHTML ;

  // 为了安全起见，使用 JQuery 的文档
  $(文档).ready(函数() {

  var text = $("#mySoapMessage").html();

  });

  <脚本 id="mySoapMessage" type="text/plain">

  
  >
  
  <类型：getConvocadosElement>
  ...

  
  //呃-哦，JavaScript 注释... SOAP 请求将失败

Answer 16

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

您还可以

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

Answer 17

我喜欢这种语法和缩进：（

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

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

Answer 18

反对者：此代码仅供参考。

此功能已在 Mac 上的 Fx 19 和 Chrome 24 中进行了测试

DEMO

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 tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
document.querySelector("ul").innerHTML=new_comment.replace('$text','This is a dynamically created text');

<ul></ul>

Answer 19

有一个让它变得美丽的库：

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

Answer 20

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

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 次。

Answer 21

javascript 中的等效内容是：

var text = `
This
Is
A
Multiline
String
`;

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

Answer 22

精确的

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

text = `This
Is
A
Multiline
String
`

// TEST
console.log(JSON.stringify(text));
console.log(text);

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

Answer 23

这适用于 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>

Answer 24

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

• 这个不起作用： 在 JavaScript 中创建多行字符串
• 这工作得相当好，我还弄清楚了如何使它在 Notepad++ 源视图中看起来不错： 在 JavaScript 中创建多行字符串

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

它不适用于 Firefox 或 Opera；仅适用于 IE、Chrome 和 Safari。

它确实可以在 Opera 11 中工作。至少在用户 JS 脚本中是这样。太糟糕了，我无法对个别答案发表评论或对答案进行投票，我会立即这样做。如果可能的话，请有更高权限的人帮我做。

Answer 25

我对 https://stackoverflow.com/a/15558082/80404 的扩展。
它需要以 /*! 形式的注释。任何多行注释 */ 其中符号 !用于防止缩小删除（至少对于 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();

Answer 26

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');

简单的。

Answer 27

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

Answer 28

在 JavaScript 中创建多行字符串的最简单方法是使用反引号 (``)。这允许您创建多行字符串，您可以在其中插入带有 ${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 文档中的确切兼容性

Answer 29

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

const str = `This 

is 

a

multiline text`; 

console.log(str);

更多参考 这里

Answer 30

您可以使用 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 变体中的多行字符串对象，将模板放入另一个文件中（您可以将其合并到包中）。

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