Arbeiten mit URLSearchParams in JavaScript

Wie Sie bereits wissen, treten bei der Arbeit mit Formularen und GET-Anfragen in JavaScript Zeichenketten folgender Art auf:

let paramsString = 'a=1&b=2&c=3';

Manchmal muss der Wert eines Parameters in dieser Zeichenkette programmgesteuert geändert werden. Code zu schreiben, der dies tut, ist nicht sehr bequem. Daher gibt es in JavaScript eine spezielle Klasse URLSearchParams für die Arbeit mit solchen Zeichenketten.

Lassen Sie uns ein Objekt dieser Klasse erstellen, indem wir unsere Zeichenkette mit Parametern als Parameter übergeben:

let paramsString = 'a=1&b=2&c=3';
let searchParams = new URLSearchParams(paramsString);

Lassen Sie uns sehen, welche Methoden das erstellte Objekt hat.

Abrufen des Parameterwerts

Mit der Methode get kann der Wert eines Parameters abgerufen werden:

let res = searchParams.get('a');
console.log(res);

Versuchen wir, den Wert eines nicht vorhandenen Parameters abzurufen:

let res = searchParams.get('x');
console.log(res); // gibt null aus

Überprüfen, ob ein Parameter vorhanden ist

Mit der Methode has kann das Vorhandensein eines Parameters überprüft werden. Überprüfen wir einen vorhandenen Parameter:

let res = searchParams.has('a');
console.log(res); // gibt true aus

Überprüfen wir einen nicht vorhandenen:

let res = searchParams.has('x');
console.log(res); // gibt false aus

Umwandlung in eine Zeichenkette

Mit der Methode toString kann unser Objekt wieder in eine Zeichenkette umgewandelt werden:

let res = searchParams.toString();
console.log(res); // gibt 'a=1&b=2&c=3' aus

Ändern von Parametern

Mit der Methode set kann der Wert eines Parameters geändert werden:

searchParams.set('b', 'x');

Überprüfen wir die Änderungen:

let res = searchParams.toString();
console.log(res); // gibt 'a=1&b=x&c=3' aus

Hinzufügen von Parametern

Mit der Methode set kann auch ein neuer Parameter hinzugefügt werden:

searchParams.set('d', '4');

Überprüfen wir die Änderungen:

let res = searchParams.toString();
console.log(res); // gibt 'a=1&b=2&c=3&d=4' aus

Hinzufügen von Parametern

Mit der Methode append kann ebenfalls ein neuer Parameter hinzugefügt werden:

searchParams.append('d', '4');

Überprüfen wir die Änderungen:

let res = searchParams.toString();
console.log(res); // gibt 'a=1&b=2&c=3&d=4' aus

Versuchen wir, einen bereits vorhandenen Parameter hinzuzufügen:

searchParams.append('a', '4');

In diesem Fall fügt die Methode einfach einen gleichnamigen Parameter am Ende hinzu:

let res = searchParams.toString();
console.log(res); // gibt 'a=1&b=2&c=3&a=4' aus

Hierin zeigt sich der Unterschied zwischen den Methoden set und append. Der erste ändert den vorhandenen Parameter, während der zweite einfach ein Duplikat davon am Ende hinzufügt.

Löschen von Parametern

Mit der Methode delete können Parameter gelöscht werden:

searchParams.delete('b');

Überprüfen wir die Änderungen:

let res = searchParams.toString();
console.log(res); // gibt 'a=1&c=3' aus

Durchlaufen der Parameter mit einer Schleife

Parameter können mit einer Schleife durchlaufen werden:

for (let p of searchParams) {
	console.log(p);
}

Mehrere gleiche Parameter

Angenommen, in unserer Zeichenkette gibt es mehrere gleiche Parameter:

let paramsString = 'a=1&a=2b=2&c=3';

Mit der Methode getAll kann ein Array der Werte dieser Parameter abgerufen werden:

let res = searchParams.getAll('a');
console.dir(res); // gibt [1, 2] aus

Praktische Aufgaben

Angenommen, die folgende Zeichenkette mit Parametern ist gegeben:

let paramsString = 'test1=param1&test2=param2&test3=param3';

Fügen Sie zu dieser Zeichenkette einen weiteren Parameter test3 hinzu.

Löschen Sie aus dieser Zeichenkette den Parameter test2.

Ändern Sie den Parameter test1 auf einen neuen Wert.