JavaScript URL API

Einführung in JavaScript URL-Objekte

JavaScript stellt eine leistungsstarke integrierte URL-Schnittstelle bereit, um URLs zu erstellen, zu parsen und zu manipulieren. Anstatt Zeichenketten mit regulären Ausdrücken oder manuellen split()-Aufrufen zu zerlegen — was bei Sonderfällen wie Ports, kodierten Zeichen und fehlenden Komponenten versagt — parst das URL-Objekt eine Adresse in strukturierte, einzeln adressierbare Teile.

Die URL-Schnittstelle ist nativ in Browsern und in Node.js verfügbar (sie ist global, kein require notwendig). Dieser Leitfaden erklärt, wie man URLs erstellt und parst, einzelne Komponenten liest und ändert, Query-Strings über URLSearchParams verwaltet und häufige Aufgaben aus der Praxis bewältigt, wie das Erstellen von API-Anfragen und das Verfolgen von Links.

URLs mit JavaScript erstellen und parsen

Einfache URL-Erstellung

Um eine URL zu erstellen, wird die Adress-Zeichenkette an den URL-Konstruktor übergeben. Wenn die Zeichenkette keine gültige absolute URL ist, wirft der Konstruktor einen TypeError:

const url = new URL("https://www.w3docs.com");

URL-Komponenten parsen

Sobald ein URL-Objekt erstellt wurde, können alle Teile über eine dedizierte Eigenschaft ausgelesen werden:

Der vollständige Satz an Komponenten für eine URL wie https://user:[email protected]:8080/path?q=1#top ist:

Eine URL vor dem Parsen validieren

Da der Konstruktor bei ungültiger Eingabe wirft, sollten nicht vertrauenswürdige Zeichenketten zuerst validiert werden. Die statische Methode URL.canParse() gibt einen boolean-Wert zurück, ohne zu werfen:

URL-Objekte manipulieren

Mit dem Query-String über URLSearchParams arbeiten

Jede URL stellt eine searchParams-Eigenschaft bereit — ein aktives URLSearchParams-Objekt, dessen Änderungen direkt in die URL zurückgeschrieben werden. Dies ist der bevorzugte Weg, einen Query-String zu bearbeiten, da die Kodierung automatisch übernommen wird. Das folgende Beispiel verwendet ein separates URLSearchParams-Objekt, um zu zeigen, wie die einzelnen Teile zusammenhängen:

In der Praxis überspringt man das Zwischenobjekt meistens und bearbeitet url.searchParams direkt — das verändert die URL direkt:

Wiederholte Schlüssel und Iteration

Query-Strings können denselben Schlüssel mehrfach enthalten (z. B. ?tag=js&tag=web). get() gibt nur den ersten Treffer zurück, während getAll() alle Werte liefert. Mit for...of können außerdem alle Paare durchlaufen werden:

Erklärung

• Initialisierung:
  • Das URL-Objekt wird mit einer Basis-URL erstellt, die bereits einen Query-Parameter enthält (initial=123).
• URLSearchParams-Objekt:
  • URLSearchParams wird mit url.search initialisiert, das den Query-String der URL enthält.
• Parameter hinzufügen:
  • Die Methode .set() wird verwendet, um einen neuen Parameter (key=value) zum Query-String hinzuzufügen. Wenn der Schlüssel bereits vorhanden ist, wird sein Wert aktualisiert; andernfalls wird das Schlüssel-Wert-Paar hinzugefügt.
• Parameter lesen:
  • Die Methode .get() ruft den Wert des durch den Schlüssel (key) angegebenen Parameters ab, der dann in der Konsole ausgegeben wird.
• Parameter entfernen:
  • Die Methode .delete() entfernt den durch den Schlüssel (initial) angegebenen Parameter. Dies dient dazu zu zeigen, wie ein Parameter aus dem Query-String entfernt wird.
• URL-Suche aktualisieren:
  • Nach dem Ändern der Parameter wird die search-Eigenschaft der URL mit der Zeichenkettendarstellung des URLSearchParams-Objekts aktualisiert.
• Ausgabe:
  • Abschließend wird die geänderte URL in der Konsole ausgegeben, um die Auswirkungen der Operationen zu zeigen.

Pfad und Hash ändern

Der folgende JavaScript-Codeausschnitt zeigt, wie der Pfadname und der Hash einer URL geändert werden:

Erklärung

• Initialisierung des URL-Objekts:
  • Das URL-Objekt wird zunächst aus einer Zeichenkette erstellt, die eine vollständige URL darstellt. Diese URL enthält einen Pfadnamen, einen Query-String und ein Hash-Fragment.
• Pfadname ändern:
  • Die Eigenschaft pathname des URL-Objekts wird auf einen neuen Pfad gesetzt (/path/to/resource). Diese Eigenschaft gibt den Pfad oder die Route auf dem Server an.
• Hash ändern:
  • Die Eigenschaft hash wird auf "section" aktualisiert. In URLs steht der Hash für ein Lesezeichen innerhalb der Seite, das häufig verwendet wird, um zu einem bestimmten Abschnitt zu scrollen.
• Änderungen protokollieren:
  • Die ursprüngliche URL wird vor den Änderungen ausgegeben, um den Ausgangszustand zu zeigen.
  • Nach den Änderungen wird der neue Zustand der URL ausgegeben, um die Auswirkungen der Änderungen an pathname und hash zu demonstrieren.

Erweiterte Verwendung von URL-Objekten

Mit relativen URLs umgehen

Das URL-Objekt kann relative URLs auch gegen eine Basis-URL auflösen, was besonders nützlich für Webanwendungen ist, die mit dynamischen Links umgehen:

Mit URL-Kodierung arbeiten

Bei URLs, die Zeichen enthalten, die kodiert werden müssen, übernimmt das URL-Objekt diese Aufgabe automatisch und stellt sicher, dass die URLs gültig sind:

Für die Verarbeitung lokaler Dateien oder Blobs erzeugt URL.createObjectURL() eine temporäre URL-Zeichenkette, die auf das Objekt im Speicher verweist. Dies ist nützlich für die Vorschau von Bildern oder den direkten Download von Dateien aus JavaScript heraus.

Praktische Beispiele zur URL-Manipulation

Kampagnen-URLs verfolgen

Mit URL-Objekten lassen sich Kampagnen-URLs effektiv verwalten, die im digitalen Marketing häufig eingesetzt werden, um die Leistung verschiedener Marketingmaßnahmen zu verfolgen:

Integration mit Web-APIs

URL-Objekte lassen sich hervorragend mit der Fetch API kombinieren: Eine URL-Instanz kann direkt an fetch() übergeben werden, und searchParams stellt sicher, dass der Query-String korrekt kodiert ist. Nachdem die Anfrage abgeschlossen ist, wird die Antwort in der Regel mit JSON-Methoden verarbeitet:

Moderne Alternative (async/await):

async function fetchPosts() {
  const apiUrl = new URL("https://jsonplaceholder.typicode.com/posts");
  apiUrl.searchParams.set("userId", "1");
  const response = await fetch(apiUrl);
  const data = await response.json();
  console.log(data[0]); // Outputs the first post by user with userId 1
}

Häufige Fallstricke

• Der Konstruktor wirft bei ungültiger Eingabe. new URL("example.com") schlägt fehl, weil kein Protokoll angegeben ist. Entweder eine vollständige absolute URL angeben, eine Basis-URL als zweites Argument übergeben oder mit URL.canParse() absichern.
• Relative Zeichenketten benötigen eine Basis. new URL("/about") wirft allein; new URL("/about", "https://www.w3docs.com") löst korrekt auf.
• origin ist schreibgeschützt. url.origin kann nicht zugewiesen werden. Stattdessen protocol, hostname oder port einzeln ändern.
• get() gibt nur den ersten Wert zurück. Für Schlüssel, die wiederholt vorkommen können, getAll() verwenden.
• Normalisierung erfolgt automatisch. Das Lesen von href kann einen abschließenden Schrägstrich hinzufügen (https://w3docs.com wird zu https://w3docs.com/) und reservierte Zeichen prozent-kodieren. Beim Prüfen auf Gleichheit geparste URLs vergleichen, nicht rohe Zeichenketten.
• Die Reihenfolge von searchParams entspricht der Einfügereihenfolge. params.sort() verwenden, wenn ein kanonischer, stabiler Query-String für Caching oder Signierung benötigt wird.

Fazit

Das JavaScript URL-Objekt ist ein robustes Werkzeug für alle Aspekte der URL-Manipulation und -Analyse. Durch die Beherrschung seiner Eigenschaften und Methoden können Entwickler die Interaktion ihrer Webanwendung mit URLs vereinfachen und sowohl die Funktionalität als auch die Benutzererfahrung verbessern. Ob beim Umgang mit komplexen URL-Strukturen, der Integration mit APIs oder dem Verfolgen von Marketingkampagnen — das URL-Objekt bietet eine zuverlässige und effiziente Möglichkeit, mit Webadressen in JavaScript zu arbeiten.

Übungen