Конструктор URL: разбор адреса и разрешение относительного пути

Назначение

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

Как это работает

Первый аргумент содержит адрес, второй может задавать абсолютную базу. Завершающий слеш базы влияет на разрешение пути. Свойства pathname, search и hash отделяют путь, параметры и фрагмент.

Пример

const base = "https://example.com/course/start/";
const local = new URL("notes?q=css#example", base);
console.assert(local.pathname === "/course/start/notes");
console.assert(local.search === "?q=css");
console.assert(local.hash === "#example");
console.assert(new URL("/notes", base).pathname === "/notes");
console.assert(new URL("notes", "https://example.com/course/start").pathname === "/course/notes");
console.log(local.href);

Что должно получиться

Проверки показывают разницу относительного и корневого пути, а также влияние слеша базы. Консоль выводит построенный адрес без обращения к example.com.

Граница применения и частая ошибка

Синтаксически корректный URL не обязательно подходит для безопасного перехода. Для пользовательского адреса отдельно проверяйте разрешённый протокол и назначение. Неверные аргументы могут вызвать TypeError, который нужно обработать.

Самостоятельная проверка

Составьте таблицу для notes, ./notes, ../notes и /notes с одной базой. Затем измените базовый слеш и сравните результаты. Не собирайте адрес ручной конкатенацией, пока не понимаете правила разрешения.

Пример JavaScript проверяйте в собственном учебном файле или консоли своего проекта. Встроенная песочница справочника JavaScript не выполняет. Успешное выполнение в одной среде не гарантирует поддержку метода во всех браузерах.

Связанные материалы

• Параметры URL
• Обработка ошибок
• Коллекция Map