在JavaScript中创建多行字符串-Java 学习之路

2046

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

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

30 回答

186
javascript中的等价物是：
```
var text = `
This
Is
A
Multiline
String
`;
```
这是specification . 请参阅page底部的浏览器支持 . 这里有一些examples .
回复于 2024-05-19T14:20:42+08:00
10
更新：

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"
```
回复于 2024-05-19T14:20:42+08:00
8
我喜欢这种语法和压句：
```
string = 'my long string...\n'
       + 'continue here\n'
       + 'and here.';
```
（但实际上不能被视为多行字符串）
回复于 2024-05-19T14:20:42+08:00
3

如果您愿意使用转义换行符，可以很好地使用它们 . It looks like a document with a page border .

回复于 2024-05-19T14:20:42+08:00
24
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兔子脸红的消息（通过'
'那些施瓦辛格的阴影）！我在哪儿？哦，是的，'
'你有一个错误，所有无关的空白是'
'只是肉汁 . 祝你今天愉快 . ';
回复于 2024-05-19T14:20:42+08:00
9
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
回复于 2024-05-19T14:20:42+08:00
5
我通过输出div，使其隐藏，并在需要时通过jQuery调用div id来解决这个问题 .

例如
```
<div id="UniqueID" style="display:none;">
     Strings
     On
     Multiple
     Lines
     Here
</div>
```
然后，当我需要获取字符串时，我只使用以下jQuery：
```
$('#UniqueID').html();
```
这会在多行返回我的文字 . 如果我打电话
```
alert($('#UniqueID').html());
```
我明白了：
回复于 2024-05-19T14:20:42+08:00
27
总结一下，我在用户javascript编程中尝试了2种方法（Opera 11.01）：
- 这个不起作用：Creating multiline strings in JavaScript
- 这个工作得相当好，我也想出了如何在记事本源视图中使它看起来很好：Creating multiline strings in JavaScript
所以我推荐Opera用户JS用户的工作方法 . 与作者所说的不同：

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

它在Opera 11中工作 . 至少在用户JS脚本中 . 太糟糕了，我无法对个别答案发表评论或提出答案，我会马上做 . 如果可能的话，有特权的人请为我做 .
回复于 2024-05-19T14:20:42+08:00

128

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

回复于 2024-05-19T14:20:42+08:00

3
我想出了这种多线式弦乐器的装配方法 . 由于将函数转换为字符串也会返回函数内的任何注释，您可以使用多行注释/ ** /将注释用作字符串 . 你只需要修剪两端，你就有了你的字符串 .
```
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)
```
回复于 2024-05-19T14:20:42+08:00
7
您可以使用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
回复于 2024-05-19T14:20:42+08:00

Downvoters ：此代码仅供参考 .

这已经在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>
    </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'));

回复于 2024-05-19T14:20:42+08:00

0
Updated for 2015 ：它's six years later now: most people use a module loader, and the main module systems each have ways of loading templates. It'不是内联的，但最常见的多行字符串类型是模板，而 templates should generally be kept out of JS anyway .

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');
```
简单 .
回复于 2024-05-19T14:20:42+08:00
0
您可以使用 += 连接您的字符串，似乎没有人回答，这将是可读的，也很整洁......这样的事情
```
var hello = 'hello' +
            'world' +
            'blah';
```
也可以写成
```
var hello = 'hello';
    hello += ' world';
    hello += ' blah';

console.log(hello);
```
回复于 2024-05-19T14:20:42+08:00
2489
我很惊讶我没有看到这个，因为它在我测试它的任何地方都有用，并且对于例如它非常有用 . 模板：
```
<script type="bogus" id="multi">
    My
    multiline
    string
</script>
<script>
    alert($('#multi').html());
</script>
```
有没有人知道有HTML的环境但它不起作用？
回复于 2024-05-19T14:20:42+08:00

我认为这个解决方法应该适用于IE，Chrome，Firefox，Safari，Opera -

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

Using Pure 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>

干杯！！

回复于 2024-05-19T14:20:42+08:00

8
刚试过Anonymous的答案，发现如果反斜杠之后有空格's a little trick here, it doesn'就行了's a little trick here, it doesn'
所以以下解决方案不起作用 -
```
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);
```
希望能帮助到你！！
回复于 2024-05-19T14:20:42+08:00

使用脚本标签：

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

回复于 2024-05-19T14:20:42+08:00

14

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

例：

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

回复于 2024-05-19T14:20:42+08:00

你必须使用连接运算符'' .

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

回复于 2024-05-19T14:20:42+08:00

84
另外请注意，当在每行末尾使用正向反斜杠将字符串扩展到多行时，在反向反斜杠之后的任何额外字符（通常是空格，制表符和错误添加的注释）将导致意外的字符错误，我花了一个小时才找到出
```
var string = "line1\  // comment, space or tabs here raise error
line2";
```
回复于 2024-05-19T14:20:42+08:00

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

回复于 2024-05-19T14:20:42+08:00

模式 text = <<"HERE" This Is A Multiline String HERE 在js中不可用（我记得在我很好的旧Perl时代使用它） .

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

var myString = 
   ['<div id="someId">',
    'some content
',
    '<a href="#someRef">someRefTxt</a>',
    '</div>'
   ].join('\n');

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

var myString = 
       '<div id="someId"> \
some content
 \
<a href="#someRef">someRefTxt</a> \
</div>';

这里's another weird but working ' trick'1：

var myString = (function () {/*
   <div id="someId">
     some content

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

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

回复于 2024-05-19T14:20:42+08:00

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

1. Slash concatenation
```
var MultiLine=  '1\
    2\
    3\
    4\
    5\
    6\
    7\
    8\
    9';
```
2. regular concatenation
```
var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';
```
3. Array Join concatenation
```
var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');
```
性能方面， Slash concatenation （第一个）是最快的 .

Refer this test case了解有关性能的更多详细信息

Update:

使用 ES2015 ，我们可以利用其模板字符串功能 . 有了它，我们只需要使用反向标记来创建多行字符串

例：
```
`<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `
```
回复于 2024-05-19T14:20:42+08:00
1155
您可以在纯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 .
回复于 2024-05-19T14:20:42+08:00

642

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

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

回复于 2024-05-19T14:20:42+08:00

有这个图书馆让它美丽：

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

回复于 2024-05-19T14:20:42+08:00

3
我的基于数组的字符串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个项目 - 我会避免使用索引添加更大的阵列 .
回复于 2024-05-19T14:20:42+08:00
2
在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除外）
Check exact compatibility in Mozilla docs here
回复于 2024-05-19T14:20:42+08:00

你可以这样做...

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

回复于 2024-05-19T14:20:42+08:00

在JavaScript中创建多行字符串

30 回答

更新：

原ES5答案：

ES6更新：

原创ES5答案：

require.js：'需要文字' .

NPM / browserify：'brfs'模块

之前

之后

示例：

兼容性：

相关问题