Рад са URLSearchParams у JavaScript-у

Као што већ знате, при раду са формама и GET захтевима у JavaScript-у настају стрингови овог вида:

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

Понекад је потребно програмски променити вредност неког параметра из овог стринга. Писање кода који то ради није баш погодно. Зато у JavaScript-у постоји посебна класа URLSearchParams за рад са таквим стринговима.

Хајде да креирамо објекат ове класе, проследивши параметром наш стринг са параметрима:

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

Хајде да погледамо које методе има креирани објекат.

Добијање вредности параметра

Помоћу методе get можемо добити вредност параметра:

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

Пробајмо да добијемо вредност непостојећег параметра:

let res = searchParams.get('x');
console.log(res); // исписаће null

Провера постојања параметра

Помоћу методе has можемо проверити постојање параметра. Проверимо постојећи параметар:

let res = searchParams.has('a');
console.log(res); // исписаће true

Проверимо непостојећи:

let res = searchParams.has('x');
console.log(res); // исписаће false

Претварање у стринг

Помоћу методе toString можемо претворити наш објекат назад у стринг:

let res = searchParams.toString();
console.log(res); // исписаће 'a=1&b=2&c=3'

Мењање параметара

Помоћу методе set можемо променити вредност параметра:

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

Проверимо измене:

let res = searchParams.toString();
console.log(res); // исписаће 'a=1&b=x&c=3'

Додавање параметара

Помоћу методе set можемо такође додати нови параметар:

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

Проверимо измене:

let res = searchParams.toString();
console.log(res); // исписаће 'a=1&b=2&c=3&d=4'

Додавање параметара

Помоћу методе append можемо такође додати нови параметар:

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

Проверимо измене:

let res = searchParams.toString();
console.log(res); // исписаће 'a=1&b=2&c=3&d=4'

Хајде да пробамо да додамо већ постојећи параметар:

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

У овом случају наш метод ће једноставно додати истоимени параметар на крај:

let res = searchParams.toString();
console.log(res); // исписаће 'a=1&b=2&c=3&a=4'

У томе се огледа разлика између метода set и append. Први ће променити постојећи параметар, а други ће само додати његов дупликат на крај.

Брисање параметара

Помоћу методе delete можемо брисати параметре:

searchParams.delete('b');

Проверимо измене:

let res = searchParams.toString();
console.log(res); // исписаће 'a=1&c=3'

Прелазак кроз параметре петљом

Параметре можемо прелазити петљом:

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

Више истих параметара

Нека у нашем стрингу има више истих параметара:

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

Помоћу методе getAll можемо добити низ вредности ових параметара:

let res = searchParams.getAll('a');
console.dir(res); // исписаће [1, 2]

Практични задаци

Нека је дат следећи стринг са параметрима:

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

Додајте у овај стринг још један параметар test3.

Обришите из овог стринга параметар test2.

Промените параметар test1 на нову вредност.