Во многих проектах приходится разбирать
URL: определять маршруты, извлекать параметры, проверять соответствие шаблону. Чаще всего для этого используют регулярные выражения или вручную разбирают строку, хотя современные браузеры предоставляют для этого встроенный API — URLPattern.Создадим шаблон маршрута для страницы пользователя:
const pattern = new URLPattern({
pathname: "/users/:id"
});В отличие от регулярных выражений здесь описывается не способ поиска, а сама структура
URL. Такой код легче читать, поддерживать и расширять, особенно когда маршрутов становится много.Проверим, соответствует ли URL заданному шаблону:
const result = pattern.exec(
"https://site.com/users/42"
);
console.log(!!result); // true
Если совпадение найдено,
exec() возвращает объект с подробной информацией о результате. Если маршрут не подходит — вернётся null.Получим параметр маршрута:
if (result) {
console.log(
result.pathname.groups.id
);
// "42"
}Все именованные параметры автоматически попадают в объект
groups. Больше не нужно самостоятельно искать совпадения, работать с индексами или писать регулярные выражения.URLPattern умеет сопоставлять не только путь. При необходимости можно одновременно проверять домен, протокол, порт, имя пользователя и другие части адреса.Например, можно сразу описать шаблон для версии
API:const api = new URLPattern({
hostname: "api.example.com",
pathname: "/v:version/users/:id"
});Теперь один шаблон одновременно проверяет хост и извлекает несколько параметров из пути.
Получим результат сопоставления:
const match = api.exec(
"https://api.example.com/v2/users/15"
);
console.log(match.pathname.groups);
На выходе получим уже готовый объект:
// {
// version: "2",
// id: "15"
// }URLPattern поддерживается современными браузерами, но если нужна совместимость со старыми версиями, заранее проверьте наличие API.🔥
URLPattern — позволяет отказаться от значительной части ручного разбора URL и сделать код сопоставления маршрутов заметно чище.