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:

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

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

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

Pokušajmo da dobijemo vrednost nepostojećeg parametra:

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

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

Proverimo nepostojeći:

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

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

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

Proverimo izmene:

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

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

Proverimo izmene:

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

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

Proverimo izmene:

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

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

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

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

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

searchParams.delete('b');

Proverimo izmene:

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

Prolazak kroz parametre petljom

Parametrima se može prolaziti petljom:

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

Više istih parametara

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

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

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

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

Praktični zadaci

Neka je dat sledeći string sa parametrima:

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

Dodajte u ovaj string još jedan parametar test3.

Uklonite iz ovog stringa parametar test2.

Izmenite parametar test1 na novu vrednost.