Arbeta med URLSearchParams i JavaScript

Som du redan vet, när du arbetar med formulär och GET-förfrågningar i JavaScript uppstår strängar av denna typ:

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

Ibland behöver man programmatiskt ändra värdet på en parameter från denna sträng. Att skriva kod som gör detta är inte särskilt bekvämt. Därför har JavaScript en speciell inbyggd klass URLSearchParams för att arbeta med sådana strängar.

Låt oss skapa ett objekt av denna klass genom att skicka vår parametersträng som parameter:

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

Låt oss titta på vilka metoder det skapade objektet har.

Hämta parametervärde

Med metoden get kan du hämta värdet på en parameter:

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

Låt oss försöka hämta värdet på en parameter som inte finns:

let res = searchParams.get('x');
console.log(res); // kommer att skriva ut null

Kontrollera om en parameter finns

Med metoden has kan du kontrollera om en parameter finns. Låt oss kontrollera en befintlig parameter:

let res = searchParams.has('a');
console.log(res); // kommer att skriva ut true

Låt oss kontrollera en som inte finns:

let res = searchParams.has('x');
console.log(res); // kommer att skriva ut false

Konvertering till sträng

Med metoden toString kan du konvertera vårt objekt tillbaka till en sträng:

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

Ändra parametrar

Med metoden set kan du ändra värdet på en parameter:

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

Låt oss kontrollera ändringarna:

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

Lägga till parametrar

Med metoden set kan du också lägga till en ny parameter:

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

Låt oss kontrollera ändringarna:

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

Lägga till parametrar

Med metoden append kan du också lägga till en ny parameter:

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

Låt oss kontrollera ändringarna:

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

Låt oss försöka lägga till en parameter som redan finns:

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

I det här fallet kommer vår metod helt enkelt att lägga till en parameter med samma namn i slutet:

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

Detta visar skillnaden mellan metoderna set och append. Den första kommer att ändra en befintlig parameter, medan den andra helt enkelt lägger till en dubblett av den i slutet.

Ta bort parametrar

Med metoden delete kan du ta bort parametrar:

searchParams.delete('b');

Låt oss kontrollera ändringarna:

let res = searchParams.toString();
console.log(res); // kommer att skriva ut 'a=1&c=3'

Iterera parametrar med en loop

Parametrar kan itereras med en loop:

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

Flera likadana parametrar

Låt oss säga att vår sträng har flera likadana parametrar:

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

Med metoden getAll kan du få en array med värden för dessa parametrar:

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

Praktiska uppgifter

Antag att följande parametersträng är given:

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

Lägg till ytterligare en parameter test3 till denna sträng.

Ta bort parametern test2 från denna sträng.

Ändra parametern test1 till ett nytt värde.