目次
結果の違い
最近、 JavaScript の URL エンコード関係の投稿が続きますが、今回は、 encodeURI 関数と encodeURIComponent 関数の変換結果の違いを調べて見ることにしました。
テストに使用する変換フォームは、当ブログで以前に作成したものを使用してみます。その時の投稿は、以下の URL から見ることができます。
- JavaScript で URL エンコード、 URL デコードの変換テスト。 – pulogu.net
- https://pulogu.net/blog/020-computer/javascript/url-encoding-url-decode-conversion-test/
変換テスト
それでは、変換テストを行ってみたいと思います。今回のテストでは、変換する文字列を絞って結果の違いを見てみたいと思います。以下の MDN の encodeURI 関数 のドキュメントに、エスケープされない文字という説明が書いてあったので、そのエスケープされない文字が、 encodeURI 関数では変換されず、 encodeURIComponent 関数では、どうなるのかを私の作成した変換フォームを使用して調べて見ることにします。
- encodeURI() - JavaScript | MDN
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURI
上記 MDN のドキュメントにエスケープされない文字として記載してある文字は、以下の文字群になるようです。以下、 <pre></pre> 内は、ドキュメントより転載になります。
A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
A-Z a-z 0-9 は、AからZ aからz 0から9 の文字を表しているようです。あとは、記号がずらりと並んでいますね。 URL で使用される「/」「.」、 URL のパラメータ？として使用される「?」「&」「=」などが含まれているようです。これらの文字を、 encodeURI 関数と encodeURIComponent 関数の両方で変換してみます。
変換結果比較
以下の文字を変換して結果を比較してみます。
< 変換する文字列 >
ABCXYZabcxyz0123456789;,/?:@&=+$-_.!~*'()#
変換結果は以下のようになりました。変換結果に違いがあるようです。
＜ encodeURI 結果文字列 >
ABCXYZabcxyz0123456789;,/?:@&=+$-_.!~*'()#
< encodeURIComponent 結果文字列 >
ABCXYZabcxyz0123456789%3B%2C%2F%3F%3A%40%26%3D%2B%24-_.!~*'()%23
上記の結果を縦並びの表にしてみます。以下に表を作成してみました。 encodeURI 関数 でエスケープされない文字を変換しているので、「元文字列」と「encodeURI」の結果は同じになっていますが、「encodeURIComponent」の結果では、一部の文字が %xx のように、 % で始まる文字に変換されています。 URL エンコードされているようです。
| 元文字列 | encodeURI 結果 | encodeURIComponent 結果 |
|---|---|---|
| A | A | A |
| B | B | B |
| C | C | C |
| X | X | X |
| Y | Y | Y |
| Z | Z | Z |
| a | a | a |
| b | b | b |
| c | c | c |
| x | x | x |
| y | y | y |
| z | z | z |
| 0 | 0 | 0 |
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
| 4 | 4 | 4 |
| 5 | 5 | 5 |
| 6 | 6 | 6 |
| 7 | 7 | 7 |
| 8 | 8 | 8 |
| 9 | 9 | 9 |
| ; | ; | %3B |
| , | , | %2C |
| / | / | %2F |
| ? | ? | %3F |
| : | : | %3A |
| @ | @ | %40 |
| & | & | %26 |
| = | = | %3D |
| + | + | %2B |
| $ | $ | %24 |
| - | - | - |
| _ | _ | _ |
| . | . | . |
| ! | ! | ! |
| ~ | ~ | ~ |
| * | * | * |
| ' | ' | ' |
| ( | ( | ( |
| ) | ) | ) |
| # | # | %23 |
ちなみに、半角スペースは「%20」、改行は「%0A」、タブは「%09」という変換結果になりました。
あとがき
私の場合、 URL エンコード自体の使用用途がよくわかっていませんが、とりあえず変換結果の比較を行うことが出来ました。
ウェブサイトの検索結果などのページで、ウェブブラウザーのアドレスバーの部分に表示される URL が % を含む暗号のような長い文字になることがありますが、 URL エンコードされた結果が表示されているのかもしません。
下記の URL を decodeURI 関数にかけると
https://pulogu.net/tag/%e3%81%a7%e3%81%8d%e3%82%8b%e3%81%93%e3%81%a8/
結果は、以下のようになりました。ワードプレスのタグのスラッグ名そのままにデコードされました。
https://pulogu.net/tag/できること/
decodeURI 関数の結果を分解してみると、
で（%E3%81%A7）
き（%E3%81%8D）
る（%E3%82%8B）
こ（%E3%81%93）
と（%E3%81%A8）
となっているようです。 %xx が 3 つも組み合わさって 1 文字になっているようですね。複雑です。
以上、閲覧ありがとうございました。
- [ Amazon.co.jp アソシエイト ] JavaScript 関係の本
- https://amzn.to/48EoeGM
