JavaScript URLSearchParams: прочитать и изменить query

Категория: JavaScript · Язык: JavaScript · Обновлено:

В JavaScript параметры query string разбирают через URLSearchParams: get() читает значение, set() заменяет его, append() добавляет ещё одно значение. Передавайте строку после ? или используйте new URL() для полного адреса.

Прочитать параметры URL

JavaScript
const params = new URLSearchParams('?page=2&tag=js&tag=sql');
console.log(params.get('page')); // 2
console.log(params.getAll('tag').join(',')); // js,sql

get() возвращает первое значение или null; getAll() нужен для повторяющихся ключей.

Обновить параметр и собрать URL

JavaScript
const url = new URL('https://example.com/search?q=old&page=1');
url.searchParams.set('q', 'длинный запрос');
url.searchParams.delete('page');
console.log(url.search); // ?q=%D0%B4%D0%BB%D0%B8%D0%BD%D0%BD%D1%8B%D0%B9+%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81

URLSearchParams сам кодирует пробелы и специальные символы при сериализации. Не кодируйте значение повторно перед set().

Метод

Поведение

get(key)

Первое значение или null

getAll(key)

Все значения ключа

set(key, value)

Заменить значение и удалить дубли ключа

append(key, value)

Добавить повторяющийся параметр

delete(key)

Удалить ключ

Как прочитать query текущей страницы?

Создайте new URLSearchParams(window.location.search), затем вызовите get('имя').

Почему пробел в URL стал плюсом?

URLSearchParams сериализует пробелы в формате form-urlencoded как +. При разборе значение корректно восстановится.