Delo z URLSearchParams v JavaScript

Kot že veste, pri delu s formulari in GET zahtevki v JavaScript nastanejo nizi takšne oblike:

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

Včasih je potrebno programsko spremeniti vrednost določenega parametra iz tega niza. Pisanje kode, ki to počne, ni zelo priročno. Zato je v JavaScript vgrajen poseben razred URLSearchParams za delo s takšnimi nizi.

Ustvarimo objekt tega razreda tako, da podamo parameter naš niz s parametri:

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

Oglejmo si, katere metode ima ustvarjeni objekt.

Pridobivanje vrednosti parametra

Z metodo get lahko pridobimo vrednost parametra:

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

Poskusimo pridobiti vrednost neobstoječega parametra:

javascriptlet res = searchParams.get('x');
console.log(res); // izpiše null

Preverjanje prisotnosti parametra

Z metodo has lahko preverimo prisotnost parametra. Preverimo obstoječi parameter:

javascriptlet res = searchParams.has('a');
console.log(res); // izpiše true

Preverimo neobstoječi:

javascriptlet res = searchParams.has('x');
console.log(res); // izpiše false

Pretvorba v niz

Z metodo toString lahko pretvorimo naš objekt nazaj v niz:

javascriptlet res = searchParams.toString();
console.log(res); // izpiše 'a=1&b=2&c=3'

Spreminjanje parametrov

Z metodo set lahko spremenimo vrednost parametra:

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

Preverimo spremembe:

javascriptlet res = searchParams.toString();
console.log(res); // izpiše 'a=1&b=x&c=3'

Dodajanje parametrov

Z metodo set lahko tudi dodamo nov parameter:

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

Preverimo spremembe:

javascriptlet res = searchParams.toString();
console.log(res); // izpiše 'a=1&b=2&c=3&d=4'

Dodajanje parametrov

Z metodo append lahko tudi dodamo nov parameter:

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

Preverimo spremembe:

javascriptlet res = searchParams.toString();
console.log(res); // izpiše 'a=1&b=2&c=3&d=4'

Poskusimo dodati že obstoječi parameter:

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

V tem primeru bo naša metoda preprosto dodala istoimenski parameter na konec:

javascriptlet res = searchParams.toString();
console.log(res); // izpiše 'a=1&b=2&c=3&a=4'

V tem se kaže razlika med metodama set in append. Prva bo spremenila obstoječi parameter, druga pa bo preprosto dodala njegovo dvojnico na konec.

Brisanje parametrov

Z metodo delete lahko brišemo parametre:

javascriptsearchParams.delete('b');

Preverimo spremembe:

javascriptlet res = searchParams.toString();
console.log(res); // izpiše 'a=1&c=3'

Ponavljanje parametrov z zanko

Parametre lahko ponavljamo z zanko:

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

Več enakih parametrov

Naj bo v našem nizu več enakih parametrov:

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

Z metodo getAll lahko dobimo tabelo vrednosti teh parametrov:

javascriptlet res = searchParams.getAll('a');
console.dir(res); // izpiše [1, 2]

Praktične naloge

Naj bo podan naslednji niz s parametri:

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