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:

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

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

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

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

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

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

Kom ons kontroleer 'n nie-bestaande een:

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

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

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

Kom ons kontroleer die veranderinge:

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

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

Kom ons kontroleer die veranderinge:

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

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

Kom ons kontroleer die veranderinge:

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

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

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

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

javascriptsearchParams.delete('b');

Kom ons kontroleer die veranderinge:

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

Herhaal parameters met 'n lus

Parameters kan met 'n lus herhaal word:

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

Verskeie identiese parameters

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

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

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

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

Praktiese take

Kom ons neem aan die volgende parameterstring word gegee:

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