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

这是另一个奇怪但有效的 “技巧” 1

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

1注意:缩小 / 混淆代码后,这将会丢失

可以在纯 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>
  `

使用脚本标签:

  • head标签中添加一个包含多行文本的<script>...</script>块;
  • 按原样获取多行文本...(请注意文本编码: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>