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

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

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

location.search

Предполагая, что значение location.search равно:

'?type=list&page=20'

Для работы со строкой запроса можно использовать объект URLSearchParams.

const urlParams = new URLSearchParams(location.search);

URLSearchParams — это повторяемый объект, поэтому вы можете использовать структуру for...of для перебора его элементов, которые являются параметрами строки запроса:

const urlParams = new URLSearchParams(location.search);

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

Выход:

type:list
page:20

Полезные методы

У URLSearchParams есть несколько полезных методов, которые возвращают итераторы ключей, значений и записей параметров:

• keys() возвращает итератор, который перебирает ключи параметров.
• values() возвращает итератор, который перебирает значения.
• entries() возвращает итератор, который выполняет итерацию по парам (ключ, значение) параметров.

keys()

В следующем примере метод keys() используется для вывода списка всех имен параметров строки запроса:

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

for(const key of urlParams.keys()) {
    console.log(key);
}

Выход:

type
page

values()

В следующем примере метод keys() используется для вывода списка всех значений параметров строки запроса:

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

for(const value of urlParams.values()) {
    console.log(value);
}

Выход:

list
20

entries()

В следующем примере используется метод entries() для вывода списка всех пар ключ/значение параметра строки запроса:

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

for(const entry of urlParams.entries()) {
    console.log(entry);
}

Выход:

["type", "list"]
["page", "20"]

Проверьте, существует ли параметр строки запроса

Метод URLSearchParams.has() возвращает значение true, если существует параметр с указанным именем.

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

console.log(urlParams.has('type')); // true
console.log(urlParams.has('foo'));  // false

Выход

true
false

Заключение

• URLSearchParams предоставляет интерфейс для работы с параметрами строки запроса.
• URLSearchParams является итерируемым, поэтому вы можете использовать конструкцию for...of для итерации по параметрам строки запроса.
• Метод has() объекта URLSearchParams определяет, существует ли параметр с указанным именем.