JavaScript-те URLSearchParams-пен жұмыс

Сіз бұрыннан білесіз, формалармен және 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';