如何在JavaScript中连接多行字符串？

Question

有很多关于添加 <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 />");
 });

谢谢你。

- user1063287

Answer 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>元素内部）

- Simon Boudrias

---

请问您需要的翻译是：一定要选择这里提出的第二种解决方案。 - Ian

@Ian 是的，第二种解决方案是我们最常见的。虽然第一种解决方案也可以：http://davidwalsh.name/multiline-javascript-strings - Simon Boudrias

你说得对，第一种解决方案也可以，但我不确定它的支持程度如何。我看到过一个类似这样的问题，有人建议使用 \，但并不是所有地方都兼容（或类似的情况）。还是采用安全的方式吧。 - Ian

我认为第二种解决方案比较慢。 - Paramore

Answer 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/。

- MagePal Extensions

Answer 3

实际上，您根本不想连接这个！请考虑一下包含HTML或类似HTML数据的变量数据会发生什么。使用您的方法，它将被解析为此类数据，可能会破坏事物，甚至使您暴露于XSS攻击方法。

您已经在使用jQuery，因此正确的方法很容易：

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

（注：我相信.append()允许你给出任意多个参数。如果不行，尝试使用一个元素数组进行追加。）

- Brad