JavaScriptでクエリ文字列を取得する方法

概要：このチュートリアルでは、JavaScriptでURLSearchParamsを使用してクエリ文字列パラメータを取得する方法を学びます。

クエリ文字列を取得するには、locationオブジェクトのsearchプロパティにアクセスします。

location.search
Code language: CSS (css)

location.searchの値が次の場合を想定します。

'?type=list&page=20'
Code language: JavaScript (javascript)

クエリ文字列を操作するには、URLSearchParamsオブジェクトを使用できます。

const urlParams = new URLSearchParams(location.search);
Code language: JavaScript (javascript)

URLSearchParamsはイテラブルオブジェクトであるため、for...of構文を使用して、クエリ文字列パラメータである要素を反復処理できます。

const urlParams = new URLSearchParams(location.search);

for (const [key, value] of urlParams) {
    console.log(`${key}:${value}`);
}
Code language: JavaScript (javascript)

出力

type:list
page:20
Code language: CSS (css)

便利なURLSearchParamsメソッド

URLSearchParamsには、パラメータのキー、値、およびエントリのイテレータを返すいくつかの便利なメソッドがあります。

• keys()は、パラメータキーを反復処理するイテレータを返します。
• values()は、パラメータ値を反復処理するイテレータを返します。
• entries()は、パラメータの(キー, 値)ペアを反復処理するイテレータを返します。

keys()の例

次の例では、keys()メソッドを使用して、クエリ文字列のすべてのパラメータ名をリストします。

const urlParams = new URLSearchParams('?type=list&page=20');

for (const key of urlParams.keys()) {
    console.log(key);
}
Code language: JavaScript (javascript)

出力

type
page

values()の例

次の例では、keys()メソッドを使用して、クエリ文字列のすべてのパラメータ値をリストします。

const urlParams = new URLSearchParams('?type=list&page=20');

for (const value of urlParams.values()) {
    console.log(value);
}
Code language: JavaScript (javascript)

出力

list
20
Code language: PHP (php)

entries()の例

次の例では、entries()メソッドを使用して、クエリ文字列のパラメータキー/値のすべてのペアをリストします。

const urlParams = new URLSearchParams('?type=list&page=20');

for (const entry of urlParams.entries()) {
    console.log(entry);
}
Code language: JavaScript (javascript)

出力

["type", "list"]
["page", "20"]
Code language: JSON / JSON with Comments (json)

クエリ文字列パラメータが存在するかどうかを確認する

URLSearchParams.has()メソッドは、指定された名前のパラメータが存在する場合はtrueを返します。

const urlParams = new URLSearchParams('?type=list&page=20');

console.log(urlParams.has('type')); // true
console.log(urlParams.has('foo'));  // false
Code language: JavaScript (javascript)

出力

true
false
Code language: JavaScript (javascript)

まとめ

• URLSearchParamsは、クエリ文字列パラメータを操作するためのインターフェースを提供します。
• URLSearchParamsはイテラブルであるため、for...of構文を使用してクエリ文字列パラメータを反復処理できます。
• URLSearchParamsのhas()メソッドは、指定された名前のパラメータが存在するかどうかを判断します。