目次
encodeURIComponentとencodeURIの違いのまとめ
| 役割 | エンコードしない文字 | 用途 | |
|---|---|---|---|
| encodeURIComponent | URLの一部分（クエリパラメータ値） をエンコードするのに適している | ほぼ全ての記号をエンコードする（?, &, =, # などもエンコード対象） |
name=valueのvalue 部分など、パラメータ値だけを安全にエンコードしたいとき |
| encodeURI | URL全体をエンコードするのに適している | :, /, ?, #, &, =, + などURLの構文で使う記号はエンコードしない |
http://example.com/path?name=value など、構造を壊さず全体をエンコードしたいとき |
URLをエンコードする理由
URLは基本的にASCII文字（英数字・一部記号）で表現され、日本語や空白、特殊記号（&, =, ?, # など）はそのままURLに入れると解釈できません。
そのためエンコードを行います。
encodeURIComponentとは
URLの構文で使用する記号も変換します。
<script>
let url = "https://example.com/search?arg1=test1&2&arg2=test3";
console.log(encodeURIComponent(url));
// https%3A%2F%2Fexample.com%2Fsearch%3Farg1%3Dtest1%262%26arg2%3Dtest3
// クエリパラメータだけの例
let base = "https://example.com/search?";
let keyword1 = "test1&2";
let keyword2 = "test3";
console.log(base + "arg1=" + encodeURIComponent(keyword1) + "&arg2=" +encodeURIComponent(keyword2));
// https://example.com/search?arg1=test1%262&arg2=test3
</script>4行目は、コロン(:)、スラッシュ(/)、 クエスチョンマーク(?)、イコール(=)は、アンパサンド(&)は変換されています。
8,9行目は、URLのパラメータ値を変数にセットしています。
10行目は、パラメータ値のみ変換されています。
→イコール(=)、アンパサンド(&)を変換するのでパラメータ値の変換に向いています。
encodeURIとは
URLの構文で使用する記号は変換しません。
<script>
let url = "https://example.com/search?arg1=test1&2&arg2=test3";
console.log(encodeURI(url));
// https://example.com/search?arg1=test1&2&arg2=test3
</script>コロン(:)、スラッシュ(/)、 クエスチョンマーク(?)、イコール(=)、アンパサンド(&)は、変換されていません。
→イコール(=)、アンパサンド(&)が変換されていないのでパラメータの変換に向いていません。
理由：ユーザ入力に含まれていると区切りと誤解されてしまうため。
arg1のパラメータ値はtest1%2ですが、&がそのまま表示されてしまっています。
関連の記事