Práce s URLSearchParams v JavaScriptu

Jak již víte, při práci s formuláři a GET požadavky v JavaScriptu vznikají řetězce takového tvaru:

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

Někdy je potřeba programově změnit hodnotu nějakého parametru z tohoto řetězce. Psát kód, který to dělá, není příliš pohodlné. Proto je v JavaScriptu vestavěna speciální třída URLSearchParams pro práci s takovými řetězci.

Vytvořme objekt této třídy předáním našeho řetězce s parametry jako parametru:

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

Podívejme se, jaké metody má vytvořený objekt k dispozici.

Získání hodnoty parametru

Pomocí metody get lze získat hodnotu parametru:

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

Zkusme získat hodnotu neexistujícího parametru:

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

Kontrola existence parametru

Pomocí metody has lze zkontrolovat přítomnost parametru. Zkontrolujme existující parametr:

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

Zkontrolujme neexistující:

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

Převod na řetězec

Pomocí metody toString lze převést náš objekt zpět na řetězec:

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

Změna parametrů

Pomocí metody set lze změnit hodnotu parametru:

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

Zkontrolujme změny:

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

Přidání parametrů

Pomocí metody set lze také přidat nový parametr:

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

Zkontrolujme změny:

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

Přidání parametrů

Pomocí metody append lze také přidat nový parametr:

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

Zkontrolujme změny:

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

Zkusme přidat již existující parametr:

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

V tomto případě náš metoda jednoduše přidá parametr se stejným názvem na konec:

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

V tomto se projevuje rozdíl mezi metodami set a append. První změní existující parametr, zatímco druhý jednoduše přidá jeho duplikát na konec.

Odstranění parametrů

Pomocí metody delete lze odstranit parametry:

javascriptsearchParams.delete('b');

Zkontrolujme změny:

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

Iterace přes parametry cyklem

Parametry lze procházet cyklem:

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

Několik stejných parametrů

Předpokládejme, že v našem řetězci je několik stejných parametrů:

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

Pomocí metody getAll lze získat pole hodnot těchto parametrů:

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

Praktické úlohy

Předpokládejme následující řetězec s parametry:

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