JavaScriptでURLエンコードする方法【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptでURLエンコードする方法について、基本的なエンコードの方法とURI全体をエンコードする方法に分け、簡単に解説していきます。

基本的なエンコードの方法

URIをエンコードするにはencodeURIメソッドを使います。

encodeURIメソッドでは、引数にエンコード対象のURIを指定します。

var uri = "https://www.nekoroblog.com/hoge=ほげ";
var encode1 = encodeURI(uri);

上記のコードでは、結果的に日本語の部分だけがURLエンコードされることになります。

URI全体をエンコードする方法

encodeURIComponentメソッドではURI全体をエンコードできます。

encodeURIComponentメソッドでも同様に、引数にエンコード対象のURIを指定します。

var uri = "https://www.nekoroblog.com/hoge=ほげ";
var encode2 = encodeURIComponent(uri);

上記のコードでは、日本語の部分だけでなく全体がURLエンコードされることになります。

エンコードされたものをデコードする方法

encodeURIメソッドでエンコードされたものはdecodeURIメソッドで戻せます。

一方、encodeURIComponentメソッドの場合はdecodeURIComponentメソッドを使います。

var uri = "https://www.nekoroblog.com/hoge=ほげ";
var encode1 = encodeURI(uri);
var decode1 = decodeURI(encode1);

var encode2 = encodeURIComponent(uri);
var decode2 = decodeURIComponent(encode2);

上記のコードのように、エンコード時に使用したメソッドによって、デコードのメソッドも切り替えます。