JavaScriptのencodeURIComponentについて簡単なサンプルコードで解説
8 回閲覧されました
みなさんこんにちは、jonioです。
今回はJavaScriptのencodeURIComponentが何かと簡単なサンプルコードで解説します。
encodeURIComponentとは
URLに使えない文字をURLに使える文字列に変換する関数です。
例えば下記を変換します。
- 日本語
- 空白
- &
- =
- ?
例えば下記のコードを書いたとします。
const keyword = 'Vueは 友達';
const url = 'https://example.com/search?q=' + keyword;
console.log(url);一応結果は下記になりますが空白や日本語が入っているので想定していないURLになる可能性があります。
https://example.com/search?q=Vueは 友達それを解決してくれるのがencodeURIComponentです。
次はサンプルコードで見ていきます。
サンプルコード
下記のコードで考えます。
const keyword = 'Vueは 友達';
const url = 'https://example.com/search?q=' + encodeURIComponent(keyword);
console.log(url);これで下記の表示になり想定したURLになります。
https://example.com/search?q=Vue.js%20%E5%85%A5%E9%96%80encodeURIComponentを使った時の変換対応は下記になります。
[変換前] [変換後]
空白 %20
日本語 文字により変わる
& %26
= %3D
? %3F