完全

Question

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

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

Answer 1

更新

ECMAScript 6（ES6）引入了一种新的文字，即template literals。它们具有许多特征，其中包括可变插值，但最重要的是，对于这个问题，它们可以是多线的。

模板文字由反引号分隔：

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

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

Browser support is OK，但您可以使用transpilers更兼容。

原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's JavaScript style guide建议使用字符串连接而不是转义换行符：

不要这样做：

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 支持使用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.`;

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

Answer 4

你可以在纯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
*/});

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

IE 4 - 10
Opera 9.50 - 12（不是9 - ）
Safari 4 - 6（不是3 - ）
Chrome 1 - 45
Firefox 17 - 21（not in 16-）
Rekonq 0.7.0 - 0.8.0
Konqueror 4.7.4

但是要小心你的缩放器。它往往会删除评论。对于YUI compressor，将保留以/*!开头的评论（与我使用的评论一样）。

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

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来解决这个问题。

e.g。

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

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

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

这会在多行返回我的文字。如果我打电话

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

我明白了：

enter image description here

Answer 9

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

<强> 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 concatenation （第一个）是最快的。

请参阅 this test case，了解有关效果的更多详情

<强>更新

使用 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

这个图书馆让它美丽：

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 13

Downvoters ：此代码仅供参考。

这已经在Fx 19和Mac上的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>
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
alert(new_comment.replace('$text','Here goes some text'));

Answer 14

总结一下，我在用户javascript编程（Opera 11.01）中尝试了2种方法：

这个不起作用：Creating multiline strings in JavaScript
这个工作得相当好，我还想出了如何在Notepad ++源代码视图中使它看起来很好：Creating multiline strings in JavaScript

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

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

它可以在Opera 11中运行。至少在用户JS脚本中。太糟糕了，我不能评论个别答案或提出答案，我会马上做。如果可能，有特权的人请为我做。

Answer 15

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

enter image description here

Answer 16

2015年更新：现在已经六年了：大多数人使用模块加载器，主模块系统都有加载模板的方法。它不是内联的，但最常见的多行字符串类型是模板，模板通常应该不受JS的限制。

require.js：'需要文字'。

使用require.js 'text' plugin，在 template.html

中使用多行模板

var template = require('text!template.html')

NPM / browserify：'brfs'模块

Browserify uses a 'brfs' module加载文本文件。这实际上会将您的模板构建到捆绑的HTML中。

var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');

易。

Answer 17

javascript中的等价物是：

var text = `
This
Is
A
Multiline
String
`;

这是specification。请参阅此page底部的浏览器支持。这里也有一些examples。

Answer 18

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

Answer 19

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

您可以使用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

Answer 21

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 22

在Javascrips中制作多行字符串的最简单方法是使用反引号（``）。这样，您就可以创建多行字符串，在其中可以使用let name = 'Willem'; let age = 26; let multilineString = ` my name is: ${name} my age is: ${age} `; console.log(multilineString);插入变量。

示例：

ES6

兼容性：

它是在es2015 // pairs
所有主要的浏览器供应商（Internet Explorer除外）现在都对其提供本机支持

Check exact compatibility in Mozilla docs here

Answer 23

请热爱互联网使用字符串连接，并选择不使用ES6解决方案。全面支持ES6，就像CSS3和某些浏览器慢慢适应CSS3运动一样。使用普通的'JavaScript，你的最终用户会感谢你。

示例：

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

Answer 24

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

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

Answer 25

我的基于数组的字符串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（）会占用大量时间吗？请参阅此相关答案：

（Is there a reason JavaScript developers don't use Array.push()?）

在查看这些（相反的）测试运行之后，看起来.push（）对于字符串数组来说是好的，它不会超过100个项目 - 我会避免它支持更大数组的索引添加。

Answer 26

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

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

也可以写成

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

console.log(hello);

Answer 27

您必须使用连接运算符＆＃39; +＆＃39;。

<!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 28

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

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

const str = `This 

is 

a

multiline text`; 

console.log(str);

更多参考here

Answer 30

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

例如：

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

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

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

Answer 32

刚刚尝试了匿名回答并发现这里有一个小技巧，如果反斜杠之后有空格\，它就不起作用所以以下解决方案不起作用 -

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 33

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

Answer 34

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

我这样编程：

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 36

这是一种相当经济的方法，至少在源代码方面是这样的：

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

如果“arguments”属性是一个合适的数组，那么

会更好。

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

Answer 37

我发现了一个更优雅的解决方案，可能是一个非主题相关因为它使用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";

和etvoilà！，它为您提供文件中的代码可读性。

pD：这个示例使用了json_encode（）PHP函数，但是当然还有ASP，Ruby和JSP langs的函数等价物。

pD：但是，这个解决方案也有其局限性，其中一个就是你不能在封装代码中使用javascript变量。

Answer 38

完全

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

text = `This
Is
A
Multiline
String
`

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

这是对Lonnie Best answer的改进

Answer 39

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

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

在JavaScript中创建多行字符串

39 个答案:

更新

原ES5答案：

ES6更新：

原ES5答案：

之前

后

require.js：'需要文字'。

NPM / browserify：'brfs'模块

示例：

兼容性：

完全