Коркард бо 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';
Задание 1

Ба ин сатр як параметри дигари test3 илова кунед.

Задание 2

Параметри test2-ро аз ин сатр нест кунед.

Задание 3

Параметри test1-ро ба қимати нав тағйир диҳед.