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:

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

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

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

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

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

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

Să verificăm unul inexistent:

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

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

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

Să verificăm modificările:

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

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

Să verificăm modificările:

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

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

Să verificăm modificările:

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

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

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

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

javascriptsearchParams.delete('b');

Să verificăm modificările:

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

Parcurgerea parametrilor cu bucla

Parametrii pot fi parcurși cu bucla:

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

Mai mulți parametri identici

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

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

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

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

Sarcini practice

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

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