URL

Интерфейс URL используется для разбора, построения, нормализации и кодирования URL. Он работает, предоставляя свойства, которые позволяют легко читать и изменять компоненты URL.

Обычно новый объект URL создается путем указания URL в качестве строки при вызове его конструктора или путем предоставления относительного URL и базового URL. Затем вы можете легко прочитать разобранные компоненты URL или внести изменения в URL.

URL()

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

hash

Строка, содержащая '#' и идентификатор фрагмента URL.

host

Строка, содержащая домен (т. е. имя хоста), за которым следует (если был указан порт) ':' и порт URL.

hostname

Строка, содержащая домен URL.

href

Строковое представление, возвращающее строку, содержащую весь URL.

origin Только чтение

Возвращает строку, содержащую начало URL, т. е. его схему, домен и порт.

password

Строка, содержащая пароль, указанный перед именем домена.

pathname

Строка, содержащая начальный '/' за которым следует путь URL, не включая строку запроса или фрагмент.

port

Строка, содержащая номер порта URL.

protocol

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

search

Строка, обозначающая строку параметров URL; если параметры указаны, эта строка включает все из них, начиная с ведущего символа ?.

searchParams Только чтение

Объект URLSearchParams, который можно использовать для доступа к отдельным параметрам запроса, найденным в search.

username

Строка, содержащая имя пользователя, указанное перед именем домена.

canParse()

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

createObjectURL()

Возвращает строку, содержащую уникальный URL объекта BLOB, т. е. URL со схемой blob:, за которой следует некоторая уникальная строка, идентифицирующая объект в браузере.

parse()

Создает и возвращает объект URL из строки URL и необязательной строки базового URL, или возвращает null если переданные параметры определяют недопустимый URL.

revokeObjectURL()

Отменяет URL объекта, созданный ранее с помощью URL.createObjectURL().

toString()

Возвращает строку, содержащую весь URL. Это синоним для URL.href, хотя его нельзя использовать для изменения значения.

toJSON()

Возвращает строку, содержащую весь URL. Возвращает ту же строку, что и свойство href.

Конструктор принимает параметр url, и необязательный параметр base, используемый в качестве базового, если параметр url является относительным URL:

const url = new URL("../cats", "http://www.example.com/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"

Конструктор вызовет исключение, если URL не может быть разобран в допустимый URL. Вы можете либо вызвать приведенный выше код в блоке try...catch, либо использовать статический метод canParse() для предварительной проверки валидности URL:

if (URL.canParse("../cats", "http://www.example.com/dogs")) {
  const url = new URL("../cats", "http://www.example.com/dogs");
  console.log(url.hostname); // "www.example.com"
  console.log(url.pathname); // "/cats"
} else {
  console.log("Invalid URL"); //Invalid URL
}

Свойства URL могут быть установлены для построения URL:

url.hash = "tabby";
console.log(url.href); // "http://www.example.com/cats#tabby"

URL кодируются в соответствии с правилами, описанными в RFC 3986. Например:

url.pathname = "démonstration.html";
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"

Интерфейс URLSearchParams может быть использован для построения и изменения строки запроса URL.

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

// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"

Метод toString() объекта URL просто возвращает значение свойства href, поэтому конструктор может использоваться для нормализации и кодирования URL напрямую.

const response = await fetch(
  new URL("http://www.example.com/démonstration.html"),
);

• Полифилл URL в core-js
• API URL
• Что такое URL?
• URLSearchParams.