Для повторяющегося параметра URL используйте append(), а для чтения всех значений getAll(). Метод set() задаёт одно значение и убирает остальные значения того же имени. На Mentoring.digital покажем, почему это важно для фильтров с несколькими выбранными пунктами.
Сначала согласуйте формат с сервером
Учебный каталог позволяет выбрать две метки: python и sql. Один возможный контракт запроса: tag=python&tag=sql. Другой сервер может ожидать массив в JSON или особое имя ключа. Сам браузерный класс не определяет контракт вашего API.
До реализации запишите пример запроса и ожидаемый результат на сервере. Затем проверьте, какой формат разбирает используемый backend. Если клиент отправляет повторяющиеся ключи, а обработчик берёт только одно значение, корректная сборка строки на клиенте не решит проблему.
append сохраняет несколько значений
const params = new URLSearchParams();
params.append("tag", "python");
params.append("tag", "sql");
params.set("q", "C++ и базы данных");
console.log(params.getAll("tag"));
console.log(params.toString());Ожидаемый массив: ["python", "sql"]. В строке параметры получают нужное кодирование. Передавайте исходный текст значения, а не результат предварительного encodeURIComponent(), иначе можно закодировать уже закодированную строку ещё раз.
Для фильтра удобно хранить выбранные пункты отдельно и пересобирать запрос из этого состояния. Тогда удаление одной метки не требует ручного поиска подстроки в URL. Проверка также становится проще: сравнивайте набор прочитанных значений с выбранными пунктами.
Когда нужен set и почему get недостаточно
params.set("tag", "frontend");
console.log(params.getAll("tag")); // ["frontend"]Такое действие уместно, если разрешён один пункт. Если нужно сохранить несколько, используйте добавление. get() возвращает первое значение, поэтому не подходит для проверки полного набора.
Не преобразуйте набор с повторяющимися ключами в обычный объект только ради удобства, не проверив последствия: одному имени свойства соответствует одно значение. Для границы между интерфейсом и сервером полезнее явная функция, которая описывает каждый параметр и его кратность.
Пробел и плюс имеют разный смысл
При разборе строки запроса знак + интерпретируется как пробел. Если значением должен быть буквальный плюс, передайте его через append() или set(), чтобы сериализация сохранила этот смысл.
const safe = new URLSearchParams();
safe.set("q", "C++");
const restored = new URLSearchParams(safe.toString());
console.log(restored.get("q")); // C++Для полного адреса сначала создайте new URL(address) и работайте с его searchParams. Не передавайте весь адрес конструктору, который ожидает именно параметры.
Минимальная проверка фильтра
Проверьте отсутствие меток, одну метку, две метки, кириллицу, пробел и буквальный плюс. Затем выполните обратное чтение собранного URL и сравните значения с исходными. Для проверки контракта нужен и тест обработчика на сервере. Разобрать такое взаимодействие поможет наставник по JavaScript.
