URLSearchParams-työskentely JavaScriptissä

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

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

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

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

Yritetään saada olemattomän parametrin arvo:

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

Parametrin olemassaolon tarkistaminen

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

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

Tarkistetaan olematon:

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

Muuntaminen merkkijonoksi

Menetelmällä toString voidaan muuntaa olio takaisin merkkijonoksi:

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

Parametrien muuttaminen

Menetelmällä set voidaan muuttaa parametrin arvoa:

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

Tarkistetaan muutokset:

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

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

Tarkistetaan muutokset:

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

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

Tarkistetaan muutokset:

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

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

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

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

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

javascriptsearchParams.delete('b');

Tarkistetaan muutokset:

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

Parametrien läpikäynti silmukalla

Parametreja voidaan käydä läpi silmukalla:

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

Useita samanlaisia parametreja

Olkoon merkkijonossamme useita samanlaisia parametreja:

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

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

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

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

Olkoon annettu seuraava parametrimerkkijono:

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