SYNCERのロゴ
アイキャッチ画像

URLSearchParams - クエリのパラメータ

URLSearchParamsは、URLアドレスのクエリのパラメータを管理するための機能を備えたインターフェイスです。

概要

名前
URLSearchParams
IDL
[Constructor(optional (sequence<sequence<USVString>> or record<USVString, USVString> or USVString) init = ""),
 Exposed=(Window,Worker)]
interface URLSearchParams {
  void append(USVString name, USVString value);
  void delete(USVString name);
  USVString? get(USVString name);
  sequence<USVString> getAll(USVString name);
  boolean has(USVString name);
  void set(USVString name, USVString value);

  void sort();

  iterable<USVString, USVString>;
  stringifier;
};
仕様書
https://url.spec.whatwg.org/#urlsearchparams

チュートリアル

URLSearchParamsはコンストラクタのURLSearchParams()で作成できます。引数にはパラメータの部分だけ含めます。

var urlSearchParams = new URLSearchParams( "hoge=1&fuga=2" ) ;

urlSearchParams.get( "hoge" ) ;	// "1"

また、URL.searchParamsが返します。

var url = new URL( "https://syncer.jp/?hoge=1&fuga=2" ) ;
url.searchParams ;	// URLSearchParams

iterable属性があり、例えばArray.prototype.forEach()でループ処理できます。コールバック関数は第1引数にパラメータの値、第2引数にパラメータの名前を受け取ります。

urlSearchParams.forEach( function( value, name ) {
	console.log( value, name ) ;
} ) ;

// "1", "hoge"
// "2", "fuga"

stringifier属性があり、オブジェクトを文字列として扱った時、パラメータの文字列に変換されます。

element.textContent = urlSearchParams ;	// "hoge=1&fuga=2"

コンストラクタ

URLSearchParams()

新しいURLSearchParamsのオブジェクトを作成します。

プロパティ

固有のプロパティはありません。

メソッド

append()

クエリのパラメータを1つ追加します。

delete()

クエリのパラメータを1つ削除します。

get()

ある名前のクエリのパラメータを1つ取得します。

getAll()

ある名前のクエリのパラメータを全て取得します。

has()

ある名前のクエリのパラメータが存在するか確認します。

set()

クエリのパラメータを一意になるように更新します。

sort()

クエリのパラメータをソートします。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
URLSearchParams 49+ 29+ 10+×× 36+ 10.0+×
append() 49+ 29+ 10+×× 36+ 10.0+×
delete() 49+ 29+ 10+×× 36+ 10.0+×
get() 49+ 29+ 10+×× 36+ 10.0+×
getAll() 49+ 29+ 10+×× 36+ 10.0+×
has() 49+ 29+ 10+×× 36+ 10.0+×
set() 49+ 29+ 10+×× 36+ 10.0+×
sort() 61+ 54+ 11.0+×× 48+ 11.0+×
URLSearchParams() 49+ 29+ 10+×× 36+ 10.0+×
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月20日 (金)
コンテンツを公開しました。