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=2&b=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 প্যারামিটারটি একটি নতুন মানে পরিবর্তন করুন।