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 的值很长，但如何才能摆脱“未终止字符串字面量”的陷阱呢？有没有更好的方法来解决这个问题？

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

然后将其通过压缩器以获得更短的分发版本。