Arbeid med URLSearchParams i JavaScript

Som du allerede vet, når du arbeider med skjemaer og GET-forespørsler i JavaScript, oppstår strenger av denne typen:

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

Noen ganger er det nødvendig å programmatisk endre verdien til en parameter fra denne strengen. Det er ikke veldig praktisk å skrive kode som gjør dette. Derfor har JavaScript en innebygd spesialklasse URLSearchParams for arbeid med slike strenger.

La oss opprette et objekt av denne klassen ved å sende vår parameterstreng som parameter:

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

La oss se hvilke metoder det opprettede objektet har.

Hente verdien til en parameter

Ved hjelp av metoden get kan du hente verdien til en parameter:

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

La oss prøve å hente verdien til en ikke-eksisterende parameter:

let res = searchParams.get('x');
console.log(res); // vil skrive ut null

Sjekke om en parameter finnes

Ved hjelp av metoden has kan du sjekke om en parameter finnes. La oss sjekke en eksisterende parameter:

let res = searchParams.has('a');
console.log(res); // vil skrive ut true

La oss sjekke en ikke-eksisterende:

let res = searchParams.has('x');
console.log(res); // vil skrive ut false

Konvertering til streng

Ved hjelp av metoden toString kan du konvertere vårt objekt tilbake til en streng:

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

Endre parametere

Ved hjelp av metoden set kan du endre verdien til en parameter:

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

La oss sjekke endringene:

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

Legge til parametere

Ved hjelp av metoden set kan du også legge til en ny parameter:

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

La oss sjekke endringene:

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

Legge til parametere

Ved hjelp av metoden append kan du også legge til en ny parameter:

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

La oss sjekke endringene:

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

La oss prøve å legge til en allerede eksisterende parameter:

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

I dette tilfellet vil metoden vår bare legge til en parameter med samme navn på slutten:

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

Dette viser forskjellen mellom metodene set og append. Den første vil endre en eksisterende parameter, mens den andre bare vil legge til en duplikat på slutten.

Slette parametere

Ved hjelp av metoden delete kan du slette parametere:

searchParams.delete('b');

La oss sjekke endringene:

let res = searchParams.toString();
console.log(res); // vil skrive ut 'a=1&c=3'

Gå gjennom parametere med løkke

Du kan gå gjennom parametere med en løkke:

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

Flere like parametere

La det være flere like parametere i strengen vår:

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

Ved hjelp av metoden getAll kan du hente en matrise med verdier for disse parameterne:

let res = searchParams.getAll('a');
console.dir(res); // vil skrive ut [1, 2]

Praktiske oppgaver

La følgende parameterstreng være gitt:

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

Legg til enda en parameter test3 i denne strengen.

Slett parameteren test2 fra denne strengen.

Endre parameteren test1 til en ny verdi.