"Unterminated template literal" 文字包含脚本标签时出现语法错误

Question

我正在使用 ES6 模板文字在字符串中构造一些 HTML，到目前为止它一直运行良好。但是，一旦我尝试将文字文本 </script> 放入我的字符串中，浏览器就会抛出并抛出语法错误：

SyntaxError: Unterminated template literal

这是一个抛出错误的简单 JavaScript 示例：

var str=`
<script>
</script>
`
var pre = document.createElement('pre')
pre.textContent = str
document.body.appendChild(pre)

参见JS Fiddle中的上述代码。

似乎正在发生的事情是它放弃寻找结束文字引用，而是开始将点处的所有内容都视为文字 HTML，因此该点之后的所有 JavaScript 都是错误的被视为 HTML，但事实并非如此！

如果我将 script 替换为任何其他合法的 HTML 标签（甚至是 scripty 等无效标签），那么它就可以正常工作, 所以我看不出这怎么可能是语法错误或我认为我输入了一个字符（例如反引号）但却输入了另一个看起来几乎相似的字符的奇怪情况。

我实际上是在创建一个字符串（据我所知，在编译时），浏览器应该 而不是 试图将其视为 HTML 或以任何方式解析它。那么给出了什么？

Answer 1

如果您在脚本标签中插入 </script>，无论它是引号中的字符串、撇号，甚至是模板文字，它都会总是关闭脚本标签。你必须逃避它，例如像这样：

var str=`
<script>
<\/script>
`
var pre = document.createElement('pre')
pre.textContent = str
document.body.appendChild(pre)

但是，如果您使用外部脚本 <script src="url"></script>，它应该可以正常工作而无需转义。

"Unterminated template literal" syntax error when literal contains script tag