URLSearchParams API предоставляет служебные методы для анализа данных из строки запроса URL. Конструктор URLSearchParams() создает новый объект URLSearchParams из строки запроса и возвращает его. Он игнорирует начальный вопросительный знак ? в строке запроса, поэтому мы можем передать строку запроса и без ведущего ?.

// URL: https://myshop.com/mobiles?color=black&sort=price_asc
const search = new URLSearchParams('color=black&sort=price_asc');

Конструктор URLSearchParams() не сможет правильно проанализировать данные, если мы укажем полный URL вместо строки запроса. Если у нас есть полный URL-адрес, мы можем использовать URL API, чтобы извлечь из него строку запроса и передать ее конструктору URLSearchParams().

// Wrong way
const search = new URLSearchParams('https://myshop.com/mobiles?color=black&sort=price');
// Correct way
const url = new URL('https://myshop.com/mobiles?color=black&sort=price');
const search = new URLSearchParams(url.search);
// OR pass the query string directly 
const search = new URLSearchParams('color=black&sort=price');

Вспомогательные методы

Служебные методы URLSearchParams позволяют легко получить доступ к параметрам запроса, а также позволяют добавлять новые или изменять любые существующие параметры. Давайте изучим их все.

Метод получить()

Этот метод принимает имя параметра запроса и возвращает значение первого совпадения. Если совпадений не найдено, возвращается null.

const search = new URLSearchParams('color=black&sort=price_asc&color=red');
console.log(search.get('color')); // 'black'
console.log(search.get('brand')); // null

Метод getAll()

Этот метод принимает имя параметра запроса и возвращает все связанные значения в виде массива. Если совпадений не найдено, возвращается пустой массив.

const search = new URLSearchParams('color=black&sort=price_asc&color=red');
console.log(search.getAll('color')); // ['black', 'red']
console.log(search.getAll('sort')); // ['price_asc']
console.log(search.getAll('brand')); // []

Метод has()

Этот метод проверяет, присутствует ли предоставленный параметр в строке запроса или нет. Если параметр существует, он возвращает true, в противном случае возвращает false.

const search = new URLSearchParams('color=black&sort=price_asc');
console.log(search.has('sort')); // true
console.log(search.has('brand')); // false

Метод forEach()

Этот метод позволяет перебирать все значения параметров запроса.

const search = new URLSearchParams("color=black&sort=price_asc");
search.forEach((value, key) => console.log(key, value));
// color black
// sort price_asc

Метод ключей ()

Этот метод возвращает объект Iterator, содержащий все имена параметров запроса. Мы можем либо использовать цикл for…of для перебора этого объекта Iterator, либо преобразовать его в массив с помощью оператора распространения или метода Array.from().

const search = new URLSearchParams("color=black&sort=price_asc");
for (const key of search.keys()) {
  console.log(key);
}
/* -output-
    color
    sort
*/
// convert to Array
console.log([...search.keys()]); // ['color', 'sort']
// OR
console.log(Array.from(search.keys())); // ['color', 'sort']

Метод значений()

Этот метод возвращает объект Iterator, содержащий все значения параметров запроса.

const search = new URLSearchParams("color=black&sort=price_asc");
console.log([...search.values()]); // ['black', 'price_asc']

Метод записи ()

Этот метод возвращает объект Iterator, содержащий все пары ключ-значение параметра запроса и их значения.

const search = new URLSearchParams("color=black&sort=price_asc");
console.log([...search.entries()]); 
// [['color', 'black'], ['sort', 'price_asc']]

Метод добавления()

Этот метод добавляет новый параметр запроса со значением к существующей строке запроса.

const search = new URLSearchParams('color=black&sort=price_asc');
search.append('brand', 'apple');
console.log(search.toString()); 
// 'color=black&sort=price_asc&brand=apple'

Метод set()

Этот метод заменяет любое существующее значение параметра запроса предоставленным, а если предоставленный параметр не существует, он добавляет его. Если для предоставленного параметра присутствует несколько вхождений, он удаляет их и заменяет только первое значение.

const search = new URLSearchParams('color=black&sort=price_asc&color=red');
search.set('sort', 'popularity');
search.set('color', 'green');
search.set('brand', 'apple');
console.log(search.toString()); 
// 'color=green&sort=popularity&brand=apple'

Метод удаления ()

Этот метод удаляет все записи, связанные с предоставленным ключом параметра запроса.

search = new URLSearchParams('color=black&sort=price_asc&color=red');
search.delete('color');
search.delete('brand');
console.log(search.toString()); // 'sort=price_asc'

Метод сортировки ()

Этот метод сортирует строку запроса по ключам, и если присутствует несколько ключей с одинаковым именем, то их относительный порядок будет сохранен.

const search = new URLSearchParams('sort=price&ram=8gb&color=red&ram=4gb');
search.sort();
console.log(search.toString()); 
// color=red&ram=8gb&ram=4gb&sort=price

Вам также может понравиться

Спасибо, что уделили время :)
Амитав Мишра

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.