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
Вам также может понравиться
- URL API в JavaScript
- Отправлять push-уведомления с помощью Notification API в JavaScript
- Воспроизведение аудио с помощью HTMLAudioElement API в JavaScript
- Карта в JavaScript и когда это лучший выбор, чем Object
- Различные способы проверки наличия ключа в объекте в JavaScript
- Генератор функций в JavaScript
- Краткий путеводитель по промисам в JavaScript
- API вибрации в JavaScript
- JavaScript Fetch API для выполнения HTTP-запросов
- 20+ советов и приемов по написанию сокращенного кода на JavaScript
Спасибо, что уделили время :)
Амитав Мишра
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.