URLSearchParams – Query-Strings sicher bauen und auslesen
Query-Strings von Hand zusammenzustückeln geht schnell schief – Sonderzeichen, Leerzeichen, Umlaute. URLSearchParams baut und liest sie korrekt kodiert, ganz ohne String-Basteln.
"/api/suche?q=" + eingabe sieht harmlos aus – bis jemand „grün & blau" eingibt und das & deine URL zerlegt. Der eingebaute URLSearchParams kümmert sich um die korrekte Kodierung und macht das Lesen genauso einfach.
Query-String bauen
const params = new URLSearchParams({
q: 'grün & blau',
seite: 2,
sort: 'preis',
});
params.toString(); // "q=gr%C3%BCn+%26+blau&seite=2&sort=preis"
const url = `/api/suche?${params}`;
await fetch(url);Alles ist sauber kodiert – Umlaute, das &, Leerzeichen. Kein manuelles encodeURIComponent mehr an dutzenden Stellen.
Query-String der aktuellen Seite auslesen
const q = new URLSearchParams(location.search);
q.get('seite'); // "2" (oder null, wenn nicht vorhanden)
q.has('sort'); // true
q.getAll('tag'); // ["neu","angebot"] bei ?tag=neu&tag=angebotPraktisch beim Aktualisieren einzelner Parameter: set überschreibt, delete entfernt, danach kannst du die neue Adresse ohne Neuladen in die History schreiben:
q.set('seite', '3');
history.replaceState(null, '', `?${q}`);Und weil URL das gleiche Objekt nutzt, kannst du auch eine komplette Adresse zerlegen: new URL(link).searchParams.get('utm_source').
Kleine, robuste Bausteine wie dieser stecken in jeder guten Website. Wenn du eine brauchst, schau auf bymw.de vorbei.
Quellen
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
Formulare ohne Neuladen abschicken – FormData und fetch
Ein Formular per JavaScript abzuschicken heißt nicht, jedes Feld einzeln auszulesen. FormData nimmt das ganze Formular, fetch schickt es weg – inklusive Dateien, und mit einer Fehlermeldung, die der Besucher versteht.
Promise.allSettled – wenn ein einziger Fehlschlag nicht alles kippen darf
Promise.all bricht beim ersten Fehler ab und wirft alle anderen Ergebnisse weg. Für ein Dashboard aus fünf Quellen ist das genau falsch: Vier Kacheln könnten Daten zeigen, aber die Seite bleibt leer.
Web Worker – rechnen, ohne die Oberfläche einzufrieren
JavaScript hat im Browser genau einen Faden für alles: Klicks, Animationen, Layout – und deine Rechenschleife. Dauert die zwei Sekunden, ist die Seite zwei Sekunden lang tot. Ein Worker nimmt die Arbeit auf einen eigenen Faden.