JavaScript URLSearchParams — параметри рядка запиту

URLSearchParams читає й будує параметри рядка запиту — те, що йде після знака питання: ?page=2&sort=new.

правити

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

Раніше це різали рядок по & і = вручну — і щоразу забували про екранування, через що пробіл чи кирилиця ламали посилання.

Тепер це об'єкт із методами: get(), set(), append(), delete(). Екранування він робить сам, в обидва боки.

Один нюанс, який дивує: один ключ може повторюватись (?tag=css&tag=js). Тому get() віддає перше значення, а всі — getAll().

Для читання параметрів поточної сторінки є готовий екземпляр: location.search віддається йому в конструктор, або просто new URL(location).searchParams.

правити

Порада

new URLSearchParams(new FormData(form)) перетворює форму на рядок запиту одним рядком — зручно для фільтрів, які мають лишатись у посиланні.

автор: NagarD правити

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

Синтаксис

const params = new URLSearchParams(location.search);

методи

властивості

Переглядачі

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

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

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

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

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

Приклади

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

// ?tag=css&tag=js&page=2
const params = new URLSearchParams(location.search);

console.log(params.get('page'));  // '2' — завжди рядок
console.log(params.getAll('tag')); // ['css', 'js'] — ключ може повторюватись

params.set('page', '3');
params.append('tag', 'html');
params.delete('sort');

console.log(params.toString()); // 'tag=css&tag=js&page=3&tag=html'

// екранування — саме собою
const q = new URLSearchParams({ q: 'css селектор' });
console.log(q.toString()); // 'q=css+%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80'