Как получить строку запроса в JavaScript

Краткое описание: в этом уроке вы узнаете, как использовать URLSearchParams для получения параметров строки запроса в JavaScript.

Для получения строки запроса вы можете обратиться к свойству search объекта location:

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 для итерации параметров строки запроса.
• Метод has() метода URLSearchParams определяет, существует ли параметр с указанным именем.