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:

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

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

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

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

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

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

Lad os tjekke en ikke-eksisterende:

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

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

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

Lad os kontrollere ændringerne:

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

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

Lad os kontrollere ændringerne:

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

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

Lad os kontrollere ændringerne:

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

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

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

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

searchParams.delete('b');

Lad os kontrollere ændringerne:

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

Iteration over parametre med loop

Parametre kan itereres over med et loop:

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

Flere identiske parametre

Antag, at vores streng har flere identiske parametre:

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

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

Praktiske opgaver

Antag følgende streng med parametre:

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

Tilføj endnu en parameter test3 til denne streng.

Slet parameteren test2 fra denne streng.

Ændr parameteren test1 til en ny værdi.