Ошибка синтаксиса "Unterminated template literal", когда literal содержит тег script

Я использую литералы шаблонов 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), то он работает просто отлично, поэтому я не вижу, как это может быть синтаксическая ошибка или странный случай, когда, я думаю, я набрал один символ (например, backtick), но вместо этого набрал другой, который выглядит почти так.

Я буквально создаю строку (насколько мне известно, во время компиляции) браузер не должен пытаться рассматривать его как HTML или каким-либо образом разбирать его. Так что же дает?

Ответ 1

Если вы вставляете </script> внутри тега скрипта, независимо от того, является ли это строкой в кавычках, апострофах или даже литерале шаблона, он всегда будет закрывать тег скрипта. Вы должны избежать этого, например:

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

Тем не менее, если вы используете внешний скрипт <script src="url"></script>, он должен работать нормально, не убегая.