在JavaScript中创建多行字符串

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

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

更新：

ECMAScript 6（ES6）引入了一种新型的文字，即模板文字。它们具有许多功能，其中包括变量插值，但对于这个问题最重要的是，它们可以是多行的。

模板文字由反引号分隔：

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

（注意：我不主张在字符串中使用HTML）

浏览器支持还可以，但是您可以使用编译器来更好地兼容。

ES5原始答案：

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

"foo \
bar"

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 = '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.';

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

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

您可以在纯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中）
• 镀铬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字符串方法...;）

你可以这样做...

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

我想出了多行字符串的这种非常笨拙的操纵方法。由于将函数转换为字符串还会返回函数内部的任何注释，因此您可以使用多行注释/ ** /将注释用作字符串。您只需要修剪两端就可以了。

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)

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

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

有人知道存在HTML但无法使用HTML的环境吗？

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

例如

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

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

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

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

alert($('#UniqueID').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('');

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

有关性能的更多详细信息，请参考此测试用例

更新：

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

例：

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

使用脚本标签：

• <script>...</script>在head标签中添加包含多行文本的代码块；

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

  <script>
  
      // pure javascript
      var 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>

我喜欢这种语法和倾向：

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

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

有一个使它漂亮的库：

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

Downvoters：此代码仅供参考。

已在Mac上的Fx 19和Chrome 24中测试过

演示

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>

总结起来，我已经尝试了用户javascript编程（Opera 11.01）中列出的2种方法：

• 这个没有用：用JavaScript创建多行字符串
• 这工作得很好，我还想出了如何在Notepad ++源代码视图中使其看起来更好：在JavaScript中创建多行字符串

因此，我为Opera用户JS用户推荐了一种工作方法。与作者所说的不同：

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

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

我对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();

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

简单。

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

javascript中的等效项是：

var text = `
This
Is
A
Multiline
String
`;

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

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

您可以使用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变体中的multiline-string对象，在该对象中，您可以将模板放入另一个文件（可以合并到分发包中）。

您可以在http://www.typescriptlang.org/Playground尝试使用TypeScript
。

ES6的实现方式是使用模板文字：

const str = `This 

is 

a

multiline text`; 

console.log(str);

在这里更多参考

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/zh-CN/docs/Web/JavaScript/Reference/Template_literals

在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文档中的确切兼容性

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

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个项目的字符串数组来说是很好的-我将避免使用大型数组的索引添加。

您可以使用它+=来连接您的字符串，好像没人回答那样，它既可读又整洁……类似这样

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

也可以写成

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

console.log(hello);

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

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

请热爱互联网，使用字符串串联，并选择不使用ES6解决方案。并非全面支持ES6，就像CSS3一样，某些浏览器适应CSS3的速度也很慢。使用普通的JavaScript，您的最终用户将感谢您。

例：

var str = "This world is neither flat nor round. "+ "Once was lost will be found";

您必须使用串联运算符“ +”。

<!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您的源代码，看起来像-

这个 
 <br>是
 <br>多行
 <br>字符串。

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

这个
是
多行
串。

我认为这个解决方法应该可以在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>

干杯！！

刚刚尝试了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);​

希望能帮助到你 ！！