JavaScript | エスケープシーケンス(特殊文字の記述)

javascrpit JavaScript
スポンサーリンク

1. 概要(何のためにある?)

エスケープシーケンスは「文字列リテラルの中で直接書けない特殊な文字」を表すための書き方です。バックスラッシュ \ と記号を組み合わせて使います。たとえば改行・タブ・クォート('")・Unicode の特殊文字などを文字列の中に入れたいときに使います。

2. よく使うエスケープ(一覧と簡単な意味)

  • \n :改行(new line)
  • \t :タブ(水平タブ)
  • \\ :バックスラッシュ \ 自体を表す
  • \' / \" :シングル/ダブルクォートを文字として書くとき(文字列を同じ種類のクォートで囲っている場合)
  • \` :バッククォート(テンプレートリテラル内でバッククォートを文字にしたいとき)
  • \0 :NULL(文字コード 0、値 null とは別物)
  • \xXX :2 桁の 16 進数で Latin-1 文字を指定(例:\x48 = H
  • \uXXXX :4 桁の 16 進数で Unicode を指定(例:\u82b1 =
  • \u{XXXXXX} :コードポイントで Unicode を指定。1〜6 桁の 16 進数が使える(ES6/ES2015 以降)。
// 改行とタブ
console.log("こんにちは。\n今日は\t天気がいいです。");
// 出力:
// こんにちは。
// 今日は    天気がいいです。

// クォートの内部で同じクォートを使いたいとき
console.log('Today\'s Movie'); // Today's Movie

// バックスラッシュを表示したいとき
console.log("パスは C:\\Windows\\System32"); // パスは C:\Windows\System32

// 16進や Unicode
console.log('\x48\x65\x79');       // Hey
console.log('\u82b1\u675f');       // 花束
console.log('\u{1F600}');          // 😀(絵文字:U+1F600)
// \u{...} は ES6 以降で使えるコードポイント指定です。 :contentReference[oaicite:2]{index=2}
JavaScript

3. テンプレートリテラル(バッククォート)の便利な点

バッククォート(`)で囲むテンプレートリテラルはそのまま複数行を書けるので、 \n を気にせず可読性よく書けます。また ${expr} で式を埋め込めます(文字列内に変数の値を入れられる)。これらは ES6 の機能です。

const name = "花子";
const text = `こんにちは ${name} さん。
明日は晴れるといいですね。`; // ← 改行をそのまま含む
console.log(text);
JavaScript

よくある間違い・注意点(初心者がハマりやすい所)

  1. シングルクォートで囲んだ文字列内にそのまま ' を書くと構文エラーになる → \' を使う。
  2. \0 は「文字コード 0 の文字」であって null(値が無い)とは別。意図せず入ると文字列長に影響します。
  3. \uXXXX は 4 桁の 16 進数しか扱えない(サロゲートが必要なコードポイントは分割される)。幅広い Unicode(絵文字など)を扱うときは \u{...} が便利。
  4. テンプレートリテラル(バッククォート)を使えば見た目どおりに改行できるが、HTML に埋める際の扱い(空白・改行の表示)には別の注意が必要(出力先での扱いを確認すること)。

練習

次のコードの出力を予想してから実行してみる:

console.log("A\tB\nC\\D");
JavaScript

"She said "Hello"" を正しく出力するにはどう書けばよいか?(単一行・シングル/ダブルどちらの書き方でも試す)

まとめ(覚えておきたいポイント)

  • \ で始まる特殊な組み合わせが「エスケープシーケンス」。まずは \n, \t, \\, \', \" を覚えると実務で困りにくいです。
  • 絵文字や 16 ビットを超える Unicode を扱うなら \u{...} を使うと安全(ES6)。
  • 文字列の表現が楽になるテンプレートリテラル(バッククォート)も積極的に使おう。
タイトルとURLをコピーしました