题 在JavaScript中创建多行字符串


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

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

1924
2018-04-30 02:11


起源


看到 stackoverflow.com/a/6247331/632951 - Pacerier
以不同的方式检查这一点以实现相同的目标。我也添加了每种方法的性能 stackoverflow.com/a/23867090/848841 - Vignesh Subramanian


答案:


更新:

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

模板文字由分隔 反引号

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

(注意:我不主张在字符串中使用HTML)

浏览器支持是可以的,但你可以使用 transpilers 更兼容。


原ES5答案:

Javascript没有here-document语法。但是,你可以逃避文字换行符,它接近:

"foo \
bar"

2303
2018-04-30 02:15



请注意:某些浏览器会在延续处插入换行符,有些则不会。 - staticsan
Visual Studio 2010似乎也被这种语法搞糊涂了。 - jcollum
dresende:这是两行代码。这是一个表达式。 - Anonymous
@Nate它是在。中指定的 ECMA-262第5版 第7.8.4节并致电 LineContinuation :“行终止符不能出现在字符串文字中,除非作为一部分 LineContinuation 产生空字符序列。使行终止符字符成为字符串文字的String值的一部分的正确方法是使用转义序列,例如\ n或\ u000A。 - some
当浏览器不一致地对待它时,我不明白你为什么要这样做。多行中的“line1 \ n”+“line2”足够可读,并保证您的行为一致。 - SamStephens


更新:

正如第一个回答提到的那样,使用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答案:

谷歌的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.';

1120
2018-06-06 02:30



即使在启用实验性JavaScript之后,这对于我的金丝雀镀铬也不适用于Windows - Inuart
我不了解谷歌的建议。除了极端旧的浏览器之外的所有浏览器都支持反斜杠后跟换行方法,并且将来会继续这样做以实现向后兼容。你需要避免它的唯一时间是你需要确保在每一行的末尾添加一个且只有一个换行符(或没有换行符)(另请参阅我对已接受答案的评论)。 - Matt Browne
那些想尝试这些东西的人一定要查看[Chrome Canary] [1] [1]: google.com/intl/en/chrome/browser/canary.html - Sazid
请注意,IE11,Firefox 31,Chrome 35或Safari 7不支持模板字符串 kangax.github.io/compat-table/es6 - Dwayne
@MattBrowne谷歌的推荐已经由他们按照原因重要性的顺序记录:(1)每行开头的空白[在这个例子中,你不希望你的字符串中有空格,但它在代码中看起来更好](2)斜杠后面的空格会导致棘手的错误[如果你结束了一行 \ 而不是`\`很难注意到]和(3)虽然大多数脚本引擎支持这一点,但它不是ECMAScript的一部分[即为什么要使用非标准功能?]请记住它是一个样式指南,它使代码易于阅读+维护+调试:不只是“它工作”正确。 - ShreevatsaR


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

[另外2015年]
ES6支持使用多行生成字符串 模板字符串

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 注意:在缩小/混淆代码后,这将丢失


634
2018-04-30 07:22



请不要使用阵列模式。在大多数情况下,它将比普通的字符串连接慢。 - BMiner
真? jsperf.com/join-concat/24 - KooiInc
阵列模式更具可读性,应用程序的性能损失通常可以忽略不计。正如该perf测试所示,即使IE7每秒也可以进行数万次操作。 - Ben Atkin
+1是一个优雅的选择,不仅在所有浏览器中以相同的方式工作,但也是面向未来的。 - Pavel
@KooiInc您的测试从已创建的数组开始,这会使结果出现偏差。如果添加数组的初始化,则直接连接会更快 jsperf.com/string-concat-without-sringbuilder/7 看到 stackoverflow.com/questions/51185/... 作为新行的一个技巧,它可能没问题,但它确实做了比应该做的更多的工作 - Juan Mendes


能够 在纯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的


327
2018-04-06 18:16



+ 1 + 1聪明! (适用于Node.JS) - George Bailey
什么!?创建和反编译函数以将多行注释破解为多行字符串?现在 那是 丑陋。 - fforw
实际上 外 丑陋......但是,没有 反编译 参与... - Jordão
jsfiddle.net/fqpwf 适用于Chrome 13和IE8 / 9,但不适用于FF6。我不想这么说,但我喜欢它,如果它可能是每个浏览器的故意特征(这样它不会消失),我会用它。 - Jason Kleban
非常方便。我正在将它用于(Jasmine)单元测试,但是将其用于生产代码。 - Jason


你可以这样做...

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

187
2018-03-21 21:05



第一个例子很棒很简单。因为我不确定浏览器如何将反斜杠作为转义字符和多行字符来处理,所以比使用\方法要好得多。 - Matt K
CDATA代码(E4X)是 已经过时,即使在Firefox中也会很快停止工作。 - Brock Adams
e4x.js 将是一个很好的面向未来的解决方案 - Paul Sweatte


我想出了这种多线式弦乐器的装配方法。由于将函数转换为字符串也会返回函数内的任何注释,您可以使用多行注释/ ** /将注释用作字符串。你只需要修剪两端,你就有了你的字符串。

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)

107
2018-01-03 19:51



这绝对是可怕的。我喜欢它(虽然你可能需要进行正则表达式匹配,因为我不确定空白的精确程度 toString() 是。 - Kevin Cox
stackoverflow.com/a/5571069/499214 - John Dvorak
这个解决方案在firefox中似乎不起作用,也许它是浏览器的安全功能?编辑:没关系,它只适用于Firefox版本16。 - Bill
还要注意剥离注释的缩小器......:D - jondavidjohn
你可以使用@KevinCox trim()。 - schmijos


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

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

有没有人知道有HTML的环境但它不起作用?


82
2017-08-17 14:25



在任何地方,您都不希望将字符串放入单独且远程的脚本元素中。 - Lodewijk
有效的反对意见!这并不完美。但对于模板而言,这种分离不仅可以,而且甚至可能会受到鼓励。 - Peter V. Mørch
我更喜欢将超过80/120个字符的所有内容分成多行,我担心这不仅仅是模板。我现在更喜欢'line1'+'line2'语法。它也是最快的(虽然这可能与真正的大文本相媲美)。这是一个很好的技巧。 - Lodewijk
实际上,这是HTML而不是Javascript: - / - CpILL
但是,在javascript中获取多行字符串的任务可以通过这种方式完成 - Davi Fiamenghi


我通过输出div,使其隐藏,并在需要时通过jQuery调用div id来解决这个问题。

例如

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

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

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

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

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

我明白了:

enter image description here


46
2017-08-23 18:30



谢谢你!这是我发现的唯一解决我的问题的答案,其中涉及未知的字符串,可能包含直接插入代码的单引号和双引号的任意组合,没有预编码的机会。 (它来自一个创建JS的模板语言 - 仍然来自可靠的来源,而不是表单提交,所以它不是完全痴迷的)。 - octern
这是我从Java String创建多行javascript字符串变量的唯一方法。 - beginner_
如果字符串是HTML怎么办? - Dan Dascalescu
$( '#的UniqueID')。内容() - mplungjan
@Pacerier我从谷歌以及其他网站上读过的所有内容都说,现在谷歌确实有索引 display:none 内容,很可能是由于JavaScript风格的前端的流行。 (例如,具有隐藏/显示功能的常见问题解答页面。)您需要小心,因为谷歌表示,如果隐藏内容似乎旨在人为地夸大您的搜索引擎优化排名,他们可以惩罚您。 - Gavin


使用脚本标签:

  • 添加一个 <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>
    

27
2018-05-26 09:34



我认为这个策略很干净而且未被充分利用。 jsrender使用这个。 - xdhmoore
我在innerText iso innerHTML中使用它,但是如何确保保留空格呢? - David Nouls
由于soap基于XML,因此必须保留 <![CDATA[.....]]> 。 - jpfreire
如果您正在使用它们,也会进行ajax查询。您可以尝试更改标题 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 我不记得还有其他问题,而不是JS中的错误评论。空间没有问题。 - jpfreire