URLSearchParamsiga töötamine JavaScriptis

Nagu te juba teate, tekivad vormide ja GET päringutega töötamisel JavaScriptis sellised stringid:

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

Mõnikord on vaja programmiliselt muuta mõne parameetri väärtust selles stringis. Selleks koodi kirjutamine pole eriti mugav. Seetõttu on JavaScriptisse sisseehitatud spetsiaalne klass URLSearchParams selliste stringidega töötamiseks.

Loome selle klassi objekti, edastades parameetrina meie parameetrite stringi:

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

Vaatame, millised meetodid loodud objektil on.

Parameetri väärtuse saamine

Meetodit get saab kasutada parameetri väärtuse saamiseks:

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

Proovime saada olematu parameetri väärtust:

javascriptlet res = searchParams.get('x');
console.log(res); // väljastab null

Parameetri olemasolu kontrollimine

Meetodit has saab kasutada parameetri olemasolu kontrollimiseks. Kontrollime olemasolevat parameetrit:

javascriptlet res = searchParams.has('a');
console.log(res); // väljastab true

Kontrollime olematut:

javascriptlet res = searchParams.has('x');
console.log(res); // väljastab false

Teisendamine stringiks

Meetodit toString saab kasutada meie objekti tagasi stringiks teisendamiseks:

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

Parameetrite muutmine

Meetodit set saab kasutada parameetri väärtuse muutmiseks:

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

Kontrollime muudatusi:

javascriptlet res = searchParams.toString();
console.log(res); // väljastab 'a=1&b=x&c=3'

Parameetrite lisamine

Meetodit set saab kasutada ka uue parameetri lisamiseks:

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

Kontrollime muudatusi:

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

Parameetrite lisamine

Meetodit append saab kasutada ka uue parameetri lisamiseks:

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

Kontrollime muudatusi:

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

Proovime lisada juba olemasoleva parameetri:

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

Sellisel juhul lisab meie meetod lihtsalt samanimelise parameetri lõppu:

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

Siin ilmneb meetodite set ja append erinevus. Esimene muudab olemasolevat parameetrit, teine aga lisab selle duplikaadi lõppu.

Parameetrite kustutamine

Meetodit delete saab kasutada parameetrite kustutamiseks:

javascriptsearchParams.delete('b');

Kontrollime muudatusi:

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

Parameetrite läbimine tsükliga

Parameetreid saab läbida tsükliga:

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

Mitu samasugust parameetrit

Olgu meie stringis mitu samasugust parameetrit:

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

Meetodit getAll saab kasutada nende parameetrite väärtuste massiivi saamiseks:

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

Praktilised ülesanded

Olgu antud järgmine parameetrite string:

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