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

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 )

参考

https://stackoverflow.com/questions/6566456/how-to-serialize-an-object-into-a-list-of-url-query-parameters/6566471

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

目次