Работа з URLSearchParams у JavaScript

Як вы ўжо ведаеце, пры работе з формамі і GET запытамі ў JavaScript узнікаюць радкі такіх выгляду:

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

Часам трэба праграмным чынам змяніць значэнне якого-небудзь параметра з гэтага радка. Пісаць код, які робіць гэта, не вельмі зручна. Таму ў JavaScript убудаваны спецыяльны клас URLSearchParams для работы з такімі радкамі.

Давайце створым аб'ект гэтага класа, перадаўшы параметрам наш радок з параметрамі:

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

Давайце паглядзім, якія метады ёсць у створанага аб'екта.

Атрыманне значэння параметра

З дапамогай метаду get можна атрымаць значэнне параметра:

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

Паспрабуем атрымаць значэнне неіснуючага параметра:

javascriptlet res = searchParams.get('x');
console.log(res); // выведзе null

Праверка наяўнасці параметра

З дапамогай метаду has можна праверыць наяўнасць параметра. Праверым існуючы параметр:

javascriptlet res = searchParams.has('a');
console.log(res); // выведзе true

Праверым неіснуючы:

javascriptlet res = searchParams.has('x');
console.log(res); // выведзе false

Пераўтварэнне ў радок

З дапамогай метаду toString можна пераўтварыць наш аб'ект назад у радок:

javascriptlet res = searchParams.toString();
console.log(res); // выведзе 'a=1&b=2&c=3'

Змяненне параметраў

З дапамогай метаду set можна змяніць значэнне параметра:

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

Праверым змены:

javascriptlet res = searchParams.toString();
console.log(res); // выведзе 'a=1&b=x&c=3'

Даданне параметраў

З дапамогай метаду set можна таксама дадаць новы параметр:

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

Праверым змены:

javascriptlet res = searchParams.toString();
console.log(res); // выведзе 'a=1&b=2&c=3&d=4'

Даданне параметраў

З дапамогай метаду append можна таксама дадаць новы параметр:

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

Праверым змены:

javascriptlet res = searchParams.toString();
console.log(res); // выведзе 'a=1&b=2&c=3&d=4'

Давайце паспрабуем дадаць ужо існуючы параметр:

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

У гэтым выпадку наш метад проста дадасць аднайменны параметр у канец:

javascriptlet res = searchParams.toString();
console.log(res); // выведзе 'a=1&b=2&c=3&a=4'

У гэтым праяўляецца розніца паміж метадамі set і append. Першы зменіць існуючы параметр, а другі проста дадасць яго дубль у канец.

Выдаленне параметраў

З дапамогай метаду delete можна выдаляць параметры:

javascriptsearchParams.delete('b');

Праверым змены:

javascriptlet res = searchParams.toString();
console.log(res); // выведзе 'a=1&c=3'

Перабор параметраў цыклам

Параметры можна перабіраць цыклам:

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

Некалькі аднолькавых параметраў

Хай у нашым радку некалькі аднолькавых параметраў:

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

З дапамогай метаду getAll можна атрымаць масіў значэнняў гэтых параметраў:

javascriptlet res = searchParams.getAll('a');
console.dir(res); // выведзе [1, 2]

Практычныя задачы

Хай дана наступная радок з параметрамі:

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