Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Как получить параметры из адреса страницы

Короткий ответ

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 — Разбирает адрес на части и собирает его обратно.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.