Rad sa URLSearchParams u JavaScript-u

Kao što već znate, prilikom rada sa formama i GET zahtevima u JavaScript-u javljaju se stringovi ovog oblika:

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

Ponekad je potrebno programski promeniti vrednost nekog parametra iz ovog stringa. Pisati kod koji to radi nije baš pogodno. Zato JavaScript ima ugrađenu specijalnu klasu URLSearchParams za rad sa ovakvim stringovima.

Hajde da kreiramo objekat ove klase, prosledivši parametrom naš string sa parametrima:

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

Pogledajmo koje metode postoje kod kreiranog objekta.

Dobijanje vrednosti parametra

Pomoću metode get možemo dobiti vrednost parametra:

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

Pokušajmo da dobijemo vrednost nepostojećeg parametra:

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

Provera postojanja parametra

Pomoću metode has možemo proveriti postojanje parametra. Proverimo postojeći parametar:

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

Proverimo nepostojeći:

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

Pretvaranje u string

Pomoću metode toString možemo transformisati naš objekat nazad u string:

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

Izmena parametara

Pomoću metode set možemo izmeniti vrednost parametra:

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

Proverimo izmene:

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

Dodavanje parametara

Pomoću metode set takođe možemo dodati novi parametar:

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

Proverimo izmene:

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

Dodavanje parametara

Pomoću metode append takođe možemo dodati novi parametar:

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

Proverimo izmene:

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

Pokušajmo da dodamo već postojeći parametar:

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

U ovom slučaju naš metod će jednostavno dodati istoimeni parametar na kraj:

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

U ovome se ispoljava razlika između metoda set i append. Prvi će izmeniti postojeći parametar, a drugi će samo dodati njegov duplikat na kraj.

Brisanje parametara

Pomoću metode delete možemo brisati parametre:

javascriptsearchParams.delete('b');

Proverimo izmene:

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

Prolazak kroz parametre petljom

Parametrima se može prolaziti petljom:

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

Više istih parametara

Neka u našem stringu postoji više istih parametara:

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

Pomoću metode getAll možemo dobiti niz vrednosti ovih parametara:

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

Praktični zadaci

Neka je dat sledeći string sa parametrima:

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