HTMLとJavaScriptではエスケープシーケンスの書き方が異なる
ということをすっかり忘れており、HTML必死にJavaScriptのエスケープシーケンスを使ってエラーを連発するという出来事があったので備忘録として残しておく。
HTMLとJavaScriptのエスケープシーケンスの違い(一例)
| 文字表記 | HTML | JavaScript |
|---|---|---|
| ダブルクォーテーション(") | " | \" |
| シングルクォーテーション(') | ' | \' |
そもそもエスケープシーケンスとは
画面上に文字を出力する際に、文字そのものを出力するのではなく、文字色の変更やカーソルの移動、文字の消去など、文字出力の制御を行う特殊な文字列のことである。IT用語辞典
ダブルクォーテーションで囲んだ中にさらにダブルクォーテーションを使いたい、などの場合に用いられるような書き方。
例えば、JavaScriptで「"JavaScript"を勉強します。」と表示したいようなとき
let JS = ""JavaScript"";
document.write(`${JS}を勉強します。`);
上記では、エラーとなる。
そこで、ダブルクォーテーション(")のエスケープシーケンス(\")を利用すると
let JS = "\"JavaScript\"";
document.write(`${JS}を勉強します。`);
「"JavaScript"を勉強します。」と表示が可能になる。
以上。