🚀 Вам бесплатно доступен тренажёр по HTML и CSS.

Объект URL в JavaScript представляет URL-адрес и предоставляет удобные методы для работы с ним. Он позволяет анализировать, конструировать и декодировать URL-адреса.

Создать объект URL можно двумя способами:

Конструктор URL() — самый распространённый способ, в котором вы передаёте любой URL в виде строки в качестве аргумента.

const url = new URL("https://www.example.com/path?query=123#hash");

Использование window.location — это глобальный объект в браузерах, который содержит информацию о текущем URL.

const currentUrl = new URL(window.location.href);

Из чего состоит URL

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

  • href: полный URL.
  • protocol: протокол, например https:.
  • host: хост (доменное имя и порт, если указан).
  • hostname: только доменное имя.
  • port: только порт.
  • pathname: путь после доменного имени и порта.
  • search: строка запроса, начинающаяся с ?.
  • hash: якорь, начинающийся с #.
  • origin: происхождение (протокол + домен + порт).

Допустим, у нас есть такой URL, в котором есть все перечисленные выше части:

https://www.example.com:8080/path/page.html?query=123#section

Тогда объект URL для него будет выглядеть так:

const url = new URL("https://www.example.com:8080/path/page.html?query=123#section");

А если мы попытаемся вывести значения разных свойств, получим следующее:

console.log(url.href);     // https://www.example.com:8080/path/page.html?query=123#section
console.log(url.protocol); // https:
console.log(url.host);     // www.example.com:8080
console.log(url.hostname); // www.example.com
console.log(url.port);     // 8080
console.log(url.pathname); // /path/page.html
console.log(url.search);   // ?query=123
console.log(url.hash);     // #section
console.log(url.origin);   // https://www.example.com:8080

Ещё вы можете изменить любую часть URL, изменяя соответствующее свойство.

url.search = "?newquery=456";
console.log(url.href); 
// https://www.example.com:8080/path/page.html?newquery=456#section

Объект URLSearchParams в сочетании с объектом URL упрощает работу с параметрами запроса.

const params = new URLSearchParams(url.search);
params.set("newparam", "value");
url.search = params.toString();
console.log(url.href); 
// https://www.example.com:8080/path/page.html?newquery=456&newparam=value

Используя объект URL, вы можете значительно упростить и сделать более надежной работу с URL-адресами в ваших веб-проектах.