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:

javascriptlet 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:

javascriptlet 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:

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

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

javascriptlet 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:

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

Laten we een niet-bestaande controleren:

javascriptlet 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:

javascriptlet 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:

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

Laten we de wijzigingen controleren:

javascriptlet 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:

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

Laten we de wijzigingen controleren:

javascriptlet 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:

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

Laten we de wijzigingen controleren:

javascriptlet 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:

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

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

javascriptlet 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:

javascriptsearchParams.delete('b');

Laten we de wijzigingen controleren:

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

Parameters doorlopen met een lus

Parameters kunnen worden doorlopen met een lus:

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

Meerdere identieke parameters

Stel dat onze string meerdere identieke parameters bevat:

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

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

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

Praktische opdrachten

Stel dat de volgende string met parameters gegeven is:

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