Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

URL JS: Синхронная асинхронность

При работе с http возникает потребность в библиотеках, позволяющих манипулировать частями адресов, разбирать их, а также собирать обратно. Node.js предоставляет такие модули из коробки.

Url

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

import url from 'url';

const { URL } = url;

const parsedURL = new URL('http://user:pass@host.com:8080/p/a/t/h?query=string#hash');
// URL {
//   href: 'http://user:pass@host.com:8080/p/a/t/h?query=string#hash',
//   origin: 'http://host.com:8080',
//   protocol: 'http:',
//   username: 'user',
//   password: 'pass',
//   host: 'host.com:8080',
//   hostname: 'host.com',
//   port: '8080',
//   pathname: '/p/a/t/h',
//   search: '?query=string',
//   searchParams: URLSearchParams { 'query' => 'string' },
//   hash: '#hash'
// }

То же самое можно визуализировать:

┌─────────────────────────────────────────────────────────────────────────────┐
│                                    href                                     │
├──────────┬┬───────────┬─────────────────┬───────────────────────────┬───────┤
│ protocol ││   auth    │      host       │           path            │ hash  │
│          ││           ├──────────┬──────┼──────────┬────────────────┤       │
│          ││           │ hostname │ port │ pathname │     search     │       │
│          ││           │          │      │          ├─┬──────────────┤       │
│          ││           │          │      │          │ │    query     │       │
"  http:   // user:pass @ host.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          ││           │          │      │          │ │              │       │
└──────────┴┴───────────┴──────────┴──────┴──────────┴─┴──────────────┴───────┘

    (all spaces in the "" line should be ignored -- they're purely for formatting)

Как видно, этот модуль дал нам возможность извлечь query params из адреса, но в виде строки. Дальше, как вы уже догадались, нам понадобится еще один модуль - querystring.

Querystring

Он также входит в поставку Node.js и работает очень просто:

import querystring from 'querystring';

const str = 'w=%D1%8D%D1%80%D0%BB%D0%B0%D0%BD%D0%B3&foo=bar';

querystring.parse(str);
// { w: 'эрланг', foo: 'bar' }

querystring.stringify({ w: 'эрланг', foo: 'bar' });
// w=%D1%8D%D1%80%D0%BB%D0%B0%D0%BD%D0%B3&foo=bar

Здесь необходимо сделать пояснение. Спецификация http разрешает использовать в адресах только те символы, которые входят в ASCII character-set. Возникает вопрос: как быть, если у нас есть другие символы? А для этого применяется специальное кодирование, называемое url encoding. Например, слово скрипт будет закодировано в строку: %D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82.

Модуль querystring делает кодирование/декодирование автоматически, это видно в примере выше. Но если вам вдруг понадобилось делать это руками, то js спешит на помощь:

encodeURI('эрланг');
// %D1%8D%D1%80%D0%BB%D0%B0%D0%BD%D0%B3

decodeURI('%D1%8D%D1%80%D0%BB%D0%B0%D0%BD%D0%B3');
// эрланг

А теперь собираем все вместе:

import querystring from 'querystring';

const url = 'https://hexlet.io/?q=%D1%8D%D1%80%D0%BB%D0%B0%D0%BD%D0%B3';
const { search } = new URL(url);
const qs = querystring.parse(search);
console.log(qs['?q']); // => 'эрланг'

Кроме ручного превращения строки в объект через querystring можно воспользоваться классом URLSearchParams:

const url = 'https://hexlet.io/?q=%D1%8D%D1%80%D0%BB%D0%B0%D0%BD%D0%B3';
const { searchParams } = new URL(url);
const query = Object.fromEntries(searchParams); // превращение в объект
console.log(query); // => { q: 'эрланг' }

Обратная задача – конструирование адреса выполняется через создание объекта URL и его наполнение:

const url = new URL('/my', 'https://hexlet.io');
url.searchParams.set('page', 5);
console.log(url.toString()); // https://hexlet.io/my?page=5

Для более полного понимания работы этих объектов и методов нужно смотреть в документацию и экспериментировать.


Дополнительные материалы

  1. Документация по URL
  2. Документация по querystring
  3. Документация по URLSearchParams

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

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

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»