URLSearchParams – Query-Strings sicher bauen und auslesen

"/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=angebot

Praktisch 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

• URLSearchParams – MDN Web Docs
• URL – MDN Web Docs