Werken met URLSearchParams in JavaScript

Zoals je al weet, ontstaan er bij het werken met formulieren en GET-verzoeken in JavaScript strings van dit soort:

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

Soms moet je de waarde van een parameter in deze string programmatisch wijzigen. Code schrijven die dit doet, is niet erg handig. Daarom heeft JavaScript een speciale ingebouwde klasse URLSearchParams voor het werken met dergelijke strings.

Laten we een object van deze klasse aanmaken door onze string met parameters als parameter door te geven:

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

Laten we kijken welke methodes het gemaakte object heeft.

Waarde van een parameter ophalen

Met de methode get kun je de waarde van een parameter ophalen:

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

Laten we proberen de waarde van een niet-bestaande parameter op te halen:

let res = searchParams.get('x');
console.log(res); // geeft null weer

Controleren of een parameter aanwezig is

Met de methode has kun je controleren of een parameter aanwezig is. Laten we een bestaande parameter controleren:

let res = searchParams.has('a');
console.log(res); // geeft true weer

Laten we een niet-bestaande controleren:

let res = searchParams.has('x');
console.log(res); // geeft false weer

Omzetten naar een string

Met de methode toString kun je ons object terug omzetten naar een string:

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

Parameters wijzigen

Met de methode set kun je de waarde van een parameter wijzigen:

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

Laten we de wijzigingen controleren:

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

Parameters toevoegen

Met de methode set kun je ook een nieuwe parameter toevoegen:

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

Laten we de wijzigingen controleren:

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

Parameters toevoegen

Met de methode append kun je ook een nieuwe parameter toevoegen:

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

Laten we de wijzigingen controleren:

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

Laten we proberen een al bestaande parameter toe te voegen:

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

In dit geval voegt onze methode simpelweg een parameter met dezelfde naam aan het einde toe:

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

Hierin toont zich het verschil tussen de methodes set en append. De eerste wijzigt de bestaande parameter, terwijl de tweede simpelweg een dubbele toevoegt aan het einde.

Parameters verwijderen

Met de methode delete kun je parameters verwijderen:

searchParams.delete('b');

Laten we de wijzigingen controleren:

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

Parameters doorlopen met een lus

Parameters kunnen worden doorlopen met een lus:

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

Meerdere identieke parameters

Stel dat onze string meerdere identieke parameters bevat:

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

Met de methode getAll kun je een array met waarden van deze parameters ophalen:

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

Praktische opdrachten

Stel dat de volgende string met parameters gegeven is:

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

Voeg aan deze string nog een parameter test3 toe.

Verwijder uit deze string de parameter test2.

Wijzig de parameter test1 naar een nieuwe waarde.