テンプレートストリングで注意するのは ` と \ だけだと思った?
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 2
◆ </script>
◆ インラインのときだけ .js ファイルなら気にしないでおっけい
◆ インラインのときだけ .js ファイルなら気にしないでおっけい
テンプレートストリングでは改行も書けて好きに文字を書けます
ですが ` はエスケープしないといけないですし \ もその後に来る文字によってはエスケープしないとエラーになります
とりあえずこの 2 つだけ注意すればと思ってるかもしれませんが実はまだいるんです
こいつです
</script>
script タグでインラインで JavaScript を書いてる場合には </script> があるとそこで JavaScript が終了します
例えばこういうコードを書いてみると
一見 ボタンおしたらウィンドウが開いて そこで a.js が実行されるんだろうなー と思っていたら画面に JavaScript のコードが中途半端にいるしコンソールには JavaScript のエラーがでています
JavaScript や CSS はファイルを分けてロードすべきです
devtools でもインラインで書かれてるスクリプトには制限が多いですし ちょっとしたコードでも分けたい感があります
ですが 実際には HTML に JavaScript が含まれるケースが多いです
昔ながらのシステムを使ってそうなものだと自動出力されたスクリプトが HTML 中に色々あったりなんてよくあります
ブログでも記事固有にスクリプトを書こうとするとソース中にインラインで書くことになるのでこの制限を受けます
テンプレートストリングでの syntax error も出ますし わかりやすい問題ですが 「</script>」 と言う文字列をテンプレートストリングに含めたいことはたまにあるのでちょっと不便なんですよね
対処も これは綺麗 って方法が思いつかないですし
タグを使うなら b のほうはダメなので a になりますが パット流し見でみたときに </script> っぽさがあんまりないんですよね
ですが ` はエスケープしないといけないですし \ もその後に来る文字によってはエスケープしないとエラーになります
とりあえずこの 2 つだけ注意すればと思ってるかもしれませんが実はまだいるんです
こいつです
</script>
script タグでインラインで JavaScript を書いてる場合には </script> があるとそこで JavaScript が終了します
例えばこういうコードを書いてみると
<!doctype html>
<script>
const html = `
<!doctype html>
<script src="a.js"></script>
`
window.onclick = eve => {
if(eve.target.closest("button")){
const subwindow = window.open("about:blank")
subwindow.document.write(html)
}
}
</script>
<button>button</button>
<script>
const html = `
<!doctype html>
<script src="a.js"></script>
`
window.onclick = eve => {
if(eve.target.closest("button")){
const subwindow = window.open("about:blank")
subwindow.document.write(html)
}
}
</script>
<button>button</button>
一見 ボタンおしたらウィンドウが開いて そこで a.js が実行されるんだろうなー と思っていたら画面に JavaScript のコードが中途半端にいるしコンソールには JavaScript のエラーがでています
JavaScript や CSS はファイルを分けてロードすべきです
devtools でもインラインで書かれてるスクリプトには制限が多いですし ちょっとしたコードでも分けたい感があります
ですが 実際には HTML に JavaScript が含まれるケースが多いです
昔ながらのシステムを使ってそうなものだと自動出力されたスクリプトが HTML 中に色々あったりなんてよくあります
ブログでも記事固有にスクリプトを書こうとするとソース中にインラインで書くことになるのでこの制限を受けます
テンプレートストリングでの syntax error も出ますし わかりやすい問題ですが 「</script>」 と言う文字列をテンプレートストリングに含めたいことはたまにあるのでちょっと不便なんですよね
対処も これは綺麗 って方法が思いつかないですし
var a = `<script></${"script"}>`
var b = `<script></`+`script>`
var b = `<script></`+`script>`
タグを使うなら b のほうはダメなので a になりますが パット流し見でみたときに </script> っぽさがあんまりないんですよね