Lucrul cu URLSearchParams în JavaScript

După cum știți deja, atunci când lucrați cu formulare și cereri GET în JavaScript, apar șiruri de acest tip:

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

Uneori este necesar să modificați programatic valoarea unui parametru din acest șir. Scrierea de cod care face acest lucru nu este foarte comod. De aceea, JavaScript are o clasă specială încorporată URLSearchParams pentru lucrul cu astfel de șiruri.

Să creăm un obiect al acestei clase, transmitând ca parametru șirul nostru cu parametri:

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

Să vedem ce metode are obiectul creat.

Obținerea valorii unui parametru

Cu ajutorul metodei get puteți obține valoarea unui parametru:

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

Să încercăm să obținem valoarea unui parametru inexistent:

let res = searchParams.get('x');
console.log(res); // va afișa null

Verificarea existenței unui parametru

Cu ajutorul metodei has puteți verifica existența unui parametru. Să verificăm un parametru existent:

let res = searchParams.has('a');
console.log(res); // va afișa true

Să verificăm unul inexistent:

let res = searchParams.has('x');
console.log(res); // va afișa false

Convertirea în șir

Cu ajutorul metodei toString puteți converti obiectul nostru înapoi într-un șir:

let res = searchParams.toString();
console.log(res); // va afișa 'a=1&b=2&c=3'

Modificarea parametrilor

Cu ajutorul metodei set puteți modifica valoarea unui parametru:

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

Să verificăm modificările:

let res = searchParams.toString();
console.log(res); // va afișa 'a=1&b=x&c=3'

Adăugarea de parametri

Cu ajutorul metodei set puteți de asemenea adăuga un parametru nou:

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

Să verificăm modificările:

let res = searchParams.toString();
console.log(res); // va afișa 'a=1&b=2&c=3&d=4'

Adăugarea de parametri

Cu ajutorul metodei append puteți de asemenea adăuga un parametru nou:

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

Să verificăm modificările:

let res = searchParams.toString();
console.log(res); // va afișa 'a=1&b=2&c=3&d=4'

Să încercăm să adăugăm un parametru deja existent:

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

În acest caz, metoda noastră va adăuga pur și simplu un parametru cu același nume la sfârșit:

let res = searchParams.toString();
console.log(res); // va afișa 'a=1&b=2&c=3&a=4'

Aici se manifestă diferența dintre metodele set și append. Primul va modifica parametrul existent, iar al doilea va adăuga pur și simplu un duplicat al acestuia la sfârșit.

Ștergerea parametrilor

Cu ajutorul metodei delete puteți șterge parametri:

searchParams.delete('b');

Să verificăm modificările:

let res = searchParams.toString();
console.log(res); // va afișa 'a=1&c=3'

Parcurgerea parametrilor cu bucla

Parametrii pot fi parcurși cu bucla:

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

Mai mulți parametri identici

Să presupunem că în șirul nostru există mai mulți parametri identici:

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

Cu ajutorul metodei getAll puteți obține un tablou cu valorile acestor parametri:

let res = searchParams.getAll('a');
console.dir(res); // va afișa [1, 2]

Sarcini practice

Să presupunem că este dat următorul șir cu parametri:

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

Adăugați în acest șir încă un parametru test3.

Ștergeți din acest șir parametrul test2.

Modificați parametrul test1 la o nouă valoare.