Question

我试图从我的JavaScript代码中的函数返回HTML字符串，但在控制台上我得到错误＆＃34;未捕获的语法错误：无效或意外的令牌＆＃34;使用以下代码

function formatPrize (prize) {
    return (
     /*Unexpected token here*/ '<div class = "wrapper">
            <div class = "card radius shadowDepth1">
                <div class ="card__image border-tlr-radius">
                    <img src = "admin/"'+prize.sponsorLogo+'"> alt = "image" class = "border-tlr-radius">
                </div>

                <div class = "card_content card_padding">
                    <div class = "card_meta">
                        <h3>"'+prize.name+'"</h3>
                    </div>

                    <article class = "card__article">
                        Test message
                    </article>
                </div>
            </div>
        </div>'
    );
}

我基本上替换了之前和之前工作的其他代码：

"<tr>" +
    "<td>" + prize.name + "</td>" +
    "<td>$" + prize.value + "</td>" +
    "<td>" + prize.description + "</td>" +
"</tr>"

替换它时我做错了吗？我该如何解决？

Answer 1

问题是单引号和双引号无法在JavaScript中创建多行字符串。

作为替代方案，要么将每一行作为单独的字符串并连接它们，要么执行以下操作：

要获得多行字符串，您需要在JavaScript中用反引号（'）替换单引号（`） - 这可能会导致错误。

^{^{正如@noazark指出的那样，这可能具有有限的兼容性，因为它带有ES6，它仍然相对较新。}}

你也可以在每一行的末尾用反斜杠转义换行符。

有关前两种方法的详细信息，请参阅this SO answer。

Answer 2

您必须转义换行符（使用\）或连接多行（如下所示）。

function formatPrize (prize) {
return '<div class = "wrapper"> \
        <div class = "card radius shadowDepth1"> \
            <div class ="card__image border-tlr-radius"> \
                <img src = "admin/"'+prize.sponsorLogo+'"> alt = "image" class = "border-tlr-radius"> \
            </div>' +
            '<div class = "card_content card_padding">\n' +
                '<div class = "card_meta">\n' +
                    '<h3>"'+prize.name+'"</h3>\n' +
                '</div>\n' +
                ' \n' +
                '<article class = "card__article"> \
                    Test message \
                </article> \
            </div> \
        </div> \
    </div>';
}

Answer 3

不幸的是，大多数浏览器都不支持javascript中的多行字符串。你可以这样做：

[
  "<tr>",
      "<td>" + prize.name + "</td>",
      "<td>$" + prize.value + "</td>",
      "<td>" + prize.description + "</td>",
  "</tr>"
].join('')

修改您提供的原始版本有效，因为+运算符会查找下一个字符串，并且由于JavaScript不是空格敏感的，因此您可以将它放在下一行而不会出现任何问题。因此，具体来说，您的更改是使用多行字符串（不支持）替换添加符号（字符串连接）。

带有多行字符串的无效或意外令牌

3 个答案: