当文字包含脚本标记时,"未终止的模板文字"语法错误

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>,它应该可以正常工作而不会转义.