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:

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

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

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

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

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

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

Zkontrolujme neexistující:

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

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

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

Zkontrolujme změny:

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

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

Zkontrolujme změny:

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

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

Zkontrolujme změny:

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

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

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

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

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

searchParams.delete('b');

Zkontrolujme změny:

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

Iterace přes parametry cyklem

Parametry lze procházet cyklem:

for (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ů:

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

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

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

Praktické úlohy

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

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

Přidejte do tohoto řetězce ještě jeden parametr test3.

Odstraňte z tohoto řetězce parametr test2.

Změňte parametr test1 na novou hodnotu.