【javascript】文字列の中にダブルクオーテーションを入れて表示するには／エスケープ文字

Javascript

2022.08.12

問題
解決方法

問題

画面にて以下の文字列を画面に表示したい。

この中に"ダブルクオーテーション"を入れたい

だが、javascriptにて文字列を定義するときは以下のようにする気がするが、それでは構文エラーが出力されてしまう。

document.getElementById("app").innerHTML =  "この中に"ダブルクオーテーション"を入れたい"

解決方法

エスケープ文字を使用してあげることで表示が可能。

document.getElementById("app").innerHTML =  "この中に\"ダブルクオーテーション\"を入れたい"

特定の単純に出力できない文字に対してはその前に「\」（Macならoption+¥）を入力してあげることで構文エラーなく出力することができる。

また、以下のような方法でも構文エラーを回避して出力することも可能である。

// シングルとダブルで区別してあげることも可能
document.getElementById("app").innerHTML = 'この中に"ダブルクオーテーション"を入れたい';

// 「`」で囲ってあげることで文字列を表示することも可能
document.getElementById("app").innerHTML = `こうやって"ダブルクオーテーション"を入れることも可能`;

どちらも文字列の中にシングルも表示したいとなったら、エスケープ文字を使うことを考えないといけないということになる。

エスケープ文字の一覧は以下からどうぞ