在 JavaScript 中创建多行字符串

Question

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

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

Answer 1

更新：

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

模板文字由反引号分隔：

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

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

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

---

原始 ES5 答案：

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

"foo \
bar"

Answer 2

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

Answer 3

模式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 4

您可以在纯 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
• 歌剧 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 字符串方法...;)

Answer 5

你可以这样做...

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

Answer 6

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

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 7

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

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

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

Answer 8

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

例如

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

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

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

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

alert($('#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. Array Join 拼接

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 10

使用脚本标签：

• 将包含多行文本的<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>

Answer 11

我喜欢这种语法和缩进：

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

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

Answer 12

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>

Answer 13

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

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 14

javascript 中的等价物是：

var text = `
This
Is
A
Multiline
String
`;

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

Answer 15

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

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

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

所以我推荐 Opera 用户 JS 用户的工作方法。 和作者说的不一样：

它不适用于 Firefox 或 Opera； 仅在 IE、chrome 和 safari 上。

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

Answer 17

我对https://stackoverflow.com/a/15558082/80404 的扩展。 它期望以/*! any multiline comment */ /*! any multiline comment */ 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();

Answer 18

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 19

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

Answer 20

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

你也可以

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

Answer 21

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

const str = `This 

is 

a

multiline text`; 

console.log(str);

更多参考这里

Answer 22

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

你可以在
http://www.typescriptlang.org/Playground

Answer 23

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

Answer 24

精确的

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

 text = `This Is A Multiline String ` // TEST console.log(JSON.stringify(text)); console.log(text);

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

Answer 25

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 26

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

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 27

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

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

Answer 28

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

例子：

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

Answer 29

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

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 个项目 - 我将避免它以支持更大数组的索引添加。

Answer 30

您可以使用+=连接您的字符串，似乎没有人回答，这将是可读的，也很整洁......像这样

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

也可以写成

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

console.log(hello);

Answer 31

您必须使用连接运算符“+”。

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

This 
 <br>is
 <br>multiline
 <br>string.

通过使用<br>您的浏览器输出将如下所示 -

This
is
multiline
string.

Answer 32

我认为这种解决方法应该适用于 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>

干杯！！

Answer 33

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

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

Answer 34

刚刚尝试了匿名答案，发现这里有一个小窍门，如果反斜杠后有空格，它就不起作用了\\
因此以下解决方案不起作用-

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

希望能帮助到你 ！！

Answer 35

这是一种相当经济的方法，至少就源代码而言：

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")} 

如果“参数”属性是一个合适的数组，当然会更好。

当您想要控制非常长字符串中的换行符时，第二个版本可能会使用 "" 来进行连接。

Answer 36

我这样编程：

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

Answer 37

我想我发现了另一种内联方法，每一行都没有任何侵入性语法。 使用 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

Answer 38

如果您碰巧仅在 Node 中运行，则可以使用 fs 模块从文件中读取多行字符串：

var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
  if (err) {
    throw err; 
  }
  diagram = data.toString();
});

Answer 39

规则是：在字符串中时，在需要换行的地方使用 \\n； 你不必在 \\n 之前或之后放置一个空格，JavaScript 的解释器足够聪明，可以知道不可打印的字符表示有多长。

Answer 40

JavaScript 从来没有真正好的方法来处理多行字符串，直到 2015 年引入 ES6 以及模板文字。

模板文字是由反引号 (``) 分隔的字符串，而不是普通的 single('')/double("")e 引号分隔符。

Answer 41

带变量的多行字符串

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

Answer 42

我找到了一个更优雅的解决方案，可能有点与主题无关，因为它使用 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 变量。

Answer 43

它不是非常优雅，但对我来说已经足够干净了：

var myString = "First line" + "\n";
var myString = myString + "Second line" + "\n";
var myString = myString + "Third line" + "\n";