多行字符串的无效或意外标记

Question

我试图从我的 JavaScript 代码中的函数中 return 一个 HTML 字符串，但在控制台上我收到错误 "Uncaught syntax error: invalid or unexpected token"以下代码

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，ES6 仍然相对较新。}}

您也可以在每行末尾使用反斜杠转义换行符。

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

Answer 2

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

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

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

Answer 3

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

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

多行字符串的无效或意外标记

Invalid or unexpected token with multiline string

javascript

string

token

multiline