web-dev-qa-db-ja.com

リテラルにスクリプトタグが含まれる場合の「未終了のテンプレートリテラル」構文エラー

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をany他の正当なHTMLタグ（およびscriptyのような無効なタグでさえ）に置き換えると、それはちょうど動作します結構ですので、これが構文エラーであるか、1つの文字（バックティックなど）を入力したと思う奇妙なケースであるかはわかりませんが、代わりにほぼ同じ文字を入力しました。

文字列を文字通りに作成しています（私の理解では、コンパイル時に）、ブラウザはnotHTMLとして処理するか、何らかの方法で解析する必要がありますそれ。それで何が得られますか？

javascripthtmlecmascript-6script-tagtemplate-literals
23
Michael

スクリプトタグ内に</script>を挿入すると、引用符、アポストロフィ、またはテンプレートリテラルの文字列であっても、スクリプトタグを閉じますalways。たとえば、次のようにエスケープする必要があります。

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

ただし、外部スクリプト<script src="url"></script>を使用する場合、エスケープせずに正常に動作するはずです。

35
Michał Perłakowski