JavaScript URL Objects API

При работе в JavaScript могут возникнуть ситуации, когда вам необходимо либо получить информацию из URL, либо манипулировать ею.

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

JavaScript URL API

Позвольте мне продемонстрировать, как это работает.

const url = new URL(
  'https://user:pass@daily-dev-tips.com:3000/folder/page?param=xyz&new=true#title2'
);

Как вы можете видеть, я решил сделать довольно полный URL, в котором происходит много всего.

Если мы зарегистрируем этот URL, то быстро увидим, что получим аккуратный объект с большим количеством информации внутри.

• хэш: Селектор # и все, что за ним #title2.
• host: Домен и необязательный пост daily-dev-tips.com:3000
• hostname: Только домен daily-dev-tips.com
• href: Полный URL, который мы предоставили https://user:pass@daily-dev-tips.com:3000/folder/page?param=xyz&new=true#title2
• origin: Полное происхождение, включая схему https://daily-dev-tips.com:3000
• пароль: Если был предоставлен пароль pass
• pathname: Папка и страницы за слэшем /folder/page
• порт: Какой порт был указан 3000
• протокол: Протокол, который был использован https:
• поиск: Параметры поиска, включая ? и & ?param=xyz&new=true
• searchParams: Объект URLSearchParams, который может быть использован для получения отдельных параметров поиска
• имя пользователя: Указанное имя пользователя user.

Самое интересное, что window.location (объект Location) содержит все эти параметры плюс некоторые дополнительные поля.

При извлечении нескольких полей, быстрый совет — использовать деструктуризацию объекта.

Допустим, мы хотим получить только происхождение, имя пути и поиск.

const { origin, pathname, search } = new URL(link);

console.log(origin + pathname + search);

// https://daily-dev-tips.com:3000/folder/page?param=xyz&new=true

Изменение параметров URL

Мы также можем взять вышеуказанные параметры и быстро обновить их.

Например, если мы хотим изменить местоположение хэша.

url.hash = 'title4';

// https://user:pass@daily-dev-tips.com:3000/folder/page?param=xyz&new=true#title4

Или если мы хотим изменить имя пути.

url.pathname = 'register';

// https://user:pass@daily-dev-tips.com:3000/register?param=xyz&new=true#title4

После модификации объекта вы можете захотеть получить не объект, а целую строку.

Для этого можно использовать метод toString().

url.toString();

JavaScript URL SearchParams

Теперь давайте рассмотрим параметры поиска. Это все элементы, отмеченные после ? или &.

JavaScript SearchParams получение конкретного значения

Чтобы получить только одно конкретное значение, мы используем следующий код:

console.log(url.searchParams.get('param'));
// xyz

Кроме того, мы можем даже получить все значения, если их больше:

console.log(url.searchParams.getAll('param'));
// ["xyz"]

Проверка наличия у SearchParams определенного ключа

В приведенном выше примере мы предполагаем, что у нас есть параметр, но что если мы не уверены?

console.log(url.searchParams.has('param'));
// true
console.log(url.searchParams.has('fake_param'));
// false

Получение всех ключей SearchParams

Но, может быть, мы хотим получить все ключи, чтобы перебирать их вручную?

const keys = url.searchParams.keys();
for (let key of keys) {
  console.log(key);
}
// param
// new

Или, возможно, нам нужны только значения:

const values = url.searchParams.values();
for (let value of values) {
  console.log(value);
}
// xyz
// true

Мы можем даже просто перебрать оба значения:

url.searchParams.forEach(function (value, key) {
  console.log(key, value);
});
// param xyz
// new true

Изменение параметров поиска

Еще один полезный элемент — возможность изменения SearchParams; мы можем добавлять/изменять или удалять их.

Добавить:

url.searchParams.append('search', 'JavaScript');
// search: "?param=xyz&new=true&search=JavaScript"

Установить:

url.searchParams.set('search', 'HTML');
// search: "?param=xyz&new=true&search=HTML"

Или удалить:

url.searchParams.delete('search');
// search: "?param=xyz&new=true"

Сортировка SearchParams

Мы можем даже вызвать sort() для SearchParams, чтобы отсортировать их по алфавиту.

url.searchParams.sort();

Вы можете попробовать все это в следующем CodePen.

Поддержка браузеров

Вы можете безопасно использовать URL API во всех современных браузерах.

Спасибо, что прочитали, и давайте общаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.