【STEP.07】
JavaScriptのエスケープ処理の仕方を学ぼう!

エスケープシーケンスとは

文字列リテラルでは、「"」「'」のように特別な意味(この場合はリテラルの終了を意味します。)を表す文字や、キーボードから直接表せない文字を、「\+文字」の形式で表現できます。

これをエスケープシーケンスといいます。

エスケープシーケンスの具体例

エスケープシーケンスの具体例を見てみましょう。

次のように、シングルクォートで囲まれた文字列にシングルクォートを含めることはできませんが、エスケープシーケンスを利用すればそれが可能になります。

console.log('He\'s Hero!');
// 結果:He's Hero!

このように記述することで、JavaScriptは「\'」を(文字列の終了としてではなく)ただの「'」として認識します。

このように、「ある文脈の中で意味を持つ文字を、あるルールに基づいて無効化する」ことをエスケープ処理といいます。

同じくダブルクォートをエスケープしたい場合には次のように、「\"」を記述します。

console.log(" \"wait!\" the man shouted.");
// 結果: "wait!" the man shouted.

また、文字列中に改行を含めたいケースでは、以下のように記述します。

console.log('こんにちは\nJavaScript!');
JavaScript、console.log、エスケープシーケンス、改行

\n」で改行文字を表すわけです。

JavaScriptで利用できるエスケープシーケンス一覧

JavaScriptで利用できるエスケープシーケンスには、次に掲げる表のようなものがあります。

【JavaScriptで利用できるエスケープシーケンス】
エスケープシーケンス説明
\b
バックスペース
\t
タブ
\n
改行
\f
改ページ
\r
復帰
\'
シングルクォート
\"
ダブルクォート
\\
バックスラッシュ
\xXX
XX(2桁の16進数)で表すLatin-1文字。
例:
\x41(A)
\uXXXX
XXXX(4桁の16進数)で表すUnicode文字。
例:
\u30A2(ア)
\u{XXXXX}
0xffff(4桁の16進数)を超えるUnicode文字。
例:
\u{2000B}(尤)

正規表現におけるエスケープ処理

JavaScriptで正規表現パターンを解析し、検索などの機能を提供するのは、RegExpオブジェクトの役割です。

RegExpオブジェクトは、(1)RegExpコンストラクター(2)正規表現リテラル、いずれかの方法で生成します。

RegExpコンストラクター/正規表現リテラル

new RegExp(pattern, flags)  RegExpコンストラクター
/pattern/flags  正規表現リテラル
pattern    正規表現
flags      オプション

RegExpコンストラクターでは、正規表現を文字列として表します。

また、正規表現リテラルでは、正規表現全体をスラッシュ(/)でくくる必要があります。

そのため、RegExpコンストラクターと正規表現リテラルでは、次のように正規表現そのものの記法が異なります。

  • RegExpコンストラクターでは「\」を「\\」でエスケープすること
  • 正規表現リテラルでは「/」を「\/」でエスケープすること

上述の通り、RegExpコンストラクター構文では、正規表現を文字列として表します。

JavaScriptの文字列リテラルにおいて、「\」はエスケープシーケンスを表す予約文字です。

したがって、たとえば本来の正規表現パターンである「\w」として認識させるためには、「\」を「\\」としてエスケープ処理し、「\\w」のように表現する必要があります。

一方、正規表現リテラルにおいて、「/」は正規表現パターンの開始と終了を表す予約文字です。

正規表現リテラルで正規表現パターンそのものに「/」を含む場合には、これを「\/」のようにエスケープ処理しておく必要があります。

正規表現について詳しく知りたい方は以下のリンクを参照ください。

URIをエスケープする

「https://www.google.co.jp/search?q=javascript」のように、URL末尾に「?キー名=値&…」の形式で渡される文字列のことを、クエリ情報といいます。

サーバーで動作しているアプリに対してパラメーター情報を引き渡すために利用する簡易な情報です。

ただし、クエリ情報では区切り文字である「?」「=」「%」をはじめ、「空白」「マルチバイト文字」などを含めることができません。

これらの文字が入っている可能性がある文字列をクエリ情報として送信したい場合には、あらかじめ文字列をURIエンコードしておく必要があります。

これを行うのが、encodeURIencodeURIComponentメソッドの役割です。

let data = '+/;:,#$@?=&';
	
console.log(encodeURI(data));
// 結果:+/;:,#$@?=&
console.log(encodeURIComponent(data));
// 結果:%2B%2F%3B%3A%2C%23%24%40%3F%3D%26

encodeURIencodeURIComponentメソッドの違いは、後者が「+」 「/」 「;」 「:」 「,」 「#」 「$」 「@」 「?」 「=」 「&」 をエスケープの対象とするのに対して、前者がこれらをそのままにする点です。

エスケープされた文字列を元に戻すには、次のようにdecodeURIdecodeURIComponent メソッドを利用します。

let data = '%2B%2F%3B%3A%2C%23%24%40%3F%3D%26';
 
console.log(decodeURI(data));
// 結果:%2B%2F%3B%3A%2C%23%24%40%3F%3D%26
console.log(decodeURIComponent(data));
// 結果:+/;:,#$@?=&

よく似たメソッドとしてescapeメソッドもありますが、こちらは環境、文字コードによって結果が変わります。

下位互換性を維持したい場合などの目的がない限り、利用してはいけません。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です