Práca s URLSearchParams v JavaScripte

Ako už viete, pri práci s formulármi a GET požiadavkami v JavaScripte vznikajú reťazce takého tvaru:

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

Niekedy je potrebné programovo zmeniť hodnotu nejakého parametra z tohto reťazca. Písanie kódu, ktorý to robí, nie je veľmi pohodlné. Preto je v JavaScripte vstavaná špeciálna trieda URLSearchParams na prácu s takýmito reťazcami.

Vytvorme objekt tejto triedy, odovzdaním našehoreťazca s parametrami ako parameter:

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

Pozrime sa, aké metódy má vytvorený objekt.

Získanie hodnoty parametra

Pomocou metódy get je možné získať hodnotu parametra:

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

Skúsme získať hodnotu neexistujúceho parametra:

javascriptlet res = searchParams.get('x');
console.log(res); // vypíše null

Kontrola existencie parametra

Pomocou metódy has je možné skontrolovať existenciu parametra. Skontrolujme existujúci parameter:

javascriptlet res = searchParams.has('a');
console.log(res); // vypíše true

Skontrolujme neexistujúci:

javascriptlet res = searchParams.has('x');
console.log(res); // vypíše false

Konverzia na reťazec

Pomocou metódy toString je možné previesť náš objekt späť na reťazec:

javascriptlet res = searchParams.toString();
console.log(res); // vypíše 'a=1&b=2&c=3'

Zmena parametrov

Pomocou metódy set je možné zmeniť hodnotu parametra:

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

Skontrolujme zmeny:

javascriptlet res = searchParams.toString();
console.log(res); // vypíše 'a=1&b=x&c=3'

Pridanie parametrov

Pomocou metódy set je možné tiež pridať nový parameter:

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

Skontrolujme zmeny:

javascriptlet res = searchParams.toString();
console.log(res); // vypíše 'a=1&b=2&c=3&d=4'

Pridanie parametrov

Pomocou metódy append je možné tiež pridať nový parameter:

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

Skontrolujme zmeny:

javascriptlet res = searchParams.toString();
console.log(res); // vypíše 'a=1&b=2&c=3&d=4'

Skúsme pridať už existujúci parameter:

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

V tomto prípade naša metóda jednoducho pridá parameter s rovnakým menom na koniec:

javascriptlet res = searchParams.toString();
console.log(res); // vypíše 'a=1&b=2&c=3&a=4'

V tomto sa prejavuje rozdiel medzi metódami set a append. Prvá zmení existujúci parameter, zatiaľ čo druhá jednoducho pridá jeho duplikát na koniec.

Odstránenie parametrov

Pomocou metódy delete je možné odstraňovať parametre:

javascriptsearchParams.delete('b');

Skontrolujme zmeny:

javascriptlet res = searchParams.toString();
console.log(res); // vypíše 'a=1&c=3'

Prechádzanie parametrov cyklom

Parametre je možné prechádzať cyklom:

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

Niekoľko rovnakých parametrov

Nech v našom reťazci je niekoľko rovnakých parametrov:

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

Pomocou metódy getAll je možné získať pole hodnôt týchto parametrov:

javascriptlet res = searchParams.getAll('a');
console.dir(res); // vypíše [1, 2]

Praktické úlohy

Nech je daný nasledujúci reťazec s parametrami:

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