在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
• 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.

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

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

你也可以

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

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

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

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

Answer 12

我喜欢这种语法和压句:

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

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

Answer 13

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

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 14

有这个图书馆使它美丽:

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 15

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

Answer 16

精确的

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 17

总结一下,我在用户javascript编程中尝试了2种方法(Opera 11.01):

• 这个不起作用:在JavaScript中创建多行字符串
• 这工作得相当好,我也想出了如何在Notepad ++源视图中使它看起来很好:在JavaScript中创建多行字符串

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

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

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

Answer 18

2015年更新:现在已经六年了:大多数人使用模块加载器,主模块系统都有加载模板的方法.它不是内联的,但最常见的多行字符串类型是模板,并且模板通常应该保留在JS之外.

require.js:'require text'.

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

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

我对/sf/answers/1089065771/的扩展.它希望以/*! 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 22

javascript中的等价物是:

var text = `
This
Is
A
Multiline
String
`;

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

Answer 23

您可以使用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上尝试TypeScript

Answer 24

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

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

const str = `This 

is 

a

multiline text`; 

console.log(str);

在这里更多参考

Answer 27

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

例如：

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