URLSearchParams-ի աշխատանքը JavaScript-ում

Ինչպես արդեն գիտեք, JavaScript-ում ֆորմաների և GET հարցումների հետ աշխատելիս առաջանում են այսպիսի տեսքի տողեր.

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';