【JavaScript】URLのクエリパラメータを取得する【URLSearchParams】

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでURLのクエリパラメータを取得する方法をご紹介しています。

URLのクエリパラメータを取得したいんだけど、どうすればいいのかな？

上記の疑問にお答えしています。

では、解説していきます。

URLのクエリパラメータを取得する

URLオブジェクトでURLからクエリを取得し、URLSearchParamasオブジェクトでURLのクエリパラメータを取得します。

下記のURLからクエリパラメータを取得してみます。

https://into-the-program.com/?a=100&b=200&c=300

JS

const url = new URL('https://into-the-program.com?a=100&b=200&c=300');

const params = new URLSearchParams(url.search);
for(let param of params){

    console.log(param);

}

実行結果

["a", "100"]

["b", "200"]

["c", "300"]

URLSearchParamasはオブジェクトを返します。そのためfor...ofですべてのキーと値のペアを列挙することができます。

URLSearchParams.get()でキーを指定して値を取得する

前項ではクエリパラメータを取得してループですべてのキーと値のペアを出力しましたが、URLSearchParams.get()でキーを指定して値だけを取得することも可能です。URLSearchParams.get()は引数に指定した文字列と最初に一致するキーの値を返します。

JS

const url = new URL('https://into-the-program.com?a=100&b=200&c=300');

const params = new URLSearchParams(url.search);
console.log(params.get('a'));

console.log(params.get('b'));

console.log(params.get('c'));

実行結果

"100"

"200"

"300"

実行結果は想定した通りですね。指定したキーの値が出力されています。

URLSearchParamsには他にも便利なメソッドが用意されている

本記事ではURLSearchParamsの一部メソッドした使用していないですが、他にも便利なメソッドが用意されています。

下記はURLSearchParamsのメソッド一覧です。クエリパラメータの処理であればURLSearchParamsさえあれば対応できるかと思います。

URLSearchParamsのメソッド一覧

URLSearchParams.append(key, value)	引数に指定されたキーと値を新しい検索パラメータとして追加する
URLSearchParams.delete(key)	指定されたキーと一致するすべてのキーとキーの値をパラメータから削除する
URLSearchParams.entries()	オブジェクトに含まれるキーと値のペアを列挙するイテレータを返す
URLSearchParams.forEach()	コールバック関数を介して、オブジェクトに含まれるすべての値を返す
URLSearchParams.get(key)	引数に指定されたキーと一致する最初のキーの値を返す
URLSearchParams.getAll(key)	引数に指定されたキーと一致するすべてのキーの値を返す
URLSearchParams.has(key)	引数に指定されたキーが存在するか真偽値(true\|false)を返す
URLSearchParams.keys()	オブジェクトに含まれるキーを列挙するイテレータを返す
URLSearchParams.set(key, value)	引数に指定されたキーと値をパラメータに設定する。同名の値が存在していた場合は削除される
URLSearchParams.sort()	キーを基準にソートする
URLSearchParams.toString()	クエリパラメータを返す
URLSearchParams.values()	オブジェクトに含まれるキーの値を列挙するイテレータを返す