URL

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

Для создания объекта URL нужно вызвать конструктор, передав ему строку с абсолютным или относительным URL-адресом в качестве аргумента. В случае с относительным адресом в конструктор также нужно передать базовый адрес вторым аргументом. После этого вы получите доступ к частям URL-адреса для их чтения или модификации.

В случае, когда браузер не поддерживает URL() конструктор, вы можете получить доступ к объекту URL через URL свойство интерфейса Window. Проверьте, не нуждается ли какой-либо из ваших целевых браузеров в этом префиксе.

Примечание: Эта возможность доступна в Web Workers

Конструктор

new URL(): Создаёт и возвращает объект URL из указанного абсолютного адреса или пути и базового адреса.

Свойства

hash: Строка типа USVString. Содержит идентификатор фрагмента и символ '#' в начале строки.
host (en-US): Строка типа USVString. Содержит доменное имя (hostname) за которым следует (если был указан порт) символ ':' и номер порта.
hostname (en-US): Строка типа USVString. Содержит доменное имя.
href (en-US): Строка типа USVString. Содержит полный URL-адрес.
origin (en-US) Только для чтения: Строка типа USVString. Содержит схему (протокол), доменное имя и номера порта.
password (en-US): Строка типа USVString. Содержит пароль, указанный перед доменным именем.
pathname (en-US): Строка типа USVString. Содержит относительный пусть и символ '/' в начале строки. Параметры запроса и идентификатор фрагмента не входят в эту строку.
port (en-US): Строка типа USVString. Содержит номер порта.
protocol (en-US): Строка типа USVString. Содержит название протокола и символ ':' на конце.
search (en-US): Строка типа USVString. Содержит параметры запроса. Включает в себя все параметры, которые были указаны и начинается с символа '?'.
searchParams (en-US) Только для чтения: Объект URLSearchParams. Позволяет получить доступ к каждому параметру запроса по отдельности.
username (en-US): Строка типа USVString. Содержит имя пользователя указанное перед именем домена.

Методы

toString() (en-US): Возвращает строку типа USVString, содержащую полный URL-адрес. Возвращаемое значение аналогично значению свойства URL.href (en-US). Разница лишь в том, что при помощи этого метода нельзя изменить значение URL-адреса.
toJSON() (en-US): Возвращает строку типа USVString, содержащую полный URL-адрес. Возвращаемое значение аналогично значению свойства URL.href (en-US).

Статические методы

createObjectURL(): Возвращает строку типа DOMString, содержащую уникальный URL-адрес Blob объекта. Этот адрес предоставляет из себя строку с blob: в качестве схемы, за которой идёт строка однозначно идентифицирующая Blob объект в браузере.
revokeObjectURL() (en-US): Отменяет URL созданный при помощи URL.createObjectURL().

Примечания по использованию

Конструктор принимает один обязательный параметр — 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"</pre>

Вы можете задавать значения свойствам объекта 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-адреса текущей веб-страницы:

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

Метод toString() (en-US) лишь возвращает значение свойства href (en-US). Благодаря этому, конструктор URL можно использовать для нормализации и кодирования URL-адреса.

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

Спецификации

Specification
URL Standard # api

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Полифил для URL доступен в core-js
URL API (en-US)
Что такое URL-адрес?
Свойство для получения объекта URL: URL.
URLSearchParams.