JavaScript　encodeURI / encodeURIComponentでURIエスケープする方法

JavaScriptでURIをエスケープする方法を解説し、encodeURI関数、encodeURIComponent関数を使った手法を紹介します。

URIをエスケープするにはどうしたらいいですか？

encodeURI関数やencodeURIComponent関数を使うことで変換することができます。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

encodeURI関数を使ったURIエスケープの方法

　URIをエスケープするには、encodeURI関数とencodeURIComponent関数の二つが用意されています。

　encodeURI関数は、URLエンコードに使用するために用意されています。この関数は、有効なURL文字を変換し、それ以外の文字を%エンコード形式に変換します。

以下に、encodeURI関数を使ったサンプルプログラムを示します。

const url = "https://example.com?name=John Doe&age=20";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // "https://example.com?name=John%20Doe&age=20"

このプログラムでは、変数urlに「https://example.com?name=John Doe&age=20」という文字列が代入され、encodeURI関数を使ってエンコードされた文字列がencodedUrlに代入されます。

このように、encodeURI関数はスペースを%20に変換し、特殊文字をエスケープします。

クエリ情報に特殊文字が含まれている場合はencodeURIComponentを利用する

　クエリ情報に特殊文字が含まれている場合は、encodeURIComponent関数を使うことで変換することができます。
この関数は、すべての文字を%エンコード形式に変換します。

以下に、encodeURIComponent関数を使ったサンプルプログラムを示します。

const query = "name=John+Doe&age=20";
const encodedQuery = encodeURIComponent(query);
console.log(encodedQuery); // "name=John%2BDoe&age=20"

　一般的に、URL全体をエンコードする場合はencodeURI関数を、クエリ文字列だけをエンコードする場合はencodeURIComponent関数を使用するのが最適です。

CHECK

旧来からあったescapeメソッドは環境や文字コードによって結果が異なりやすく、現在では非推奨となっているため使用は避けることをおすすめします。

エスケープされた文字を元に戻す方法

　エスケープされた文字を戻すには、decodeURI関数とdecodeURIComponent関数の二つが用意されています。

　decodeURI関数は、URLデコードに使用するために用意されています。この関数は、%エンコード形式で表現された有効なURL文字をデコードします。

以下に、decodeURI関数を使ったサンプルプログラムを示します。

const encodedUrl = "https://example.com?name=John%20Doe";
const decodedUrl = decodeURI(encodedUrl);
console.log(decodedUrl); // "https://example.com?name=John Doe"

　decodeURIComponent関数は、クエリ文字列の%エンコード形式をデコードするために用意されています。この関数は、%エンコード形式で表現された文字をデコードします。

以下に、decodeURIComponent関数を使ったサンプルプログラムを示します。

const encodedQuery = "name=John%2BDoe&age=20";
const decodedQuery = decodeURIComponent(encodedQuery);
console.log(decodedQuery); // "name=John+Doe&age=20"

　一般的に、URL全体をデコードする場合はdecodeURI関数を、クエリ文字列だけをデコードする場合はdecodeURIComponent関数を使用するのが最適です。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

「encodeURI / encodeURIComponentでURIエスケープする方法」を以下にまとめます。

JavaScriptでURIをエスケープするには、encodeURI関数とencodeURIComponent関数の二つが用意されています。
encodeURI関数は、URLエンコードに使用し、有効なURL文字を変換し、それ以外の文字を%エンコード形式に変換する。
encodeURIComponent関数は、クエリ文字列をエンコードし、すべての文字を%エンコード形式に変換する。
一般的に、URL全体をエンコードする場合はencodeURI関数を、クエリ文字列だけをエンコードする場合はencodeURIComponent関数を使用するのが最適
JavaScriptでエスケープされた文字を戻すには、decodeURI関数とdecodeURIComponent関数の二つが用意されています。
decodeURI関数は、URLデコードに使用し、%エンコード形式で表現された有効なURL文字をデコードする。
decodeURIComponent関数は、クエリ文字列の%エンコード形式をデコードし、%エンコード形式で表現された文字をデコードする。