JavaScript URLデコード関数の比較：decodeURI()とdecodeURIComponent()関数

JavaScript URLデコード関数

JavaScriptではURLをデコードするための関数としてdecodeURI()とdecodeURIComponent()の2種類が用意されております。ここではそれぞれの使用目的と相違点について比較してご説明いたします。

URLデコード関数の比較

JavaScriptにおけるURLデコード関数であるdecodeURI()とdecodeURIComponent()の2つを表形式で比較いたします。

JavaScriptにおけるURLデコード関数decodeURIComponent()とURLエンコード関数encodeURIComponent()の2つを表形式で比較
特徴	`decodeURI()`	`decodeURIComponent()`
使用目的	encodeURI()でエンコードされたURLをデコード	encodeURIComponent()でエンコードされたURIコンポーネントをデコード
使用対象	全体のURIをデコードする際に使用	クエリ文字列内の各値をデコードする際に使用
予約文字や特殊文字の扱い	一部の予約文字や特殊文字（`#`など）は保持	すべての予約文字および特殊文字をデコード
主な利用ケース	外部リンクの処理やブラウザ環境での利用	クエリ文字列のデコードやユーザー入力の処理など

decodeURI()関数とdecodeURIComponent()関数の2つの違いをコード例で確認してみます。

JavaScript

// 与えられた文字列を変数に代入します。
const set1 = ";,/?:@&=+$"; // ご注意ください！エンコード方式によって結果が異なります。
const set2 = "-_.!~*'()";
const set3 = "#"; // ご注意ください！エンコード方式によって結果が異なります。
const set4 = "ABC abc 123";

// 与えられた文字列をencodeURI()関数とencodeURIComponent()関数でエンコードします。
const encodedSet1 = encodeURI(set1);
const encodedSet2 = encodeURI(set2);
const encodedSet3 = encodeURI(set3);
const encodedSet4 = encodeURI(set4);

const encodedURIComponentSet1 = encodeURIComponent(set1);
const encodedURIComponentSet2 = encodeURIComponent(set2);
const encodedURIComponentSet3 = encodeURIComponent(set3);
const encodedURIComponentSet4 = encodeURIComponent(set4);

console.log("encodeURI()関数でエンコード：");
console.log(encodedSet1); // ;,/?:@&=+$
console.log(encodedSet2); // -_.!~*'()
console.log(encodedSet3); // #

console.log("encodeURIComponent()関数でエンコード：");
console.log(encodedURIComponentSet1); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodedURIComponentSet2); // -_.!~*'()
console.log(encodedURIComponentSet3); // %23

console.log("encodeURI()関数でエンコードしたものをdecodeURI()関数でデコード：");
console.log(decodeURI(encodedSet1)); // ;,/?:@&=+$
console.log(decodeURI(encodedSet2)); // -_.!~*'()
console.log(decodeURI(encodedSet3)); // #

console.log("encodeURIComponent()関数でエンコードしたものをdecodeURI()関数でデコード：");
console.log(decodeURI(encodedURIComponentSet1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(decodeURI(encodedURIComponentSet2)); // -_.!~*'()
console.log(decodeURI(encodedURIComponentSet3)); // %23

console.log("encodeURIComponent()関数でエンコードしたものをdecodeURIComponent()関数でデコード：");
console.log(decodeURIComponent(encodedURIComponentSet1)); // ;,/?:@&=+$
console.log(decodeURIComponent(encodedURIComponentSet2)); // -_.!~*'()
console.log(decodeURIComponent(encodedURIComponentSet3)); // #

上記の結果から分かるように

decodeURI()関数はencodeURIComponent()関数でエンコードされている内容をデコードする際に、一部の文字をデコードしません。
一方で、decodeURIComponent()関数はencodeURIComponent()関数でエンコードされている内容をデコードする際、安全に解釈してデコードしてくれます。

これは各関数の使用目的に関連しております。decodeURI()関数は全体のURIをデコードする際に使用され、その場合URIの構造を保持するため一部の予約文字はデコードされません。一方、decodeURIComponent()関数はURIcomponentをデコードする際に使用され、こちらではすべての予約文字や例外文字までデコードし、正確な文字列を取得するために用いられます。

仕様書

JavaScriptのURLデコード関数の仕様書
仕様書
`decodeURI()`	ECMAScript® 2026 Language Specification #sec-decodeuri-encodeduri
`decodeURIComponent()`	ECMAScript® 2026 Language Specification #sec-decodeuricomponent-encodeduricomponent