URLSearchParamsiga töötamine JavaScriptis

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

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

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

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

Proovime saada olematu parameetri väärtust:

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

Parameetri olemasolu kontrollimine

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

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

Kontrollime olematut:

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

Teisendamine stringiks

Meetodit toString saab kasutada meie objekti tagasi stringiks teisendamiseks:

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

Parameetrite muutmine

Meetodit set saab kasutada parameetri väärtuse muutmiseks:

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

Kontrollime muudatusi:

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

Parameetrite lisamine

Meetodit set saab kasutada ka uue parameetri lisamiseks:

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

Kontrollime muudatusi:

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

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

Kontrollime muudatusi:

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

Proovime lisada juba olemasoleva parameetri:

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

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

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

searchParams.delete('b');

Kontrollime muudatusi:

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

Parameetrite läbimine tsükliga

Parameetreid saab läbida tsükliga:

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

Mitu samasugust parameetrit

Olgu meie stringis mitu samasugust parameetrit:

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

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

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

Praktilised ülesanded

Olgu antud järgmine parameetrite string:

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

Lisage sellesse stringi veel üks parameeter test3.

Kustutage sellest stringist parameeter test2.

Muutke parameetri test1 väärtus uuele väärtusele.