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:

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

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

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

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

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

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

La oss sjekke en ikke-eksisterende:

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

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

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

La oss sjekke endringene:

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

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

La oss sjekke endringene:

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

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

La oss sjekke endringene:

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

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

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

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

javascriptsearchParams.delete('b');

La oss sjekke endringene:

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

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

Flere like parametere

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

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

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

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

Praktiske oppgaver

La følgende parameterstreng være gitt:

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