Query-Parameter

Alles hinter dem Fragezeichen sind Werte, die der Aufrufer mitschickt: ein Suchbegriff, eine Seitenzahl, ein Filter. Du hast new URL(req.url, "http://localhost") schon in Lektion 8.3 benutzt, um an den Pfad zu kommen. Dasselbe Objekt gibt dir auch die Werte.

01 / 03searchParams

const adresse = new URL("/suche?q=kaffee&tag=neu&tag=rabatt&leer=", "http://localhost");

console.log(`pathname: ${adresse.pathname}`);
console.log(`q:        ${JSON.stringify(adresse.searchParams.get("q"))}`);
console.log(`tag:      ${JSON.stringify(adresse.searchParams.get("tag"))}`);
console.log(`getAll:   ${JSON.stringify(adresse.searchParams.getAll("tag"))}`);
console.log(`leer:     ${JSON.stringify(adresse.searchParams.get("leer"))}`);
console.log(`fehlt:    ${JSON.stringify(adresse.searchParams.get("fehlt"))}`);

Drei Dinge zeigt dieses Beispiel, die du dir merken solltest.

get gibt dir bei mehrfach vorhandenen Namen nur den ersten. ?tag=neu&tag=rabatt ist eine völlig legale Adresse, und wer nur get("tag") aufruft, verliert die Hälfte davon. Dafür gibt es getAll, das immer ein Array zurückgibt.

Ein fehlender Wert ist null, ein leerer Wert ist "". Das ist ein Unterschied, den du manchmal brauchst: ?q= heißt „hat gesucht, aber nichts eingegeben”, und ? ganz ohne q heißt „hat gar nicht gesucht”. Wenn dir der Unterschied egal ist, behandelst du beides gleich, aber dann mit Absicht.

02 / 03Warum nicht von Hand

Der naheliegende Weg wäre, an & und dann an = zu trennen. Er sieht nach drei Zeilen aus und ist falsch.

const roh = "q=caf%C3%A9+crema&tag=a&tag=b";

// Der naheliegende Weg: an & trennen, dann an = trennen.
const vonHand = {};
for (const paar of roh.split("&")) {
  const [name, wert] = paar.split("=");
  vonHand[name] = wert;
}
console.log(`von Hand:  ${JSON.stringify(vonHand)}`);

const params = new URLSearchParams(roh);
console.log(`q:         ${JSON.stringify(params.get("q"))}`);
console.log(`tag:       ${JSON.stringify(params.getAll("tag"))}`);

Zwei Fehler auf einmal. Der zweite tag hat den ersten überschrieben, weil ein Objekt nur einen Wert je Schlüssel hat. Und der Suchbegriff steht noch kodiert da: %C3%A9 ist das é, und das + ist ein Leerzeichen. In der Adresszeile müssen solche Zeichen umgeschrieben werden, denn & und = haben dort ja bereits eine Bedeutung.

Dazu kommen die Fälle, die im Beispiel gar nicht auftauchen: ein Wert, der selbst ein = enthält, wird von split("=") an der falschen Stelle zerschnitten. Ein Name ohne = ergibt undefined statt "".

Nichts davon ist unlösbar, und genau das ist der Punkt: URLSearchParams hat es schon gelöst.

03 / 03Und jetzt die Regel, die dreimal vorkommt

const params = new URLSearchParams("seite=2&limit=abc");

const seite = params.get("seite");
console.log(`seite ist ${JSON.stringify(seite)}, also ${typeof seite}`);
console.log(`seite + 1 ergibt ${JSON.stringify(seite + 1)}`);
console.log(`Number(seite) + 1 ergibt ${Number(seite) + 1}`);

const limit = params.get("limit");
console.log(`Number(limit) ergibt ${Number(limit)}`);
console.log(`Number.isInteger(Number(limit)) ergibt ${Number.isInteger(Number(limit))}`);

seite ist "2", nicht 2. Deshalb ergibt seite + 1 die Zeichenkette "21", denn + hängt Zeichenketten aneinander. Das ist dieselbe Regel wie bei den Kommandozeilenargumenten aus Lektion 4.1 und den Umgebungsvariablen aus 4.2, und es ist ihre dritte Wiederholung, weil sie an allen drei Stellen dieselbe Sorte Fehler erzeugt.

Ein Wert von außen ist Text, bis jemand ihn geprüft und umgewandelt hat.

Und Prüfen heißt hier wirklich prüfen. Number("abc") wirft keinen Fehler, sondern ergibt NaN, und NaN rechnet fröhlich weiter: Es lässt sich addieren, vergleichen und in eine Datenbank schreiben. Wer nur umwandelt und nicht prüft, hat irgendwann eine Zeile in der Datenbank, in der NaN steht, und keine Ahnung, wo sie herkam.

Die Prüfung, die du in den meisten Fällen willst, steht in der letzten Zeile des Beispiels. Number.isInteger sagt in einem Aufruf, ob eine ganze Zahl herausgekommen ist, und ist bei NaN sauber false. Dazu kommt meistens noch eine Grenze, denn ?seite=-5 ist zwar eine ganze Zahl, ergibt aber trotzdem keine Seite.

Was du bei einem ungültigen Wert tust, hast du in Lektion 8.4 schon gelernt: Der Aufrufer hat den Fehler gemacht, also ist es ein 400.