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 ახალი მნიშვნელობა.