クエリ文字列（URLパラメーター）を作成したり操作する

クエリ文字列（URLパラメーター）を作成したり操作をするには、URLSearchParamsオブジェクトを使用します。
URLSearchParamsオブジェクトは、クエリ文字列（URLパラメーター）を新規に作成したり、クエリ文字列（URLパラメーター）を解析して、編集や取得などの操作を行うことができます。

  • ※ IEは全てのバージョンに対応していません。
目次
  1. 作成または解析
  2. キーが存在するか判定
  3. キーから値を取得
  4. キーから値を全て取得
  5. キーと値を繰り返す
  6. キーと値を追加
  7. 値を上書き
  8. キーを削除
  9. 全てのキーを取得
  10. 全ての値を取得
  11. 全てを結合して1つの文字列として取得

作成または解析

作成または解析するには、URLSearchParamsオブジェクトを使用します。

構文

ES5

var obj = new URLSearchParams([queryString]);

ES6以降

let obj = new URLSearchParams([queryString]);

引数

引数名 型 説明
第一引数 queryString string|object 作成するキーと値のペアのオブジェクトまたは解析を行うクエリ文字列（URLパラメーター）。
解析する文字列で指定する場合は先頭に「?」が付いていても問題ない。
ただし、必ずクエリ文字列（URLパラメーター）だけを指定する必要があり、URLやパス、ハッシュフラグメントなどを含むと正しい結果を得ることができない。

戻り値

生成されたインスタンスのオブジェクトを返します。

サンプルコード

JavaScript (ES5)

// 新規のクエリ文字列（URLパラメーター）を作成（空）
var params = new URLSearchParams();

// 新規のクエリ文字列（URLパラメーター）を作成（初期値を設定）
var params = new URLSearchParams({
	foo : 'abc',
	bar : 123
});

// 文字列から解析（任意の文字列から）
var params = new URLSearchParams('?foo=abc&bar=123');

// 文字列から解析（現在ページから）
var params = new URLSearchParams(location.search);

JavaScript (ES6以降)

// 新規のクエリ文字列（URLパラメーター）を作成（空）
let params = new URLSearchParams();

// 新規のクエリ文字列（URLパラメーター）を作成（初期値を設定）
let params = new URLSearchParams({
	foo : 'abc',
	bar : 123
});

// 文字列から解析（任意の文字列から）
let params = new URLSearchParams('?foo=abc&bar=123');

// 文字列から解析（現在ページから）
let params = new URLSearchParams(location.search);

キーが存在するか判定

キーが存在するか判定するには、URLSearchParams.hasメソッドを使用します。

構文

ES5

var result = URLSearchParams.has(key);

ES6以降

let result = URLSearchParams.has(key);

引数

引数名 型 説明
引数
必須		 key string 検索するキー。

戻り値

見つかったらtrue、見つからなかったらfalseを返します。

サンプルコード

JavaScript (ES5)

var params = new URLSearchParams('?foo=abc&bar=123');

alert(params.has('bar')); // true

JavaScript (ES6以降)

let params = new URLSearchParams('?foo=abc&bar=123');

console.log(params.has('bar')); // true

キーから値を取得

キーから値を取得するには、URLSearchParams.getメソッドを使用します。

構文

ES5

var result = URLSearchParams.get(key);

ES6以降

let result = URLSearchParams.get(key);

引数

引数名 型 説明
引数
必須		 key string 検索するキー。

戻り値

見つかったら対象の値、見つからなかった場合はnullを返します。
複数の同じキーが存在していた場合は、最初に一致したキーの値を返します。

サンプルコード

JavaScript (ES5)

var params = new URLSearchParams('?foo=abc&bar=123');

alert(params.get('bar')); // 123

JavaScript (ES6以降)

let params = new URLSearchParams('?foo=abc&bar=123');

console.log(params.get('bar')); // 123

キーから値を全て取得

キーから値を全て取得するには、URLSearchParams.getAllメソッドを使用します。

構文

ES5

var result = URLSearchParams.getAll(key);

ES6以降

let result = URLSearchParams.getAll(key);

引数

引数名 型 説明
引数
必須		 key string 検索するキー。

戻り値

見つかったら対象の全ての値を配列で、見つからなかった場合は空の配列を返します。

サンプルコード

JavaScript (ES5)

var params = new URLSearchParams('?foo=abc&bar=123&foo=def');

alert(params.getAll('foo').join(', ')); // abc, def

JavaScript (ES6以降)

let params = new URLSearchParams('?foo=abc&bar=123&foo=def');

console.log(params.getAll('foo')); // ['abc', 'def']

キーと値を繰り返す

キーと値を繰り返すには、URLSearchParams.forEachメソッドを使用します。

構文

URLSearchParams.forEach(callback);

引数

引数名 型 説明
引数
必須		 callback function 1つ1つのキーと値のペアごとに処理を実行する関数。
関数の引数は第一引数に値、第二引数にキーを取得することができる。 
function(value, key) {
	...
}

サンプルコード

JavaScript (ES5)

var params = new URLSearchParams('?foo=abc&bar=123');

var str = '';

params.forEach(function(value, key) {
	str += 'key: ' + key + '、value: ' + value;
});

alert(str);

JavaScript (ES6以降)

let params = new URLSearchParams('?foo=abc&bar=123');

params.forEach((value, key) => {
	console.log(`key: ${key}、value: ${value}`);
});

キーと値を追加

キーと値を追加するには、URLSearchParams.appendメソッドを使用します。

構文

URLSearchParams.append(key, value);

引数

引数名 型 説明
引数
必須		 key string 設定するキー。
引数
必須		 value string 設定する値。

サンプルコード

JavaScript (ES5)

var params = new URLSearchParams('foo=abc');

params.append('bar', 123);

params.append('foo', 'def');

JavaScript (ES6以降)

let params = new URLSearchParams('foo=abc');

params.append('bar', 123);

params.append('foo', 'def');

値を設定あるいは上書き

値を設定あるいは上書きするには、URLSearchParams.setメソッドを使用します。
設定するキーが既に存在していた場合は上書きされ、存在していない場合は追加されます。

構文

URLSearchParams.set(key, value);

引数

引数名 型 説明
引数
必須		 key string 設定するキー。
引数
必須		 value string 設定する値。

サンプルコード

JavaScript (ES5)

var params = new URLSearchParams('foo=abc');

params.set('bar', 123);

params.set('foo', 'def');

JavaScript (ES6以降)

let params = new URLSearchParams('foo=abc');

params.set('bar', 123);

params.set('foo', 'def');

キーを削除

キーを削除するには、URLSearchParams.deleteメソッドを使用します。

構文

URLSearchParams.delete(key);

引数

引数名 型 説明
引数
必須		 key string 削除する対象のキー。

戻り値

サンプルコード

JavaScript (ES5)

var params = new URLSearchParams('?foo=abc&bar=123');

params.delete('foo');

JavaScript (ES6以降)

let params = new URLSearchParams('?foo=abc&bar=123');

params.delete('foo');

全てのキーを取得

全てのキーを取得するには、URLSearchParams.keysメソッドを使用します。

構文

ES5

var keys = URLSearchParams.keys();

ES6以降

let keys = URLSearchParams.keys();

戻り値

見つかったすべてのキーをイテレーターで返します。

サンプルコード

JavaScript (ES5)

var params = new URLSearchParams('?foo=abc&bar=123');

var str = '';

for (var key of params.keys()) {
	str += key;
}

alert(str);

JavaScript (ES6以降)

let params = new URLSearchParams('?foo=abc&bar=123');

for (let key of params.keys()) {
	console.log(key);
}

全ての値を取得

全ての値を取得するには、URLSearchParams.valuesメソッドを使用します。

構文

ES5

var values = URLSearchParams.values();

ES6以降

let values = URLSearchParams.values();

戻り値

見つかったすべての値をイテレーターで返します。

サンプルコード

JavaScript (ES5)

var params = new URLSearchParams('?foo=abc&bar=123');

var str = '';

for (var val of params.values()) {
	str += val;
}

alert(str);

JavaScript (ES6以降)

let params = new URLSearchParams('?foo=abc&bar=123');

for (let val of params.values()) {
	console.log(val);
}

全てを結合して1つの文字列として取得

全てを結合して1つの文字列として取得するには、URLSearchParams.toStringメソッドを使用します。

構文

ES5

var result = URLSearchParams.toString();

ES6以降

let result = URLSearchParams.toString();

戻り値

結合されたクエリ文字列（URLパラメーター）を返します。
先頭に「?」は付きません。

サンプルコード

JavaScript (ES5)

var params = new URLSearchParams({
	foo : 'abc'
});

params.append('bar', 123);
params.append('baz[]', 'aaa');
params.append('baz[]', 'bbb');

alert(params.toString()); // foo=abc&bar=123&baz%5B%5D=aaa&baz%5B%5D=bbb

JavaScript (ES6以降)

let params = new URLSearchParams({
	foo : 'abc'
});

params.append('bar', 123);
params.append('baz[]', 'aaa');
params.append('baz[]', 'bbb');

console.log(params.toString()); // foo=abc&bar=123&baz%5B%5D=aaa&baz%5B%5D=bbb

JavaScript逆引きリファレンス一覧へ戻る