URLSearchParams()
URLSearchParams()
コンストラクターは、新しい URLSearchParams
オブジェクトを作成して返します。
注: この機能は Web Worker 内で利用可能です
構文
new URLSearchParams()
new URLSearchParams(options)
パラメーター
options
省略可-
以下のいずれか。
戻り値
URLSearchParams
のインスタンスです。
例
以下の例では、様々な入力から URLSearchParams
オブジェクトを生成する方法を示します。
// url.search からパラメーターを取得し、コンストラクターに渡す
const url = new URL('https://example.com?foo=1&bar=2');
const params1 = new URLSearchParams(url.search);
// URL オブジェクトから直接 URLSearchParams オブジェクトを取得する
const params1a = url.searchParams
// 文字列リテラルを渡す
const params2 = new URLSearchParams("foo=1&bar=2");
const params2a = new URLSearchParams("?foo=1&bar=2");
// ペアの列を渡す
const params3 = new URLSearchParams([["foo", "1"], ["bar", "2"]]);
// レコードを渡す
const params4 = new URLSearchParams({"foo": "1", "bar": "2"});
この例では、検索パラメーターを持つ既存の URL から、検索パラメーターを表すオブジェクトを用い、新しい URL を構築する方法を示します。
const url = new URL('https://example.com/?a=hello&b=world');
console.log(url.href);
// https://example.com/?a=hello&b=world
console.log(url.origin);
// https://example.com
const add_params = {
c: 'a',
d: new String(2),
e: false.toString(),
}
const new_params = new URLSearchParams([
...Array.from(url.searchParams.entries()), // [["a","hello"],["b","world"]]
...Object.entries(add_params), // [["c","a"],["d","2"],["e","false"]]
]).toString();
console.log(new_params);
// a=hello&b=world&c=a&d=2&e=false
const new_url = new URL(`${url.origin}${url.pathname}?${new_params}`);
console.log(new_url.href);
// https://example.com/?a=hello&b=world&c=a&d=2&e=false
// (URL, Record<string, string>) を受け取る関数の形式で
const addSearchParams = (url, params = {}) =>
new URL(
`${url.origin}${url.pathname}?${new URLSearchParams([
...Array.from(url.searchParams.entries()),
...Object.entries(params),
])}`
);
仕様
Specification |
---|
URL Standard # dom-urlsearchparams-urlsearchparams |
ブラウザーの互換性
BCD tables only load in the browser