[javascript][jQuery]オブジェクトをURLパラメータに変換

React
スポンサーリンク
language

urlパラメータにしたいキーと値を以下のようにまとめて、URLパラメータに変換したいときが度々あるので、オブジェクトをURLパラメータに変換する方法をまとめます。

var paramObj = {
   param1: 'hoge',
   param2: 'foo',
   param3: 'bar'
}

paramObj[param4] = 'hogehoge';

上記のパラメータを変換し、以下のURLパラメータを生成します。

var str = 'param1=hoge¶m2=foo¶m3=bar¶m4=hogehoge';
スポンサーリンク

javascript

ES2017の書き方だと以下のように一行でオブジェクトをURLパラメータに変換できます。

let str = Object.entries(paramObj).map(([key, val]) => `${key}=${val}`).join('&');

キー/値がURLエンコードされていない場合は、encodeURIComponent()を使用することをお勧めします。

let str = Object.entries(paramObj).map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');

また、以下のようにURL() コンストラクターを使ってパラメータ付きのURLを生成することもできます。

const url = new URL(`sample.com`);
url.search = new URLSearchParams(paramObj);

jQuery

jQueryではparam()関数が用意されているので、pram()を使ってURLパラメータを以下のように生成します。

$.param( obj )

参考

How to serialize an Object into a list of URL query parameters?
Without knowing the keys of a JavaScript Object, how can I turn something like... var obj = { param1: 'something', param2: 'somethingelse', param3: 'a...
タイトルとURLをコピーしました