JavaScript URL.searchParams — параметри адреси об'єктом

Властивість searchParams віддає параметри адреси як готовий об'єкт URLSearchParams.

правити

Загальний опис

Найважливіше — зв'язок двобічний. Зміна параметра через searchParams.set() одразу оновлює url.href і url.search. Це не копія, а вікно в ту саму адресу.

Звідси зручний рецепт побудови посилань: беремо адресу, міняємо потрібні параметри, віддаємо url.href — не склеюючи рядків і не думаючи про екранування.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
searchParams	49+	29+	10.1+	36+	17+	-

Підтримка: мобільні переглядачі

Переглядач
searchParams	49+	yes	yes	10.3+

Приклади

+ запропонувати свій приклад у пісочниці

<a id="next">Наступна сторінка</a>

const url = new URL('https://css.in.ua/publications?sort=old');

// зв'язок двобічний: адреса оновиться сама
url.searchParams.set('page', '3');
url.searchParams.delete('sort');

console.log(url.href); // …/publications?page=3

// готове посилання без склеювання рядків
document.getElementById('next').href = url.href;

// нова адреса в браузері без перезавантаження; у пісочниці — заборонено
try {
    history.pushState({}, '', url.pathname + url.search);
} catch (error) {
    console.log('pushState у пісочниці:', error.name);
}