Бесплатная консультация юриста

+7 (800) 301-07-30

Реклама jurik.ru

Query string (строка запроса) – часть URL, расположенная после знака ? и содержащая пары ключ‑значение, разделенные символом &. Она широко используется для передачи параметров между страницами, фильтрации данных, работы с API и т.д. В этой статье мы подробно рассмотрим, как парсить и изменять query string средствами чистого JavaScript, а также покажем альтернативные подходы с использованием современного URL‑API.

Содержание

Что такое query string и где он используется
Как получить текущий query string
Методы парсинга query string
- Ручной парсинг через строку
- Использование URL и URLSearchParams
- Регулярные выражения (не рекомендуется)
Изменение query string
- Добавление нового параметра
- Обновление существующего параметра
- Удаление параметра
- Полная замена query string
Практические примеры
Браузерная совместимость и полифиллы
Рекомендации и лучшие практики

Что такое query string и где он используется

Query string формирует часть URL после символа ?. Например, в URL:

https://example.com/products?category=books&sort=price&page=2

query string выглядит так:

category=books&sort=price&page=2

Он удобно используется для:

Передачи данных между страницами без использования серверного состояния;
Фильтрации и сортировки списков (например, в интернет‑магазинах);
Хранения состояния UI (вкладки, открытые фильтры и т.п.);
Взаимодействия с публичными API, где параметры передаются через GET‑запрос.

Как получить текущий query string

В браузере текущий URL доступен через свойство window.location. Сам query string находится в location.search и включает ведущий знак ?.

console.log(window.location.search);
// Выведет, например: "?category=books&sort=price&page=2"

Если нужно избавиться от ведущего ?, достаточно выполнить slice(1):

const queryString = window.location.search.slice(1);

Методы парсинга query string

Ручной парсинг через строку

Самый простой способ – разбить строку по &, затем каждую пару по = и декодировать компоненты с помощью decodeURIComponent.

function parseQueryStringManual(qs) {
 const params = {};
 qs.split('&').forEach(pair => {
 if (pair === '') return;
 const [key, value] = pair.split('=');
 params[decodeURIComponent(key)] = decodeURIComponent(value || '');
 });
 return params;
}

// Пример использования
const qs = window.location.search.slice(1);
const params = parseQueryStringManual(qs);
console.log(params); // {category: "books", sort: "price", page: "2"}

Минусы этого подхода:

Не обрабатывает случаи, когда значение отсутствует (key без =);
Не поддерживает множественные значения одного ключа (color=red&color=blue);
Требует ручного декодирования.

Использование `URL` и `URLSearchParams`

Современный способ – воспользоваться встроенным объектом URL (доступен во всех современных браузерах) и его свойством searchParams типа URLSearchParams. Этот подход автоматически декодирует значения и предоставляет удобный API для работы с параметрами.

const url = new URL(window.location.href);
const params = url.searchParams; // объект URLSearchParams

// Получить значение параметра
console.log(params.get('category')); // "books"

// Получить все значения параметра (если их несколько)
console.log(params.getAll('color')); // ["red", "blue"] если такие параметры есть

// Перебрать все параметры
for (const [key, value] of params) {
 console.log(`${key}: ${value}`);
}

Преимущества:

Автоматическое decodeURIComponent;
Поддержка множественных значений;
Методы append, set, delete, has;
Возможность легко получить обновлённую строку через params.toString.

Регулярные выражения (не рекомендуется)

Технически можно извлечь параметры с помощью regex, но такой подход хрупок, трудно читается и не рекомендуется для production‑кода.

function parseQueryStringRegex(qs) {
 const params = {};
 const regex = /([^&=]+)=?([^&]*)/g;
 let match;
 while ((match = regex.exec(qs)) !== null) {
 params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
 }
 return params;
}

Мы упоминаем его лишь для полноты обзора; в реальных проектах лучше использовать URLSearchParams.

Изменение query string

После того как мы получили объект URLSearchParams, изменять параметры становится тривиально.

Добавление нового параметра

Если параметр с таким именем ещё не существует – используем append (добавит в конец) или set (заменит существующее значение, если оно есть).

const url = new URL(window.location.href);
url.searchParams.append('utm_source', 'newsletter');
// Добавит ?utm_source=newsletter в конец существующей строки
history.replaceState(null, '', url.toString);

Обновление существующего параметра

Метод set перезаписывает значение параметра, удаляя все его дубликаты.

url.searchParams.set('page', '3');
// Теперь параметр page будет равен 3, даже если был несколько раз
history.replaceState(null, '', url.toString);

Удаление параметра

url.searchParams.delete('sort');
// Удалит параметр sort полностью
history.replaceState(null, '', url.toString);

Полная замена query string

Иногда удобно полностью заменить строку запроса, например, при смене маршрута в SPA.

const newParams = new URLSearchParams;
newParams.append('tab', 'profile');
newParams.append('view', 'list');

const url = new URL(window.location.href);
url.search = newParams.toString; // автоматически добавит ведущий '?'
history.pushState(null, '', url.toString);

Обратите внимание, что мы использовали history.replaceState или history.pushState, чтобы изменить URL без перезагрузки страницы (важное для‑page приложений).

Практические примеры

Пример 1: Чтение фильтров из URL и применение к таблице

// Предположим, у нас есть таблица с данными и мы хотим отфильтровать её по параметрам URL
function applyFiltersFromURL {
 const url = new URL(window.location.href);
 const params = url.searchParams;

 const category = params.get('category') || '';
 const sort = params.get('sort') || 'name';
 const page = parseInt(params.get('page')) || 1;
 // Здесь вызываем свою функцию рендера таблицы с полученными значениями
 renderTable({category, sort, page});
}

// Вызов при загрузке страницы и при каждом изменении URL (например, через popstate)
window.addEventListener('load', applyFiltersFromURL);
window.addEventListener('popstate', applyFiltersFromURL);

Пример 2: Обновление параметра без перезагрузки

function updatePageNumber(newPage) {
 const url = new URL(window.location.href);
 url.searchParams.set('page', newPage);
 history.pushState(null, '', url.toString);
 // После изменения URL можно инициировать запрос новых данных
 fetchDataForPage(newPage);
}

// Пример использования: клик по кнопке "Следующая страница"
document.getElementById('nextBtn').addEventListener('click',  => {
 const currentPage = parseInt(new URL(window.location.href).searchParams.get('page')) || 1;
 updatePageNumber(currentPage + 1);
});

Пример 3: Удаление всех UTM‑меток

function cleanUTM {
 const url = new URL(window;location;href);
 const params = url.searchParams;

 // Список известных UTM‑параметров
 const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
 utmKeys.forEach(key => params.delete(key));

 history.replaceState(null, '', url.toString);
}

// Вызываем, например, после загрузки страницы, чтобы очистить URL от меток
cleanUTM;

Браузерная совместимость и полифиллы

Объекты URL и URLSearchParams поддерживаются во всех современных браузерах (Chrome, Firefox, Safari, Edge) и в Node.js начиная с версии 10.0. Для старых браузеров (IE11 и ниже) можно воспользоваться полифиллами:

ungap/url-search-params – лёгкий полифилл для URLSearchParams;
finom/polyfill-url – полифилл для полного URL.

Если поддержка IE обязательна и подключать полифиллы нежелательно, можно fallback‑вариант с ручным парсингом (см. раздел Ручной парсинг через строку).