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

2022年6月15日

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

$.param( obj )

よかったらシェアしてね！