Как получить параметры из адреса страницы
Короткий ответ
location.search содержит часть адреса после ?. URLSearchParams её читает:
// the address is https://example.com/catalog?category=tea&page=2
const params = new URLSearchParams(window.location.search);
const category = params.get('category'); // 'tea'
const page = Number(params.get('page') ?? 1); // 2Как это работает
Тот же объект работает с любой строкой, поэтому его можно попробовать без браузера:
const params = new URLSearchParams('?category=tea&page=2');
console.log(params.get('category'), params.get('page'));
console.log(params.has('sort'));Результат:
tea 2
falseИзменение параметров
Меняйте параметры через URL и обновляйте адрес через history.replaceState(). Страница не перезагружается:
const url = new URL(window.location.href);
url.searchParams.set('page', '3');
history.replaceState(null, '', url);Частая ошибка
get() возвращает null для отсутствующего параметра, а числа приходят строками. Добавьте значение по умолчанию и преобразуйте тип:
const params = new URLSearchParams('?q=tea');
console.log(params.get('page'));
console.log(Number(params.get('page') ?? 1));Результат:
null
1Функции из этого ответа
- URLSearchParams — Читает и собирает параметры адреса (часть после ?).
- URL — Разбирает адрес на части и собирает его обратно.