Werk met URLSearchParams in JavaScript

Soos jy reeds weet, wanneer jy met vorms en GET-versoeke in JavaScript werk, ontstaan daar stringe van hierdie soort:

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

Soms moet jy die waarde van een of ander parameter in hierdie string programmaties verander. Om kode te skryf wat dit doen, is nie baie gerieflik nie. Daarom is daar 'n spesiale ingeboude klas URLSearchParams in JavaScript om met sulke stringe te werk.

Kom ons skep 'n voorwerp van hierdie klas deur ons parameterstring as parameter deur te gee:

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

Kom ons kyk watter metodes die geskape voorwerp het.

Kry die waarde van 'n parameter

Met die get metode kan jy die waarde van 'n parameter kry:

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

Kom ons probeer om die waarde van 'n nie-bestaande parameter te kry:

let res = searchParams.get('x');
console.log(res); // sal null uitvoer

Kontroleer of 'n parameter bestaan

Met die has metode kan jy kontroleer of 'n parameter bestaan. Kom ons kontroleer 'n bestaande parameter:

let res = searchParams.has('a');
console.log(res); // sal true uitvoer

Kom ons kontroleer 'n nie-bestaande een:

let res = searchParams.has('x');
console.log(res); // sal false uitvoer

Omskakeling na 'n string

Met die toString metode kan jy ons voorwerp weer na 'n string omskakel:

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

Verander parameters

Met die set metode kan jy die waarde van 'n parameter verander:

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

Kom ons kontroleer die veranderinge:

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

Voeg parameters by

Met die set metode kan jy ook 'n nuwe parameter byvoeg:

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

Kom ons kontroleer die veranderinge:

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

Voeg parameters by

Met die append metode kan jy ook 'n nuwe parameter byvoeg:

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

Kom ons kontroleer die veranderinge:

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

Kom ons probeer om 'n reeds bestaande parameter by te voeg:

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

In hierdie geval sal ons metode net 'n parameter met dieselfde naam aan die einde byvoeg:

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

Hierin lê die verskil tussen die metodes set en append. Die eerste sal die bestaande parameter verander, en die tweede sal net 'n duplikaat daarvan aan die einde byvoeg.

Verwyder parameters

Met die delete metode kan jy parameters verwyder:

searchParams.delete('b');

Kom ons kontroleer die veranderinge:

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

Herhaal parameters met 'n lus

Parameters kan met 'n lus herhaal word:

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

Verskeie identiese parameters

Kom ons neem aan daar is verskeie identiese parameters in ons string:

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

Met die getAll metode kan jy 'n skikking van waardes van hierdie parameters kry:

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

Praktiese take

Kom ons neem aan die volgende parameterstring word gegee:

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

Voeg nog 'n parameter test3 by hierdie string.

Verwyder die parameter test2 uit hierdie string.

Verander die parameter test1 na 'n nuwe waarde.