【JavaScript入門】エスケープ処理とescape関数の使い方まとめ

こんにちは!ライターのヨシダジュンです。

プログラミングにおけるエスケープという単語をご存知でしょうか。他の多くのプログラミング言語にもある概念なので、馴染みのある方も多いでしょう。この記事では、エスケープシーケンス一覧、JavaScriptで行うエスケープ処理という基本的な内容から、

  • 正規表現におけるエスケープ処理
  • 日本語を含むURLのエスケープ処理
  • escape関数の使い方

などの応用編に関しても解説していきます。

エスケープシーケンス一覧

そもそもの話ですが、エスケープとは何なのでしょうか。プログラミングで文字列を扱っていると、必ずと言ってよいほど出くわす問題があります。それはキーボードで入力できない文字はどう表現するのか?という問題です。

代表的なものとしては改行ですね。改行を表す文字をどう表現すればよいのでしょう?そんなときに使うのがエスケープでもあります。キーボードから入力できない文字を、別の文字の組み合わせで表現するわけです。

そういったものをまとめてエスケープシーケンスと呼びます。以下がエスケープシーケンスの一覧です。

エスケープシーケンス 意味
 \b  バックスペース
 \t  水平タブ
 \v  垂直タブ (垂直方向に空白を入れる)
 \n  改行
 \r  復帰 (同じ行の先頭に移動)
\f  改ページ
 \'  シングルクォーテーション
 \"  ダブルクォーテーション
 ¥¥ ¥文字
¥0 NULL文字

 

エスケープ処理

では、実際にエスケープの処理について、サンプルコードを交えながら説明します。適当なHTMLファイルを準備し、その中から下記JavaScriptファイルを呼び出すように記述します。

console.log('シングルクォーテーションは\'です');

これを実行すると以下となります。

シングルクォーテーションは'です

一方、コードを以下のようにするとどうなるでしょう?

console.log('シングルクォーテーションは'です');

実行すると、今度は何も表示されません。引数の「’」が文字列の終端を表す文字として認識されるため、文法エラーとなるのです。また、以下のサンプルコードをご覧ください。

console.log('改行の文字コードは\nです');

このコードの実行結果は次のとおりです。

改行の文字コードは
です

「\n」が改行を表すためですですね。そこで、以下のように変更します。

console.log('改行の文字コードは\\nです');

「\n」の前に「\」を付けることでエスケープします。これを実行すると以下のようになります。

改行の文字コードは\nです

さらに、別の例をご紹介します!

console.log('水平タブの文字コードは\tです');

実行結果は以下のとおり。

水平タブの文字コードは	です

「\n」の場合と同じですね。水平タブの文字コードを表示するためには「\t」の前に「\」を付けてエスケープすればよいです。

console.log('水平タブの文字コードは\\tです');

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

エスケープが必要な理由とは?

正規表現がそもそも何ものかをよく知らないという方はまずは以下の記事の正規表現とは?を参考にしてください。

【JavaScript入門】4つのパターンで理解する正規表現の使い方まとめ!
更新日 : 2019年4月23日

正規表現は特殊文字を使用して文字列の検索や置換などに利用できますが、その特殊文字をエスケープ処理しなければ正しい検索ができない場面があります。具体的な例で解説していきます。

例えば、あるURLのドメイン(http://の後の部分、例えばグーグルならhttps://www.google.co.jpの’www.google.co.jp’の部分のこと)がグーグルのものかどうか調べる処理をプログラムで書くとします。

サンプルコードは以下の通りです。

//検索したい文字列
var reg = /www.google.com/;

//検索対象
var url1 = "www.google.com"; //Hitしてほしいデータ
var url2 = "wwwAgoogle0com"; //本来Hitしてほしくないデータ

// HitしたらTrue
console.log(url1.match(reg) !== null);
console.log(url2.match(reg) !== null); //これもTrue、つまりHitしたことになった!

実行結果

true
true

url1は検索したい文字列と同一なので、検索結果がTrueであることは問題ありません。ですが、url2は検索したい文字に似ていますが、よく見るとドット(.)の箇所がAや0の文字になっていますので、本来は検索結果はFalse、つまりHitしてほしくないデータでした。

なぜこのようなことが起きたのでしょうか?これは検索したい文字列の指定(/www.google.com/)にあるドット(.)が普通の文字のドットと認識されず、正規表現の特殊文字として扱われたからです。

正規表現におけるドットの意味は”何らかの1文字”を表します。そのため、url2のAや0も”何らかの1文字”という条件を満たすため、Hitしたのでした。

では、どうすれば正しくドットという文字をドットそのものの文字だけ条件を満たすようにできるのか。そこで登場するのがこれまでご紹介してきたエスケープ処理です。

ドットの文字にバックスラッシュ(\)を付けることで、正規表現の特殊文字ではなく、ドットそのものを検索するようにプログラムに指示することができます。実際に改善したプログラムは以下の通りです。

//検索したい文字列。ドットにバックスラッシュを追加
var reg = /www\.google\.com/;

//検索対象
var url1 = "www.google.com"; //Hitしてほしいデータ
var url2 = "wwwAgoogle0com"; //本来Hitしてほしくないデータ

// HitしたらTrue
console.log(url1.match(reg) !== null);
console.log(url2.match(reg) !== null);

実行結果

true
false

今度はurl2がFalse、つまりHItしなかったという期待した結果を得ることができました。このように正規表現の特殊文字を含む文字列を検索したり置換する場合にはバックスラッシュでエスケープする必要があることを覚えておいてください。

また、文字列の連結を行うような場合では、改行を挿入する際にエスケープ処理をよく使うので、次の記事でその活用事例や使い方を参考にしてみてください!

【JavaScript入門】joinや+演算子で配列や文字列を連結・結合する
更新日 : 2019年4月20日

自作関数でエスケープ処理を行う

正規表現で検索や置換をするたびに、特殊文字を気にしてエスケープ処理を行うことが手間である場合は、自分でその処理を行う関数を作り、必要な場面でその関数を利用するという手もあります。

以下、サンプルコードです。

var myEscape = function (str) {
    return str
            .replace(/\\/g, '\\\\')
            .replace(/'/g, "\\'")
            .replace(/"/g, '\\"')
            .replace(/\//g, '\\/');
};

myEscape関数は文字列strを引数として受け取り、その文字の中に「\\」「’」「”」「\」が存在していれば、replace関数を使ってエスケープシーケンスに置換します。

そして、置換後の文字列strを「return」することで、最終的にエスケープされた文字列を取得することが出来るというわけです。使い方としては、以下のように使用します。

hoge = "foo='222';";
console.log(myEscape(hoge));

実行すると次のように表示されます。

foo=\’222\’;

これは簡単な例ですが、ソースコードを文字列hogeに代入し、hogeに含まれる特殊な文字をエスケープシーケンスに置換しています。

日本語を含むURLのエスケープ処理

日本語文字は、そのままではURLとして使えません。そのため、日本語文字をURLとして使うためには、URLで使える文字列にエンコードする必要があります。そこでencodeURIComponent関数があります。

encodeURIComponent関数は、URLを構成する部分文字列に対して使う関数です。

encodeURIComponent(“http://sample.com/ほげ”); 

実行結果

http%3A%2F%2Fsample.com%2F%E3%81%BB%E3%81%92

このように、日本語や「:」「/」などがエンコードされているのが分かります。

escape関数とは

escape関数は文字列をエンコードするために使います。日本語などの文字列をURLに渡すと問題が発生する場合があります。

そのような場合には、escape関数を使って文字列をエンコードする必要があります。また、escape関数でエンコードした文字列をデコードするためには、unescape関数を使います。

escape関数の使い方

escape関数で文字列をエンコードする方法

ここでは、escape関数で文字列をエンコードする方法を解説します。escape関数は引数にエンコードする文字列を指定します。次のプログラムで確認してみましょう。

var str = escape("samurai");
console.log(str);

str = escape("さむらい");
console.log(str);

実行結果:

samurai
%u3055%u3080%u3089%u3044

このようにして、日本語の文字列がエンコードされることが確認できました。

unescape関数で文字列をデコードする方法

ここでは、unescape関数で文字列をデコードする方法を解説します。unescape関数は引数にデコードする文字列を指定します。次のプログラムで確認してみましょう。

var str = escape("さむらい");
console.log(str);

str = unescape(str);
console.log(str);

実行結果:

%u3055%u3080%u3089%u3044
さむらい

このようにして、文字列をデコードすることができました。

まとめ

今回は、JavaScriptにおけるエスケープに関することをまとめました。Webアプリケーションやブラウザでの表示においては、文字列を扱うことも多いですが、そういったときに特定の文字をエスケープしなければいけないケースは必ずと言ってよいほど出てくるでしょう。

そんな場面でも「うまく動かない!」とはまることなく、エスケープに関する基礎を抑えておきましょう。

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

ヨシダ ジュン

フリーランスエンジニア、ライター。

組込みソフト開発歴が6年ほどあります。
一部上場のソフト開発会社でソフトウェア開発(基本設計、詳細設計、コーディング、テスト)に従事。
その中でC言語を使ったドライバ、アプリ開発、Linuxやサーバなどのネットワーク関係のスキルを身につけました。

2015年4月にフリーランスとして独立し、スクレイピングやHP制作、ライティングなど幅広い仕事を手がけています。さらに、認識技術という次世代技術を活用して日常生活に応用活用したライフスタイルを送っています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説