Darbas su URLSearchParams JavaScript'e

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

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

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

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

Pabandykime gauti neegzistuojančio parametro reikšmę:

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

Parametro buvimo patikrinimas

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

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

Patikrinkime neegzistuojantį:

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

Konvertavimas į eilutę

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

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

Parametrų keitimas

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

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

Patikrinkime pakeitimus:

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

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

Patikrinkime pakeitimus:

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

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

Patikrinkime pakeitimus:

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

Pabandykime pridėti jau egzistuojantį parametrą:

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

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

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

javascriptsearchParams.delete('b');

Patikrinkime pakeitimus:

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

Parametrų iteravimas ciklu

Parametrus galima iteruoti ciklu:

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

Keli vienodi parametrai

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

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

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

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

Praktinės užduotys

Tarkime, duota tokia eilutė su parametrais:

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