JavascriptでURLの日本語をエンコード/デコード

ショートカット

jsでURLに含まれる日本語をエンコード/デコード

URLに日本語が含まれる場合、javascript側でそのまま扱おうとすると問題があります。

例えば

"https://example.com?param=はと"

のようなURLでアクセスされた際に、paramの”はと”と言う文字を取得して表示したいとします。

これを下のように書いて表示すると

let urlParamStr = window.location.search

console.log(urlParamStr)　// ?param=%E3%81%AF%E3%81%A8

と言うように、日本語である”はと”の部分は”%E3%81%AF%E3%81%A8″と文字コードで表示されてしまいます。

これはURLにマルチバイト文字列（日本語など）が含まれている場合、パーセントエンコードされて送られてくるためです。

エンコードされた日本語をjsで表示するには、decodeURI()メソッドを使って変換（デコード）します。

let urlParamStr = window.location.search
urlParamStr = decodeURI(urlParamStr) //デコード

console.log(urlParamStr) // ?param=はと

これで日本語が含まれている場合でも正しく内容が取得できます。

ここからはおまけですが、逆にURLをエンコードするにはencodeURI()を使います。

let url = 'https://example.com?param=はと'
url = encodeURI(url) //エンコード
    
console.log(url) // https://example.com?param=%E3%81%AF%E3%81%A8

encodeURI()を使うと、日本語の部分がパーセントエンコードされて出力されます。