如何在javascript中连接多行字符串？答案

【问题标题】：How can I concatenate multiline string in javascript?如何在javascript中连接多行字符串？
【发布时间】：2012-10-23 17:11:14
【问题描述】：

对于附加<li> 的正确语法有很多结果，但是我试图找到一个解决方案，其中+this['name']+ 值包含在<li> 中。 firebug 正在显示 'SyntaxError: unterminated string literal'，而 jslint 正在显示 'Unclosed string'。我已经尝试了许多不同的逗号位置变体，但我无法让它发挥作用。

 $.each(data.result, function() {
     $("ul").append("<li>Name: "+this['name']+"</li>
                     <li>Age: "+this['age']+"</li>
                     <li>Company: "+this['company']+"</li>
                     <br />");
 });

谢谢。

【问题讨论】：

标签： javascript append

【解决方案1】：

您可以使用反斜杠字符\ 转义行尾，如下所示：

 $.each(data.result, function(){
 $("ul").append("<li>Name: " + this['name'] + "</li> \
     <li>Age: " + this['age'] + "</li> \
     <li>Company: "+this['company']+"</li> \
     <br />");
 });

这是因为 Javascript 会在某个时间在行尾自动插入半列。在这种情况下，你的字符串没有关闭。另一种解决方案是关闭每一行上的每个字符串，并使用+ 将它们全部连接起来。

 $.each(data.result, function(){
 $("ul").append("<li>Name: " + this['name'] + "</li>" +
     "<li>Age: " + this['age'] + "</li>" +
     "<li>Company: "+this['company']+"</li>" +
     "<br />");
 });

（不相关，但 <br/> 不允许在 <ul> 元素内）

【讨论】：

绝对采用这里提出的第二种解决方案
@Ian 是的，第二种解决方案是我们看到最多的解决方案。虽然，第一个解决方案也可以：davidwalsh.name/multiline-javascript-strings
你说得对，第一个解决方案也有效，我不确定它的支持程度如何。我看到一个这样的问题有同样的问题，我知道有人提议使用 `` 但它在所有地方都不兼容（或类似的东西）。还不如走安全的路
我觉得第二种方案比较慢

【解决方案2】：

这应该快得多

 li = '';
 $.each(data.result, function(){
     li += "<li>Name: " + this['name'] + "</li>" +
          "<li>Age: " + this['age'] + "</li>" +
          "<li>Company: "+this['company']+"</li>" +
          "<br />"; // could remove this and use css
 });

 $("ul").append(li);

见http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

【讨论】：

【解决方案3】：

您实际上根本不想连接它！考虑一下包含 HTML 或类似 HTML 数据的可变数据会发生什么。使用你的方法，它会被这样解析，可能会破坏一些东西，甚至让你面临 XSS 攻击方法。

你已经在使用 jQuery，所以正确的方法很简单：

$('ul').append(
    $('<li/>').text('Name: ' + this.name), 
    $('<li/>').text('Age: ' + this.age),
    // etc.
);

（注意：我相信.append()allows as many parameters as you give it。如果不是，请尝试在追加时使用元素数组。）

【讨论】：