Работа со 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 на нова вредност.