URLSearchParams — разбираем работу с параметрами URL!
При разработке интерфейсов часто приходится работать с параметрами из адресной строки: фильтры товаров, поиск, сортировка, пагинация или сохранение состояния страницы. Например, есть URL:
https://example.com/products?category=phone&page=2
Здесь category и page — это query-параметры, которые содержат данные для отображения нужного состояния страницы.
Получить всю строку параметров можно через:
const query = window.location.search;
console.log(query);
Результат:
?category=phone&page=2
Но ручной разбор через split() быстро становится неудобным. Нужно самостоятельно обрабатывать специальные символы, проверять наличие значений и учитывать параметры с одинаковыми именами.
Для этого в JavaScript есть стандартный API URLSearchParams. Он позволяет получать, изменять и удалять параметры URL без ручной обработки строк. Создаём объект на основе query-части текущего URL:
const params = new URLSearchParams(
window.location.search
);
Теперь получить значение параметра можно через get():
const category = params.get('category');
console.log(category);
Результат:
phone
Если параметра нет в URL, метод get() вернёт null. Перед чтением значения можно проверить наличие параметра через has():
if (params.has('page')) {
console.log(params.get('page'));
}
Это удобно, когда логика интерфейса зависит от определённых параметров.
URLSearchParams позволяет не только читать данные, но и изменять их. Например, добавим параметр сортировки:
params.set(
'sort',
'price'
);
console.log(
params.toString()
);
Результат:
category=phone&page=2&sort=price
Метод set() заменяет существующее значение или создаёт новый параметр, если его ещё нет.
Для удаления параметров используется delete():
params.delete('page');
Если один параметр может иметь несколько значений, например несколько выбранных тегов, используется getAll():
const params = new URLSearchParams(
'tag=js&tag=css'
);
console.log(
params.getAll('tag')
);
Результат:
['js', 'css']
Для добавления дополнительного значения без замены существующего используется append():
params.append(
'tag',
'html'
);
Также URLSearchParams автоматически кодирует специальные символы. Например:
const params = new URLSearchParams();
params.set(
'search',
'frontend developer'
);
console.log(
params.toString()
);
Результат:
search=frontend+developer
Не нужно вручную вызывать encodeURIComponent() — кодирование выполняется автоматически при преобразовании параметров в строку.
URLSearchParams часто используется вместе с фильтрами, роутингом и состоянием интерфейса. Например, каталог товаров может хранить выбранную категорию, сортировку и текущую страницу прямо в URL. При открытии такой ссылки приложение получает параметры и восстанавливает нужное состояние.
🔥 URLSearchParams — стандартный инструмент JavaScript для работы с query-параметрами, который делает обработку URL проще и избавляет от ручного парсинга строк.
📣 Code Ready | #практика
