URL-Parameter in JavaScript abrufen: Ein Blick unter die Haube

URL-Parameter in JavaScript: Vom Einfachen zum Komplexen

Jeder Entwickler stand schon einmal vor der Aufgabe: Daten aus der Adressleiste des Browsers extrahieren. Du öffnest eine Seite, siehst etwas wie /products?id=42&category=books und weißt: Irgendwo in dieser Zeichenkette verstecken sich wichtige Daten. Wie bekommst du sie? Die Frage, die auf Stack Overflow tausende Stimmen gesammelt hat, lautet: "How can I get query string values in JavaScript?". Heute geben wir nicht nur eine fertige Antwort – wir schauen unter die Haube dieses Prozesses und analysieren, wie URL-Parsing in JavaScript auf allen Ebenen funktioniert.

Warum ist das wichtig? Weil URL-Parameter das Fundament des modernen Webs sind. Datenübertragung zwischen Seiten, Produktfilterung, Analyse, Referral-Links – all das basiert auf einfachen Zeichenketten nach dem Fragezeichen. Und wenn du in JavaScript entwickelst, ist der Umgang mit Query Strings keine Option, sondern eine grundlegende Fähigkeit.

Was ist ein Query String und wie siehst du ihn im Browser?

Klären wir zunächst die Begriffe. Ein Query String (Abfragezeichenfolge) ist der Teil einer URL, der nach dem Fragezeichen beginnt. Zum Beispiel in der Adresse:

https://example.com/search?q=javascript&lang=de&page=1

Alles nach ? ist der Query String. Er besteht aus Schlüssel=Wert-Paaren, die durch ein kaufmännisches Und-Zeichen (&) getrennt sind. Jeder Schlüssel kann mehrmals vorkommen – das ist wichtig zu beachten.

Um diesen String in JavaScript zu erhalten, greifst du einfach auf die Eigenschaft zu:

const queryString = window.location.search;\nconsole.log(queryString); // "?q=javascript&lang=de&page=1"

Beachte: Die Eigenschaft gibt den String inklusive des führenden Fragezeichens zurück. Das ist der Ausgangspunkt für alle weiteren Manipulationen.

Methode Nr. 1: URLSearchParams – modern und einfach

Wenn du Code für moderne Browser schreibst (das sind 99% der Fälle), verwende die integrierte API URLSearchParams. Sie wurde 2016 eingeführt und ist seitdem der De-facto-Standard für die Arbeit mit URL-Parametern. So funktioniert es:

// Query String abrufen\nconst queryString = window.location.search;\n\n// URLSearchParams-Objekt erstellen\nconst params = new URLSearchParams(queryString);\n\n// Wert anhand des Schlüssels abrufen\nconst q = params.get('q');       // "javascript"\nconst lang = params.get('lang'); // "de"\nconst page = params.get('page'); // "1"\n\n// Prüfen, ob ein Parameter existiert\nconsole.log(params.has('lang')); // true\n\n// Alle Werte abrufen, wenn der Schlüssel mehrfach vorkommt\nparams.append('q', 'python');\nconsole.log(params.getAll('q')); // ["javascript", "python"]\n\n// Alle Parameter durchlaufen\nfor (const [key, value] of params) {\n    console.log(`${key}: ${value}`);\n}\n// Ausgabe:\n// q: javascript\n// lang: de\n// page: 1\n// q: python

Unter der Haube dekodiert URLSearchParams automatisch kodierte Zeichen (z. B. wird %20 zu einem Leerzeichen) und verarbeitet komplexe Fälle wie wiederholte Schlüssel korrekt. Das ist nicht nur praktisch – es ist sicher.

Wie funktioniert das unter der Haube?

Wenn du new URLSearchParams(queryString) erstellst, führt die JavaScript-Engine folgende Schritte aus:

\n
• Entfernt das führende Fragezeichen (falls vorhanden).
\n
• Teilt den String am &-Zeichen und erhält ein Array von Paaren.
\n
• Teilt jedes Paar am ersten =-Zeichen in Schlüssel und Wert.
\n
• Dekodiert URI-Komponenten – ersetzt %20 durch Leerzeichen, %23 durch # und so weiter.
\n
• Speichert alles in einer Struktur, in der jedem Schlüssel ein Array von Werten zugeordnet wird (auch wenn es nur einer ist).
\n

Dieser Prozess ist vollständig umkehrbar. Du kannst die Parameter modifizieren