[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をコピーしました!

エンジニアを目指す方必見!おすすめプログラミングスクール

最短でエンジニアになるには、いかに効率よく学習するかが重要です。モチベーションを維持しながら最短でエンジニアを目指すならプログラミングスクールを利用するのもおすすめです。

目次
閉じる