Введение в JavaScript URL

JavaScript URL (Uniform Resource Locator) представляет собой строку, которая идентифицирует ресурс в Интернете или в локальной сети. URL состоит из нескольких компонентов, таких как протокол, доменное имя, путь к ресурсу и параметры запроса.

Для работы с URL в JavaScript доступен объект `URL`, который предоставляет множество методов и свойств для работы с URL-адресами.

Пример 1: Получение компонентов URL-адреса

javascript
const url = new URL('https://www.example.com/products?category=books&page=1');
console.log(url.protocol); // "https:"
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/products"
console.log(url.search); // "?category=books&page=1"
console.log(url.searchParams.get('category')); // "books"
console.log(url.searchParams.get('page')); // "1"

В этом примере мы создаем экземпляр объекта `URL` с указанным URL-адресом. Затем мы можем получить каждый компонент URL, такой как протокол (`protocol`), доменное имя (`hostname`), путь к ресурсу (`pathname`), строку параметров (`search`), а также значения конкретных параметров запроса, используя объект `searchParams`.

Пример 2: Изменение параметров URL-адреса

javascript
const url = new URL('https://www.example.com/products?category=books&page=1');
url.searchParams.set('category', 'electronics');
url.searchParams.set('page', '2');
console.log(url.href); // "https://www.example.com/products?category=electronics&page=2"

В этом примере мы изменяем значения параметров запроса URL-адреса, используя метод `set` объекта `searchParams`. Затем мы можем получить измененный URL-адрес, используя свойство `href`.

Пример 3: Создание URL-адреса на основе относительного пути

javascript
const baseUrl = 'https://www.example.com';
const relativePath = '/products';
const url = new URL(relativePath, baseUrl);
console.log(url.href); // "https://www.example.com/products"

В этом примере мы создаем URL-адрес на основе относительного пути (`relativePath`) и базового URL-адреса (`baseUrl`). Объект `URL` автоматически объединит базовый URL и относительный путь для создания полного URL-адреса.

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