URLSearchParams-työskentely JavaScriptissä

Kuten jo tiedät, lomakkeiden ja GET-pyyntöjen käsittelyssä JavaScriptissä syntyy merkkijonoja tämän tyyppisiä:

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

Joskus on tarpeen muuttaa ohjelmallisesti joidenkin parametrien arvoja tästä merkkijonosta. Koodin kirjoittaminen, joka tekee tämän, ei ole kovin kätevää. Siksi JavaScriptiin on sisäänrakennettu erityinen luokka URLSearchParams tällaisten merkkijonojen käsittelyyn.

Luodaanpa tämän luokan olio välittämällä parametrina parametrimerkkijonomme:

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

Katsotaanpa, mitä metodeja luodulla oliolla on.

Parametrin arvon saaminen

Menetelmällä get voidaan saada parametrin arvo:

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

Yritetään saada olemattomän parametrin arvo:

let res = searchParams.get('x');
console.log(res); // tulostaa null

Parametrin olemassaolon tarkistaminen

Menetelmällä has voidaan tarkistaa parametrin olemassaolo. Tarkistetaan olemassa oleva parametri:

let res = searchParams.has('a');
console.log(res); // tulostaa true

Tarkistetaan olematon:

let res = searchParams.has('x');
console.log(res); // tulostaa false

Muuntaminen merkkijonoksi

Menetelmällä toString voidaan muuntaa olio takaisin merkkijonoksi:

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

Parametrien muuttaminen

Menetelmällä set voidaan muuttaa parametrin arvoa:

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

Tarkistetaan muutokset:

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

Parametrien lisääminen

Menetelmällä set voidaan myös lisätä uusi parametri:

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

Tarkistetaan muutokset:

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

Parametrien lisääminen

Menetelmällä append voidaan myös lisätä uusi parametri:

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

Tarkistetaan muutokset:

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

Yritetään lisätä jo olemassa oleva parametri:

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

Tässä tapauksessa menetelmämme yksinkertaisesti lisää samannimisen parametrin loppuun:

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

Tässä ilmenee ero menetelmien set ja append välillä. Ensimmäinen muuttaa olemassa olevan parametrin, kun taas toinen yksinkertaisesti lisää sen kaksoiskappaleen loppuun.

Parametrien poistaminen

Menetelmällä delete voidaan poistaa parametreja:

searchParams.delete('b');

Tarkistetaan muutokset:

let res = searchParams.toString();
console.log(res); // tulostaa 'a=1&c=3'

Parametrien läpikäynti silmukalla

Parametreja voidaan käydä läpi silmukalla:

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

Useita samanlaisia parametreja

Olkoon merkkijonossamme useita samanlaisia parametreja:

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

Menetelmällä getAll voidaan saada tällaisten parametrien arvojen taulukko:

let res = searchParams.getAll('a');
console.dir(res); // tulostaa [1, 2]

Käytännön tehtävät

Olkoon annettu seuraava parametrimerkkijono:

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

Lisää tähän merkkijonoon vielä yksi parametri test3.

Poista tästä merkkijonosta parametri test2.

Muuta parametria test1 uuteen arvoon.