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

Invalid or unexpected token with multiline string

本文关键字：意外 无效 字符串 包含多      更新时间：2023-09-26

我正在尝试从 JavaScript 代码中的函数返回一个 HTML 字符串，但在控制台上我收到错误"未捕获的语法错误：无效或意外的令牌"

，代码如下 
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>"

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

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

或者，将每行设置为单独的字符串并将它们连接起来，或者执行以下操作：

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

正如@noazark指出的那样，这可能具有有限的兼容性，因为它与ES6一起提供，而ES6仍然相对较新。

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

有关前两种方法的更多详细信息，请参阅此SO答案。

您必须转义换行符（带 ' ）或连接多行（如下所示）。

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>';
}
不幸的是，

大多数浏览器不支持javascript中的多行字符串。不过，您可以执行以下操作：

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

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

相关文章：