Пошук уроків, статей та іншого контенту
Навчитеся читати URL, формувати query-параметри та розрізняти основні частини адреси ресурсу.
URL (Uniform Resource Locator) — це адреса ресурсу в інтернеті. За URL браузер розуміє:
який протокол використати;
до якого сервера звернутися;
який ресурс або маршрут відкрити;
які додаткові параметри передати;
до якої частини сторінки перейти.
Приклад URL:
https://example.com:8080/products/42?category=books&sort=price#reviewsЦей URL складається з кількох частин:
https://example.com:8080/products/42?category=books&sort=price#reviews
└──┘ └──────────┘ └────┴──────────┴──────────────────────┴──────┘
протокол хост порт шлях query-параметри фрагментПротокол визначає правила обміну даними між клієнтом і сервером.
Найчастіше використовують:
http — незахищене з'єднання;
https — захищене з'єднання;
ftp — передавання файлів.
Приклад:
https://example.comУ сучасних вебзастосунках зазвичай використовують https.
Хост — це ім'я сервера, на якому розміщений ресурс.
https://example.com
└──────────┘
хостХост може бути доменним ім'ям або IP-адресою:
https://example.com
http://192.168.0.10Доменне ім'я зручніше для людей, а IP-адреса безпосередньо вказує на мережеву адресу сервера.
Порт визначає, через який мережевий канал працює з'єднання.
https://example.com:8080
└───┘
портДля стандартних протоколів порти часто не вказують явно:
http зазвичай використовує порт 80;
https зазвичай використовує порт 443.
Порт 8080 часто використовують під час локальної розробки:
http://localhost:8080Шлях, або pathname, вказує, який ресурс або маршрут потрібно відкрити.
https://example.com/products/42
└──────────┘
шляхУ цьому прикладі:
/products — маршрут для товарів;
/42 — ідентифікатор конкретного товару.
Шлях складається із сегментів, розділених символом /:
/blog/javascript/urlТут є три сегменти:
blog;
javascript;
url.
У вебзастосунках шлях часто описує ієрархію ресурсів:
/users
/users/15
/users/15/orders
/users/15/orders/3Query-параметри, або параметри запиту, передають додаткові дані серверу. Вони починаються після символу ?.
https://example.com/products?category=books&sort=price
└─────────────────────────┘
query-параметриКожен параметр має формат:
назва=значенняКілька параметрів розділяють символом &:
?category=books&sort=price&page=2У цьому прикладі:
category має значення books;
sort має значення price;
page має значення 2.
Query-параметри часто використовують для:
пошуку;
фільтрації;
сортування;
пагінації;
передавання налаштувань відображення.
Наприклад:
/products?search=phone
/products?category=books&sort=price
/articles?page=3&limit=10Параметри запиту не обов'язково визначають конкретний ресурс. Часто вони лише змінюють спосіб його отримання або відображення.
Фрагмент починається після символу #:
https://example.com/docs#installation
└────────────
фрагментФрагмент зазвичай використовується для переходу до певної частини сторінки:
<h2 id="installation">Встановлення</h2>Після відкриття URL:
/docs#installationбраузер спробує прокрутити сторінку до елемента з id="installation".
Фрагмент не надсилається серверу в HTTP-запиті. Він обробляється браузером або JavaScript-кодом.
Маршрут — це частина URL, яка визначає, яку сторінку або ресурс потрібно обробити.
Приклади маршрутів:
/
/about
/products
/products/42
/users/10/settingsУ серверному застосунку маршрут може бути пов'язаний із певною дією:
GET /products
GET /products/42
POST /products
DELETE /products/42У фронтенд-застосунку маршрути можуть визначати, який компонент показати користувачу:
/ — головна сторінка
/about — сторінка «Про нас»
/products — список товарів
/products/42 — сторінка конкретного товаруСтатичний маршрут має фіксований шлях:
/about
/contact
/productsДинамічний маршрут містить змінну частину:
/products/42
/products/105
/users/7У маршруті /products/42 число 42 може бути ідентифікатором товару.
Важливо розрізняти:
/products/42і
/products?id=42У першому випадку 42 є частиною шляху. У другому випадку 42 — значення query-параметра id.
Обидва варіанти можуть бути правильними, але вони мають різний зміст і обробляються по-різному.
URL у JavaScriptJavaScript має вбудований клас URL, який допомагає безпечно розбирати та створювати URL.
const address = new URL(
"https://example.com:8080/products/42?category=books&sort=price#reviews"
);
console.log(address.protocol); // "https:"
console.log(address.hostname); // "example.com"
console.log(address.port); // "8080"
console.log(address.pathname); // "/products/42"
console.log(address.hash); // "#reviews"
console.log(address.href); // повний URLОсновні властивості об'єкта URL:
href — повний URL;
protocol — протокол разом із :;
hostname — ім'я хоста;
port — порт;
host — хост разом із портом;
pathname — шлях;
search — query-рядок разом із ?;
hash — фрагмент разом із #.
Приклад:
const url = new URL("https://example.com/products?page=2");
console.log(url.href); // "https://example.com/products?page=2"
console.log(url.host); // "example.com"
console.log(url.pathname); // "/products"
console.log(url.search); // "?page=2"Якщо певна частина URL відсутня, її властивість матиме порожнє значення:
const url = new URL("https://example.com/products");
console.log(url.port); // ""
console.log(url.search); // ""
console.log(url.hash); // ""Для роботи з параметрами запиту використовують searchParams. Це об'єкт URLSearchParams.
const url = new URL(
"https://example.com/products?category=books&sort=price&page=2"
);
console.log(url.searchParams.get("category")); // "books"
console.log(url.searchParams.get("sort")); // "price"
console.log(url.searchParams.get("page")); // "2"Метод get() повертає значення параметра. Якщо параметра немає, він повертає null:
const url = new URL("https://example.com/products");
console.log(url.searchParams.get("page")); // nullОскільки значення з URL є рядками, числові параметри потрібно перетворювати окремо:
const url = new URL("https://example.com/products?page=2");
const page = Number(url.searchParams.get("page"));
console.log(page); // 2
console.log(typeof page); // "number"Для перевірки використовують метод has():
const url = new URL("https://example.com/products?sort=price");
console.log(url.searchParams.has("sort")); // true
console.log(url.searchParams.has("page")); // falseМетод entries() повертає пари «назва — значення»:
const url = new URL(
"https://example.com/products?category=books&sort=price"
);
for (const [name, value] of url.searchParams.entries()) {
console.log(name, value);
}
// category books
// sort priceТакож можна отримати всі назви або всі значення:
const url = new URL(
"https://example.com/products?category=books&sort=price"
);
console.log([...url.searchParams.keys()]);
// ["category", "sort"]
console.log([...url.searchParams.values()]);
// ["books", "price"]Створювати URL можна за допомогою об'єкта URL і змінювати його властивості.
const url = new URL("https://example.com/products");
url.searchParams.set("category", "books");
url.searchParams.set("page", "2");
console.log(url.href);
// "https://example.com/products?category=books&page=2"Метод set():
додає параметр, якщо його ще немає;
замінює значення, якщо параметр уже існує.
const url = new URL("https://example.com/products?page=1");
url.searchParams.set("page", "2");
console.log(url.href);
// "https://example.com/products?page=2"Метод append() додає ще одне значення для параметра з такою самою назвою:
const url = new URL("https://example.com/search");
url.searchParams.append("tag", "javascript");
url.searchParams.append("tag", "web");
console.log(url.href);
// "https://example.com/search?tag=javascript&tag=web"Метод delete() видаляє параметр:
const url = new URL(
"https://example.com/products?page=2&sort=price"
);
url.searchParams.delete("sort");
console.log(url.href);
// "https://example.com/products?page=2"Метод sort() сортує параметри за назвами:
const url = new URL(
"https://example.com/products?sort=price&category=books"
);
url.searchParams.sort();
console.log(url.href);
// "https://example.com/products?category=books&sort=price"У URL деякі символи мають спеціальне значення:
? починає query-параметри;
& розділяє параметри;
= розділяє назву та значення;
# починає фрагмент.
Якщо значення саме містить такі символи або пробіли, його потрібно закодувати.
URLSearchParams робить це автоматично:
const url = new URL("https://example.com/search");
url.searchParams.set("q", "JavaScript для початківців");
console.log(url.href);
// https://example.com/search?q=JavaScript+для+початківцівТут пробіли та кириличні символи представлені у форматі, придатному для URL.
Вручну складати query-рядок небезпечно:
// Потенційно проблемний варіант
const query = "q=" + "JavaScript для початківців";Краще використовувати URLSearchParams:
const params = new URLSearchParams();
params.set("q", "JavaScript для початківців");
params.set("page", "1");
const url = `https://example.com/search?${params}`;
console.log(url);
// https://example.com/search?q=JavaScript+для+початківців&page=1Наступний приклад читає параметри пошуку, встановлює значення за замовчуванням і формує новий URL.
const currentUrl = new URL(
"https://example.com/products?category=books&page=2"
);
const category = currentUrl.searchParams.get("category") || "all";
const page = Number(currentUrl.searchParams.get("page")) || 1;
const nextUrl = new URL("https://example.com/products");
nextUrl.searchParams.set("category", category);
nextUrl.searchParams.set("page", String(page + 1));
console.log("Категорія:", category);
console.log("Поточна сторінка:", page);
console.log("Наступний URL:", nextUrl.href);Результат:
Категорія: books
Поточна сторінка: 2
Наступний URL: https://example.com/products?category=books&page=3Абсолютний URL містить усі необхідні частини:
https://example.com/products/42Відносний URL описує адресу відносно поточної сторінки:
/products/42Відносний URL можна перетворити на абсолютний, передавши базову адресу:
const url = new URL("/products/42", "https://example.com");
console.log(url.href);
// "https://example.com/products/42"Це корисно, коли застосунок працює з маршрутами без повторення домену.
Можна використовувати й відносний шлях із query-параметрами:
const url = new URL(
"/products?page=2",
"https://example.com"
);
console.log(url.href);
// "https://example.com/products?page=2"У браузері поточний URL доступний через об'єкт window.location.
console.log(window.location.href);
console.log(window.location.pathname);
console.log(window.location.search);
console.log(window.location.hash);Наприклад, якщо сторінка відкрита за адресою:
https://example.com/products?page=2#detailsто:
console.log(window.location.pathname); // "/products"
console.log(window.location.search); // "?page=2"
console.log(window.location.hash); // "#details"Для зручного читання параметрів можна передати window.location.search до URLSearchParams:
const params = new URLSearchParams(window.location.search);
const page = params.get("page");
console.log(page);У браузері також можна створити об'єкт URL на основі поточної адреси:
const currentUrl = new URL(window.location.href);
console.log(currentUrl.pathname);
console.log(currentUrl.searchParams.get("page"));Створіть URL для сторінки каталогу:
базова адреса: https://shop.example.com/products;
категорія: laptops;
сторінка: 3;
сортування: price-asc.
Очікуваний результат:
https://shop.example.com/products?category=laptops&page=3&sort=price-ascОдин із правильних варіантів:
const url = new URL("https://shop.example.com/products");
url.searchParams.set("category", "laptops");
url.searchParams.set("page", "3");
url.searchParams.set("sort", "price-asc");
console.log(url.href);Погано:
const url = "/search?q=" + searchText + "&page=" + page;Якщо searchText містить &, ? або пробіли, URL може стати некоректним.
Краще:
const params = new URLSearchParams();
params.set("q", searchText);
params.set("page", String(page));
const url = `/search?${params}`;pathname і searchДля URL:
/products?page=2значення будуть такими:
const url = new URL("https://example.com/products?page=2");
console.log(url.pathname); // "/products"
console.log(url.search); // "?page=2"pathname — це маршрут, а search — query-рядок.
Усі значення, отримані з query-параметрів, є рядками:
const params = new URLSearchParams("?page=10");
const page = params.get("page");
console.log(page); // "10"
console.log(typeof page); // "string"Якщо потрібно виконувати математичні операції, перетворіть значення:
const page = Number(params.get("page"));|| для всіх можливих значеньТакий код замінить порожній рядок значенням за замовчуванням:
const value = params.get("q") || "all";Для багатьох випадків це нормально, але важливо пам'ятати: "" і null — різні значення. Якщо потрібно перевірити саме відсутність параметра, використовуйте явну перевірку:
const value = params.get("q");
if (value === null) {
console.log("Параметр q відсутній");
}set() і append()set() встановлює одне значення:
params.set("tag", "javascript");
params.set("tag", "web");
console.log(params.toString());
// "tag=web"append() додає кілька значень:
params.append("tag", "javascript");
params.append("tag", "web");
console.log(params.toString());
// "tag=javascript&tag=web"URL може зберігатися в історії браузера, логах сервера або системах аналітики. Не варто передавати в ньому:
паролі;
токени доступу;
секретні ключі;
приватні дані.
Query-параметри підходять для пошуку, фільтрів, сортування та інших несекретних даних.
URL — це адреса ресурсу в інтернеті.
Протокол визначає спосіб з'єднання.
Хост визначає сервер.
Порт визначає мережевий канал.
pathname описує маршрут або ресурс.
Query-параметри починаються з ? і розділяються символом &.
Фрагмент починається з # і використовується браузером для переходу до частини сторінки.
Клас URL допомагає розбирати та створювати адреси.
URLSearchParams призначений для читання, зміни та кодування параметрів запиту.
Значення query-параметрів завжди спочатку є рядками.
Для безпечного формування URL краще використовувати URL і URLSearchParams, а не складати рядки вручну.