Советы по обработке URL-адресов

Сегодня мы узнаем об интерфейсе, предназначенном для обработки URL-запросов: URLSearchParams.

Простота использования

Просто создайте экземпляр URLSearchParams:

let url = '?wd=Maxwell&skill=JavaScript&year=2022';
let searchParams = new URLSearchParams(url);

for (let p of searchParams) {
  console.log(p);
}
// ["wd", "Maxwell"]
// ["skill", "JavaScript"]
// ["year", "2022"]

Получить одно поле

Что, если теперь я просто хочу получить значение одного поля? Просто вызовите метод get этого экземпляра.

searchParams.get('wd') // "Maxwell"
searchParams.get('skill') // "JavaScript"
searchParams.get('year') // "2022"

Иногда я не знаю, существует поле или нет, поэтому я хочу проверить его заранее. Используйте метод has из примера для определения.

searchParams.has('wd') // true
searchParams.has('age') // false

Добавить поля

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

searchParams.append('age', 26);
searchParams.has('age'); // true
searchParams.get('age'); // 26

Удалить поле

Теперь вам больше не нужно поле года, просто используйте удаление напрямую:

searchParams.delete('year');
searchParams.has('year'); // false

Установить поля

Иногда вы хотите переписать поле вместо добавления (добавления) поля, когда вам нужно использовать метод set, например, мы думаем, что Maxwell будет не только JavaScript, но и Python, C++

searchParams.set('skill', 'Python C++ JavaScript');

Преобразовать в строку

После изменения экземпляра иногда вам нужно снова преобразовать его в строку, для перехода по маршруту и ​​т. д., используя метод toString.

searchParams.toString(); // "wd=Maxwell&skill=JavaScript+Ptyhon+C++&year=2022&age=26"

Это все о черной технологии работы URL. Если вам интересны мои статьи, вы можете подписаться на меня。

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу