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

Сіз бұрыннан білесіз, формалармен және GET сұрауларымен JavaScript-те жұмыс істегенде төмендегідей жолдар пайда болады:

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

Кейде осы жолдан кейбір параметрдің мәнін бағдарламалық түрде өзгерту қажет болады. Мұны істейтін код жазу өте ыңғайлы емес. Сондықтан JavaScript осындай жолдармен жұмыс істеу үшін арнайы URLSearchParams класын қамтиды.

Параметр ретінде параметрлер жолын беріп, осы кластың нысанын жасайық:

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

Жасалған нысанның қандай әдістері бар екенін көрейік.

Параметр мәнін алу

get әдісінің көмегімен параметрдің мәнін алуға болады:

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

Жоқ параметрдің мәнін алуға тырысайық:

let res = searchParams.get('x');
console.log(res); // null шығарады

Параметрдің бар екенін тексеру

has әдісінің көмегімен параметрдің бар екенін тексеруге болады. Бар параметрді тексерейік:

let res = searchParams.has('a');
console.log(res); // true шығарады

Жоқ параметрді тексерейік:

let res = searchParams.has('x');
console.log(res); // false шығарады

Жолға түрлендіру

toString әдісінің көмегімен біздің нысанымызды қайта жолға түрлендіруге болады:

let res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3' шығарады

Параметрлерді өзгерту

set әдісінің көмегімен параметрдің мәнін өзгертуге болады:

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

Өзгерістерді тексерейік:

let res = searchParams.toString();
console.log(res); // 'a=1&b=x&c=3' шығарады

Параметрлерді қосу

set әдісінің көмегімен сонымен қатар жаңа параметр қосуға болады:

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

Өзгерістерді тексерейік:

let res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3&d=4' шығарады

Параметрлерді қосу

append әдісінің көмегімен сонымен қатар жаңа параметр қосуға болады:

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

Өзгерістерді тексерейік:

let res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3&d=4' шығарады

Бар параметрді қосып көрейік:

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

Бұл жағдайда біздің әдіс бірдей атаулы параметрді соңына қосады:

let res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3&a=4' шығарады

Бұл set және append әдістерінің айырмашылығын көрсетеді. Біріншісі бар параметрді өзгертеді, ал екіншісі оның көшірмесін соңына қосады.

Параметрлерді жою

delete әдісінің көмегімен параметрлерді жоюға болады:

searchParams.delete('b');

Өзгерістерді тексерейік:

let res = searchParams.toString();
console.log(res); // 'a=1&c=3' шығарады

Параметрлерді циклмен қайталау

Параметрлерді циклмен қайталауға болады:

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

Бірнеше бірдей параметр

Біздің жолымызда бірнеше бірдей параметр болсын:

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

getAll әдісінің көмегімен осы параметрлердің мәндерінің массивін алуға болады:

let res = searchParams.getAll('a');
console.dir(res); // [1, 2] шығарады

Практикалық тапсырмалар

Параметрлері бар келесі жол берілген делік:

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

Бұл жолға тағы бір test3 параметрін қосыңыз.

Бұл жолдан test2 параметрін жойыңыз.

test1 параметрін жаңа мәнге өзгертіңіз.