Arbejde med URLSearchParams i JavaScript

Som du allerede ved, opstår der strenge af følgende type, når du arbejder med formularer og GET-anmodninger i JavaScript:

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

Nogle gange er det nødvendigt programmatisk at ændre værdien af en hvilken som helst parameter fra denne streng. Det er ikke særlig bekvemt at skrive kode, der gør dette. Derfor har JavaScript en speciel indbygget klasse URLSearchParams til arbejde med sådanne strenge.

Lad os oprette et objekt af denne klasse ved at videregive vores parameterstreng som parameter:

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

Lad os se, hvilke metoder det oprettede objekt har.

Hentning af parameterværdi

Ved hjælp af metoden get kan du hente værdien af en parameter:

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

Lad os prøve at hente værdien af en ikke-eksisterende parameter:

javascriptlet res = searchParams.get('x');
console.log(res); // vil udskrive null

Tjek for parameterens tilstedeværelse

Ved hjælp af metoden has kan du tjekke for tilstedeværelsen af en parameter. Lad os tjekke en eksisterende parameter:

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

Lad os tjekke en ikke-eksisterende:

javascriptlet res = searchParams.has('x');
console.log(res); // vil udskrive false

Konvertering til streng

Ved hjælp af metoden toString kan du konvertere vores objekt tilbage til en streng:

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

Ændring af parametre

Ved hjælp af metoden set kan du ændre værdien af en parameter:

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

Lad os kontrollere ændringerne:

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

Tilføjelse af parametre

Ved hjælp af metoden set kan du også tilføje en ny parameter:

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

Lad os kontrollere ændringerne:

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

Tilføjelse af parametre

Ved hjælp af metoden append kan du også tilføje en ny parameter:

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

Lad os kontrollere ændringerne:

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

Lad os prøve at tilføje en allerede eksisterende parameter:

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

I dette tilfælde vil metoden blot tilføje en parameter med samme navn i slutningen:

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

Dette viser forskellen mellem metoderne set og append. Den første vil ændre en eksisterende parameter, mens den anden blot tilføjer en dublet af den i slutningen.

Sletning af parametre

Ved hjælp af metoden delete kan du slette parametre:

javascriptsearchParams.delete('b');

Lad os kontrollere ændringerne:

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

Iteration over parametre med loop

Parametre kan itereres over med et loop:

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

Flere identiske parametre

Antag, at vores streng har flere identiske parametre:

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

Ved hjælp af metoden getAll kan du hente et array med værdier for disse parametre:

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

Praktiske opgaver

Antag følgende streng med parametre:

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