var aaa = “<script></script>”; がエラーになるのはなぜ？

Tweet

Category html5, JavaScript 2022/10/19

問題

以下のJavaScriptでエラーになります。なんで？

<script>
var aaa = "<script></script>";
</script>

エラー（chrome）

Uncaught SyntaxError: Invalid or unexpected token

エラー（firefox）

Uncaught SyntaxError: "" literal not terminated before end of script

答え

HTML内に書いた場合の話ですね。

HTML内に書くと、そのスクリプト中の </script>が <script> の終了タグとみなされます。

JSONと同様に / をエスケープするといいです。

<script>
let aaa = "<script><\/script>";
</script>

似た問題に、「scriptタグの内容に課される制約」というのがあります。

参考）html.spec.whatwg.org https://html.spec.whatwg.org/#restrictions-for-contents-of-script-elements

参考）日本語 https://triple-underscore.github.io/HTML-scripting-ja.html#restrictions-for-contents-of-script-elements

「<!– なども問題を起こしますよ」ということです。

なお、HTML内に書くので問題になるのであって、外部JSファイルに書けば問題ないです。