API URLPattern стало базовым и общедоступным

API URLPattern, теперь официально доступный в Baseline, предлагает стандартизированное и мощное решение для обработки изменений URL-адресов, устраняя необходимость в сложных регулярных выражениях или сторонних библиотеках для маршрутизации. Он позволяет сопоставлять URL-адреса с использованием знакомого синтаксиса шаблонов, значительно упрощая анализ и извлечение данных с помощью таких методов, как .exec() и .test(). Ранее для базового сопоставления URL-адресов часто приходилось комбинировать интерфейс URL с отдельными, часто сложными, регулярными выражениями для свойства .pathname. С URLPattern эта задача требует меньше кода и становится гораздо более читаемой, как показано в примере ниже:

const pattern = new URLPattern({ pathname: "/users/:id" });
const isMatch = pattern.test(location.href);

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

const pattern = new URLPattern({ pathname: "/books/:category/:id" });
const result = pattern.exec("/books/classics/12345");
const { category, id: bookId } = result.pathname.groups;
// category: "classics", bookId: "12345"

API также поддерживает составные совпадения для нескольких частей URL, таких как hostname и pathname, что ранее требовало отдельных проверок:

const pattern = new URLPattern({ hostname: "*.cdn.com", pathname: "/images/*" });
if (pattern.test(req.url)) { /* Do something */ }

Одним из ключевых преимуществ является уменьшение зависимости от сторонних библиотек, поскольку функциональность теперь встроена непосредственно в браузер. Это приводит к уменьшению размера пакета, упрощает управление зависимостями и потенциально обеспечивает более высокую производительность благодаря встроенной реализации. URLPattern подходит как для базовых, так и для продвинутых сценариев, позволяя проверять соответствие URL-адресу с помощью .test() и извлекать динамические части с помощью .exec(). Он способен обрабатывать совпадения по всему URL-адресу, включая поддомены, что идеально подходит для приложений, поведение которых зависит от имени хоста:

const apiPattern = new URLPattern({ hostname: ":subdomain.myapp.com", pathname: "/api/v:version/*" });
const result = apiPattern.exec("https://api.myapp.com/api/v2/users");
// result.hostname.groups: { subdomain: "api", version: "2" }

Для большей гибкости URLPattern поддерживает подстановочные знаки (*) и встраивание регулярных выражений непосредственно в шаблоны, например, для проверки формата userId или расширения файла:

const assetPattern = new URLPattern({ pathname: "/users/:userId(\\d+)/assets/*.(jpg|png|gif)" });
assetPattern.exec("/users/123/assets/profile.jpg"); // Matches
assetPattern.exec("/users/abc/assets/avatar.png"); // Null

Сервисные воркеры являются отличным примером практического применения, позволяя чисто перехватывать запросы fetch и применять различные стратегии кэширования без использования громоздких условий:

// Пример в Service Worker
self.addEventListener("fetch", (event) => {
  if (new URLPattern({ pathname: "/images/*" }).test(event.request.url)) {
    // ... кэширование изображений
  }
});

В итоге, URLPattern предлагает надежное, адаптируемое и стандартизированное решение для маршрутизации URL-адресов, встроенное непосредственно в браузер, что значительно упрощает веб-разработку. Разработчикам рекомендуется рассмотреть возможность его использования для упрощения кода, рефакторинга сложных модулей маршрутизации или обработки запросов в сервисных воркерах.

Оригинал статьи: URLPattern became Baseline Newly available