Puna me URLSearchParams në JavaScript

Siç e dini tashmë, kur punoni me format dhe kërkesa GET në JavaScript, lindin stringje të formës së mëposhtme:

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

Ndonjëherë është e nevojshme të ndryshohet në mënyrë programatike vlera e një parametri nga ky string. Shkrimi i kodit që e bën këtë nuk është shumë i përshtatshëm. Prandaj, në JavaScript ekziston një klasë e veçantë e integruar URLSearchParams për të punuar me stringje të tilla.

Le të krijojmë një objekt të kësaj klase, duke kaluar si parametër stringun tonë me parametra:

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

Le të shohim se cilat metoda ka objekti i krijuar.

Marrja e vlerës së parametrit

Duke përdorur metodën get mund të merrni vlerën e parametrit:

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

Le të përpiqemi të marrim vlerën e një parametri që nuk ekziston:

javascriptlet res = searchParams.get('x');
console.log(res); // do të shfaqë null

Kontrollimi i ekzistencës së parametrit

Duke përdorur metodën has mund të kontrolloni ekzistencën e parametrit. Le të kontrollojmë një parametër ekzistues:

javascriptlet res = searchParams.has('a');
console.log(res); // do të shfaqë true

Le të kontrollojmë një parametër që nuk ekziston:

javascriptlet res = searchParams.has('x');
console.log(res); // do të shfaqë false

Shndërrimi në string

Duke përdorur metodën toString mund ta shndërroni objektin tonë përsëri në string:

javascriptlet res = searchParams.toString();
console.log(res); // do të shfaqë 'a=1&b=2&c=3'

Ndryshimi i parametrave

Duke përdorur metodën set mund të ndryshoni vlerën e parametrit:

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

Le të kontrollojmë ndryshimet:

javascriptlet res = searchParams.toString();
console.log(res); // do të shfaqë 'a=1&b=x&c=3'

Shtimi i parametrave

Duke përdorur metodën set mund të shtoni gjithashtu edhe një parametër të ri:

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

Le të kontrollojmë ndryshimet:

javascriptlet res = searchParams.toString();
console.log(res); // do të shfaqë 'a=1&b=2&c=3&d=4'

Shtimi i parametrave

Duke përdorur metodën append mund të shtoni gjithashtu edhe një parametër të ri:

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

Le të kontrollojmë ndryshimet:

javascriptlet res = searchParams.toString();
console.log(res); // do të shfaqë 'a=1&b=2&c=3&d=4'

Le të përpiqemi të shtojmë një parametër që ekziston tashmë:

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

Në këtë rast, metoda jonë thjesht do të shtojë parametrin me të njëjtin emër në fund:

javascriptlet res = searchParams.toString();
console.log(res); // do të shfaqë 'a=1&b=2&c=3&a=4'

Këtu shfaqet ndryshimi midis metodave set dhe append. E para do ta ndryshojë parametrin ekzistues, ndërsa e dyta thjesht do të shtojë një dublikatë të tij në fund.

Fshirja e parametrave

Duke përdorur metodën delete mund të fshini parametra:

javascriptsearchParams.delete('b');

Le të kontrollojmë ndryshimet:

javascriptlet res = searchParams.toString();
console.log(res); // do të shfaqë 'a=1&c=3'

Përsëritja e parametrave me cikël

Parametrat mund të përsëriten me cikël:

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

Parametra të shumtë identikë

Le të themi se në stringun tonë ka disa parametra identikë:

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

Duke përdorur metodën getAll mund të merrni një grup vlerash të këtyre parametrave:

javascriptlet res = searchParams.getAll('a');
console.dir(res); // do të shfaqë [1, 2]

Detyra praktike

Le të jepet stringu i mëposhtëm me parametra:

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