JavaScript 代码，未终止的字符串字面量。

Question

错误控制台： 未结束的字符串文字

$html='<li><div class="above">'+$question_number+ 'Question Title</div>

JQuery代码如下：

$html='<li><div class="above">'+$question_number+ 'Question Title</div>
<div class="middle"> <input type="text" name="question'+$question_number+ '" size="55"/></div>
<div class="below">'+$question_number+ ' <input type="text" name="option'+$question_number+ '" size="6"/>'+$question_number+ '<input type="text" name="option'+$question_number+ '" size="6"/>
   <input class="btn" type="button" name="Submit" value="Add" />
   <input class="btn" type="button" name="Submit" value="Remove" />
   </div>
</li>';

我知道$html的值很长，但是我该如何避免“未终止字符串文字”的陷阱？有更好的方法解决这个问题吗？

- Steven

Answer 1

如果您要将字符串文字跨多行运行，则需要添加延续字符。在每行的末尾加上"\"字符或使用字符串连接。换句话说，您可以将不正确的代码：

$html='<li><div class="above">' + $question_number + 'Question Title</div>
<div class="middle"> ... ';

转换成：

$html='<li><div class="above">' + $question_number + 'Question Title</div>\
 <div class="middle"> ... ';

或：

$html='<li><div class="above">' + $question_number + 'Question Title</div>' +
    ' <div class="middle"> ... ';

其实，您并不需要将您的HTML格式化得漂亮，但是如果您真的想要让它以便于打印的形式呈现，您也可以在其中嵌入换行符：

$html='<li><div class="above">' + $question_number + 'Question Title</div>\n' +
    '<div class="middle"> ... ';

为了提高代码的可读性，我会使用类似以下的写法：

$html = \
    '<li>' +
    '  <div class="above">' + $question_number + 'Question Title</div>' +
    '  <div class="middle">' +
    '    <input type="text" name="question' + $question_number+ '" size="55"/>' +
    '  </div>' +
    '  <div class="below">' + $question_number + 
    '    <input type="text" name="option' + $question_number +
    '      " size="6"/>' + $question_number +
    '    <input type="text" name="option' + $question_number + '" size="6"/>' +
    '    <input class="btn" type="button" name="Submit" value="Add" />' +
    '    <input class="btn" type="button" name="Submit" value="Remove" />' +
    '  </div>' +
    '</li>';

然后通过压缩器将其压缩，以便于分发的更短版本。

- paxdiablo

---

天才！你的建议很棒！ - Steven

Answer 2

你可以像这样在多行上连接它的部分：

$html='<li><div class="above">'+$question_number+ 'Question Title</div>';
$html+= '<div class="middle"> <input type="text" name="question'+$question_number;   
$html+=' size="55"/></div>';

等等。

- Samuel

Answer 3

你可以使用数组来存储你的标记片段，然后使用join方法来获取完整的标记：

a = new Array(20);
a[0]='<li><div class="above">'
a[1]= $question_number
a[2]= 'Question Title</div>'
a[3]= '<div class="middle">'
a[4]= '<input type="text" name="question'
a[5]= $question_number
a[6]= '" size="55"/></div>'
a[7]= '<div class="below">'
a[8]= $question_number
a[9]= '<input type="text" name="option'
a[10]=$question_number
a[11]= '" size="6"/>'
a[12]=$question_number
a[13]='<input type="text" name="option'
a[14]=$question_number
a[15]='" size="6"/>'
a[16]='<input class="btn" type="button" name="Submit" value="Add" />'
a[17]='<input class="btn" type="button" name="Submit" value="Remove" />'
a[18]='</div>'
a[19]='</li>'

$html = a.join('');

- ardsrk