JavaScriptの文字列エスケープルールとベストプラクティス

JavaScriptの文字列エスケープ

JavaScriptには3つの文字列デリミタ — シングルクォート（'）、ダブルクォート（"）、バッククォート（```）— があり、それぞれ若干異なるエスケープルールを持ちます。これらの違いを理解することが、クリーンでバグのないコードの鍵です。

シングルクォートとダブルクォート文字列

エスケープシーケンスに関しては両者は同じ動作をします。唯一の違いは、どのデリミタをエスケープする必要があるかです。

サポートされるエスケープシーケンス

\\'   → シングルクォート
\\"   → ダブルクォート
\\\\   → バックスラッシュ
\\n   → 改行
\\r   → キャリッジリターン
\\t   → タブ
\\b   → バックスペース
\\f   → フォームフィード
\\0   → null文字
\\uXXXX   → Unicode BMP文字（16進4桁）
\\u{XXXXX} → Unicodeコードポイント（ES6+、16進1-6桁）
\\xHH  → Latin-1文字（16進2桁）

テンプレートリテラル（バッククォート文字列）

テンプレートリテラルはほとんどの文字をエスケープなしで扱えます。エスケープが必要なのはバッククォートと ${ シーケンスのみです。

JSON.stringifyによる安全なエスケープ

JSONやHTMLにデータを埋め込む際、JSON.stringify() は必要なすべてのエスケープを自動的に処理します。

タグ付きテンプレートリテラル

String.raw タグはエスケープを処理せずにraw文字列を返します。

よくある間違い

• 正規表現でのバックスラッシュエスケープ忘れ：new RegExp("\\\\d+") であって new RegExp("\\d+") ではない。
• \\x を16進1桁だけで使用 — JavaScriptではちょうど2桁が必要。
• テンプレートリテラル内でシングル/ダブルクォートのエスケープが必要と思い込むこと — 不要です。