带有多行字符串的无效或意外标记答案

【问题标题】：Invalid or unexpected token with multiline string带有多行字符串的无效或意外标记
【发布时间】：2016-11-15 09:11:05
【问题描述】：

我试图从我的 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 string token multiline

【解决方案1】：

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

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

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

【讨论】：

"大多数浏览器不支持" --- 数字是什么意思？ kangax.github.io/compat-table/es6/#test-template_strings --- 从这张表中我看到 大多数 浏览器都支持它。
该表充满了许多非浏览器，并且有意不包括任何正在使用但不会永远的“流行”（另一个相对术语）浏览器> 接收列出的那些功能。可以肯定的是，所有流行浏览器的大多数边缘版本都支持模板文字，但这不是我通常在谈话中考虑的。
很好的链接！并感谢您的投入！另一个值得关注的链接是：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
“当然，所有流行浏览器的大多数边缘版本都支持模板文字，但我通常不会在谈话中考虑这一点。” --- 这就是为什么我问数字（可能还有他们的来源）:-) 每个人都有不同的受众，所以“大多数”对每个人来说都是不同的，因此看起来会产生误导。

【解决方案2】：

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

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

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

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

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

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

【讨论】：

模板字符串 ``` 是 ES2015/ES6 更新到 JavaScript 的一部分，许多浏览器不支持它们。
@noazark 让我们继续使用古老的标准 20 年！
虽然@zerkms 好消息，但浏览器正在迅速追赶！并且不要在开发中使用 Babel.js！
@noazark 我只针对最新的浏览器，所以在大多数情况下我什至不需要 babel ;-P

【解决方案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>';
}

【讨论】：