URLPattern.pathname — Eigenschaft · JavaScript-Referenz

Signatur

get URLPattern.prototype.pathname

Beschreibung

Die schreibgeschützte Eigenschaft pathname eines URLPattern-Objekts enthält das Teilmuster für den Pfad einer URL, also alles zwischen Host bzw. Port und dem ? der Query. Das Muster kann feste Segmente, benannte Gruppen (:id), Platzhalter (*), reguläre Ausdrücke (:id(\\d+)) und optionale Abschnitte ({/}?) enthalten.

Der Wert ist die normalisierte Fassung des Musters, das du dem Konstruktor übergeben hast. Lässt du den Pfad in einem Objekt-Muster weg, steht hier der Platzhalter "*", der jeden Pfad akzeptiert. Wenn du einen String mit Basis-URL übergibst, wird der Pfad wie bei einer normalen URL aufgelöst. Nicht-ASCII-Zeichen werden dabei prozentkodiert.

In der Praxis nutzt du die Eigenschaft vor allem zum Debuggen und Protokollieren, zum Beispiel bei Routing-Tabellen in Service Workern oder Single-Page-Apps. Oder du baust damit aus einem vorhandenen Muster ein neues mit abgewandelten Bestandteilen. Die Werte, die beim Matching tatsächlich gefunden werden, stehen nicht hier, sondern im Ergebnis von exec() unter result.pathname.groups.

Rückgabewert

Typ

string

Beschreibung

Das normalisierte Muster für den Pfad. Fehlt eine Angabe, ist der Wert "*".

Beispiele

Pfadmuster aus einem Objekt-Muster auslesen

const pattern = new URLPattern({ pathname: '/books/:id' });
console.log(pattern.pathname);

// Ohne Pfadangabe passt jeder Pfad
const hostOnly = new URLPattern({ hostname: 'example.com' });
console.log(hostOnly.pathname);

/books/:id *

Pfad aus einem vollständigen URL-Muster

const pattern = new URLPattern('https://shop.example.com/products/:category/:id(\\d+)');

console.log(pattern.hostname);
console.log(pattern.pathname);

shop.example.com /products/:category/:id(\d+)

Routing-Tabelle protokollieren und matchen

const routes = [
  { name: 'artikel', pattern: new URLPattern({ pathname: '/blog/:slug' }) },
  { name: 'dateien', pattern: new URLPattern({ pathname: '/static/*' }) }
];

// Muster zur Kontrolle ausgeben
for (const { name, pattern } of routes) {
  console.log(`${name.padEnd(8)} → ${pattern.pathname}`);
}

const url = 'https://example.com/blog/urlpattern-api';
const match = routes.find(r => r.pattern.test(url));
const result = match.pattern.exec(url);
console.log(match.name, result.pathname.groups.slug);

artikel → /blog/:slug dateien → /static/* artikel urlpattern-api

Muster mit anderem Host, aber gleichem Pfad nachbauen

const prod = new URLPattern('https://api.example.com/v1/users/:id');

// Pfadmuster übernehmen, Host für die Testumgebung austauschen
const staging = new URLPattern({
  protocol: prod.protocol,
  hostname: 'staging.example.com',
  pathname: prod.pathname
});

console.log(staging.test('https://staging.example.com/v1/users/42'));

true

// Wichtig · Fallstricke

Schreibgeschützt: Die Eigenschaft hat nur einen Getter. Eine Zuweisung wird im normalen Modus stillschweigend ignoriert und löst im Strict Mode (z. B. in Modulen oder Klassen) einen TypeError aus. Für ein anderes Muster brauchst du ein neues URLPattern.
Muster ist nicht gleich Treffer: pattern.pathname ist das Muster selbst. Die gefundenen Werte liefert pattern.exec(url).pathname mit input und groups.
Normalisierung: Der zurückgegebene String kann vom übergebenen Muster abweichen, etwa durch Prozentkodierung von Sonderzeichen oder das Auflösen relativer Pfade gegen eine baseURL. Verlasse dich also nicht auf einen exakten String-Vergleich mit deiner Eingabe.
Abschließender Schrägstrich: /books passt nicht auf /books/. Wenn beides erlaubt sein soll, schreibe den Schrägstrich optional: /books{/}?.
Kompatibilität: URLPattern gibt es seit Langem in Chromium-Browsern. Firefox und Safari unterstützen es erst seit Kurzem. In älteren Umgebungen brauchst du eine Prüfung mit 'URLPattern' in globalThis oder einen Polyfill wie urlpattern-polyfill.

Siehe auch

URLPattern URLPattern.prototype.exec() URLPattern.prototype.test() URLPattern.hostname URLPattern.search URL.pathname Summarizer.outputLanguage