URLSearchParams használata JavaScriptben

Mint azt már tudod, az űrlapokkal és GET kérésekkel dolgozva JavaScriptben gyakran előfordulnak ilyen formájú sztringek:

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

Időnként programozott módon kell megváltoztatnunk valamilyen paraméter értékét ebből a sztringből. Nem túl kényelmes kódot írni, ami ezt megteszi. Ezért a JavaScriptbe beépítettek egy speciális URLSearchParams osztályt az ilyen sztringek kezelésére.

Hozzunk létre egy objektumot ebből az osztályból, átadva paraméterként a paramétereinket tartalmazó sztringet:

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

Nézzük meg, milyen metódusai vannak a létrehozott objektumnak.

Paraméter értékének lekérése

A get metódussal lekérhetjük egy paraméter értékét:

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

Próbáljunk meg egy nem létező paraméter értékét lekérni:

let res = searchParams.get('x');
console.log(res); // kiírja: null

Paraméter jelenlétének ellenőrzése

A has metódussal ellenőrizhetjük egy paraméter jelenlétét. Ellenőrizzünk egy létező paramétert:

let res = searchParams.has('a');
console.log(res); // kiírja: true

Ellenőrizzünk egy nem létezőt:

let res = searchParams.has('x');
console.log(res); // kiírja: false

Átalakítás sztringgé

A toString metódussal az objektumunkat visszaalakíthatjuk sztringgé:

let res = searchParams.toString();
console.log(res); // kiírja: 'a=1&b=2&c=3'

Paraméterek módosítása

A set metódussal megváltoztathatjuk egy paraméter értékét:

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

Ellenőrizzük a változtatásokat:

let res = searchParams.toString();
console.log(res); // kiírja: 'a=1&b=x&c=3'

Paraméterek hozzáadása

A set metódussal új paramétert is hozzáadhatunk:

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

Ellenőrizzük a változtatásokat:

let res = searchParams.toString();
console.log(res); // kiírja: 'a=1&b=2&c=3&d=4'

Paraméterek hozzáadása

A append metódussal szintén hozzáadhatunk új paramétert:

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

Ellenőrizzük a változtatásokat:

let res = searchParams.toString();
console.log(res); // kiírja: 'a=1&b=2&c=3&d=4'

Próbáljunk meg hozzáadni egy már létező paramétert:

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

Ebben az esetben a metódusunk egyszerűen hozzáad egy azonos nevű paramétert a végéhez:

let res = searchParams.toString();
console.log(res); // kiírja: 'a=1&b=2&c=3&a=4'

Ebben nyilvánul meg a különbség a set és a append metódusok között. Az első módosítja a létező paramétert, míg a második egyszerűen hozzáad egy másolatot a végéhez.

Paraméterek törlése

A delete metódussal törölhetjük a paramétereket:

searchParams.delete('b');

Ellenőrizzük a változtatásokat:

let res = searchParams.toString();
console.log(res); // kiírja: 'a=1&c=3'

Paraméterek bejárása ciklussal

A paramétereket bejárhatjuk ciklussal:

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

Több azonos paraméter

Tegyük fel, hogy a sztringünkben több azonos paraméter van:

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

A getAll metódussal lekérhetjük ezen paraméterek értékeinek tömbjét:

let res = searchParams.getAll('a');
console.dir(res); // kiírja: [1, 2]

Gyakorlati feladatok

Legyen adott a következő paramétereket tartalmazó sztring:

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

Adjon hozzá ehhez a sztringhez még egy test3 paramétert.

Távolítsa el ebből a sztringből a test2 paramétert.

Módosítsa a test1 paramétert egy új értékre.