当模板字面量包含脚本标记时，“未终止的模板字面量”语法错误

Question

43

我正在使用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或以任何方式解析它。那是什么原因？

- Michael

5

一些浏览器会停止解析 </SCRIPT> 上的 Javascript。请将其删除或替换为 <\/SCRIPT>。 - Ismael Miguel

（请注意，这在整个SO上都是重复的。） - Dave Newton

1个回答

- Michał Perłakowski · Accepted Answer

93

如果在

- Michał Perłakowski

1

啊...由于我可以在模板引号中自由地放置其他类型的引号，因此我认为模板引号内的任何内容都与文档的其余部分隔离。这确实解决了它！ - Michael

非常感谢！我不知道这是导致我的错误的原因，但当我看到你的帖子时，通过转义每个关闭标签，我成功地使我的HTML ES6模板文字正确打印。 - Eric Hepperle - CodeSlayer2010

哦，我本以为在ES6模板字面量中发现了一个重大的错误... - adelriosantiago

你可以使用自闭合标签来解决这个问题：

const url = 'https://file.js';
document.body.insertAdjacentHTML('beforeend', `