Darbas su URLSearchParams JavaScript'e

Kaip jau žinote, dirbant su formomis ir GET užklausomis JavaScript'e susidaromos tokios formos eilutės:

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

Kartais reikia programiniu būdu pakeisti kurio nors parametro reikšmę šioje eilutėje. Rašyti kodą, kuris tai daro, nėra labai patogu. Todėl JavaScript'e yra įdiegta speciali klasė URLSearchParams darbui su tokiomis eilutėmis.

Sukurkime šios klasės objektą, perduodami parametru mūsų eilutę su parametrais:

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

Pažiūrėkime, kokie metodai yra sukurtame objekte.

Parametro reikšmės gavimas

Naudojant metodą get galima gauti parametro reikšmę:

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

Pabandykime gauti neegzistuojančio parametro reikšmę:

let res = searchParams.get('x');
console.log(res); // išves null

Parametro buvimo patikrinimas

Naudojant metodą has galima patikrinti parametro buvimą. Patikrinkime egzistuojantį parametrą:

let res = searchParams.has('a');
console.log(res); // išves true

Patikrinkime neegzistuojantį:

let res = searchParams.has('x');
console.log(res); // išves false

Konvertavimas į eilutę

Naudojant metodą toString galima konvertuoti mūsų objektą atgal į eilutę:

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

Parametrų keitimas

Naudojant metodą set galima pakeisti parametro reikšmę:

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

Patikrinkime pakeitimus:

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

Parametrų pridėjimas

Naudojant metodą set taip pat galima pridėti naują parametrą:

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

Patikrinkime pakeitimus:

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

Parametrų pridėjimas

Naudojant metodą append taip pat galima pridėti naują parametrą:

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

Patikrinkime pakeitimus:

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

Pabandykime pridėti jau egzistuojantį parametrą:

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

Šiuo atveju mūsų metodas tiesiog pridės to paties pavadinimo parametrą į galą:

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

Taip pasireiškia skirtumas tarp metodų set ir append. Pirmasis pakeis egzistuojantį parametrą, o antrasis tiesiog pridės jo dublikatą į galą.

Parametrų ištrynimas

Naudojant metodą delete galima trinti parametrus:

searchParams.delete('b');

Patikrinkime pakeitimus:

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

Parametrų iteravimas ciklu

Parametrus galima iteruoti ciklu:

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

Keli vienodi parametrai

Tarkime, mūsų eilutėje yra keli vienodi parametrai:

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

Naudojant metodą getAll galima gauti šių parametrų reikšmių masyvą:

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

Praktinės užduotys

Tarkime, duota tokia eilutė su parametrais:

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

Pridėkite į šią eilutę dar vieną parametrą test3.

Ištrinkite iš šios eilutės parametrą test2.

Pakeiskite parametro test1 reikšmę į naują.