目次
結果の違い
最近、 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