URLSearchParams API URL-এর বিট এবং টুকরোগুলিতে একটি সামঞ্জস্যপূর্ণ ইন্টারফেস প্রদান করে এবং ক্যোয়ারী স্ট্রিং এর তুচ্ছ ম্যানিপুলেশনের অনুমতি দেয় (এর পরে যে জিনিসগুলি ? )।
প্রথাগতভাবে, ইউআরএল থেকে ক্যোয়ারী প্যারামিটার বের করার জন্য ডেভেলপাররা রেজেক্স এবং স্ট্রিং স্প্লিটিং ব্যবহার করে। যদি আমরা সবাই নিজেদের সাথে সৎ হই, তাহলে কোন মজা নেই। এটা ক্লান্তিকর এবং সঠিক পেতে ত্রুটি প্রবণ হতে পারে. আমার অন্ধকার রহস্যগুলির মধ্যে একটি হল যে আমি Google সান্তা ট্র্যাকার এবং Google I/O 2015 ওয়েব সহ বেশ কয়েকটি বড় Google.com অ্যাপে একই get|set|removeURLParameter সহায়ক পদ্ধতিগুলি পুনরায় ব্যবহার করেছি৷
এটি একটি সঠিক API এর জন্য সময় যা আমাদের জন্য এই জিনিসগুলি করে!
URLSearchParams API
Chrome 49 URL স্পেক থেকে URLSearchParams প্রয়োগ করে, একটি API যা URL ক্যোয়ারী পরামিতিগুলির সাথে ঘনিষ্ঠতার জন্য দরকারী। আমি URLSearchParams কে ইউআরএল-এর সমতুল্য সুবিধা হিসাবে মনে করি যেমন FormData ফর্মের জন্য ছিল।
তাই আপনি এটা দিয়ে কি করতে পারেন? একটি URL স্ট্রিং দেওয়া হলে, আপনি সহজেই প্যারামিটার মানগুলি বের করতে পারেন:
// Can also constructor from another URLSearchParams
const params = new URLSearchParams('q=search+string&version=1&person=Eric');
params.get('q') === "search string"
params.get('version') === "1"
Array.from(params).length === 3
for (let p of params) {
console.log(p);
}
একটি পরামিতি মান সেট করুন :
params.set('version', 2);
একটি বিদ্যমান প্যারামিটারের জন্য অন্য মান যুক্ত করুন :
params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim']
একটি প্যারামিটার(গুলি) মুছুন :
params.delete('person');
ইউআরএল নিয়ে কাজ করা
বেশিরভাগ সময়, আপনি সম্ভবত সম্পূর্ণ URL নিয়ে কাজ করবেন বা আপনার অ্যাপের URL পরিবর্তন করবেন। URL কনস্ট্রাক্টর এই ক্ষেত্রে বিশেষভাবে কার্যকর হতে পারে:
const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
params.set('baz', 3);
params.has('baz') === true
params.toString() === 'foo=1&bar=2&baz=3'
URL-এ প্রকৃত পরিবর্তন করতে, আপনি প্যারামিটার ধরতে পারেন, তাদের মান আপডেট করতে পারেন, তারপর URL আপডেট করতে history.replaceState ব্যবহার করতে পারেন।
// URL: https://example.com?version=1.0
const params = new URLSearchParams(location.search);
params.set('version', 2.0);
window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0
এখানে, আমি অ্যাপের বিদ্যমান URL পাথ এবং পরিবর্তিত প্যারাম থেকে একটি আপডেট করা URL পুনর্গঠন করতে ES6 টেমপ্লেট স্ট্রিং ব্যবহার করেছি।
অন্যান্য জায়গার সাথে ইন্টিগ্রেশন ইউআরএল ব্যবহার করা হয়
ডিফল্টরূপে, একটি fetch() API অনুরোধে FormData পাঠানো একটি মাল্টিপার্ট বডি তৈরি করে। আপনার যদি এটির প্রয়োজন হয়, URLSearchParams POST ডেটার জন্য একটি বিকল্প প্রক্রিয়া প্রদান করে যা মাইম মাল্টিপার্টের পরিবর্তে urlencoded।
const params = new URLSearchParams();
params.append('api_key', '1234567890');
fetch('https://example.com/api', {
method: 'POST',
body: params
}).then(...)
যদিও এটি এখনও Chrome এ প্রয়োগ করা হয়নি, URLSearchParams এছাড়াও URL কন্সট্রাক্টর এবং a ট্যাগের সাথে একীভূত হয়। উভয়ই একটি পঠনযোগ্য সম্পত্তি প্রদান করে আমাদের নতুন বন্ধুকে সমর্থন করে, .searchParams ক্যোয়ারী প্যারামগুলি অ্যাক্সেস করার জন্য:
const url = new URL(location);
const foo = url.searchParams.get('foo') || 'somedefault';
লিঙ্কগুলিও একটি .searchParams সম্পত্তি পায়:
const a = document.createElement('a');
a.href = 'https://example.com?filter=api';
// a.searchParams.get('filter') === 'api';
বৈশিষ্ট্য সনাক্তকরণ এবং ব্রাউজার সমর্থন
বর্তমানে, Chrome 49, Firefox 44, এবং Opera 36 সমর্থন করে URLSearchParams ।
if ('URLSearchParams' in window) {
// Browser supports URLSearchParams
}
পলিফিলের জন্য, আমি github.com/WebReflection/url-search-params এ একটি সুপারিশ করি।
ডেমো
নমুনা চেষ্টা করে দেখুন!
একটি বাস্তব-বিশ্বের অ্যাপে URLSearchParams দেখতে, পলিমারের উপাদান ডিজাইন আইকনসেট জেনারেটর দেখুন। আমি একটি গভীর লিঙ্ক থেকে অ্যাপের প্রাথমিক অবস্থা সেটআপ করতে এটি ব্যবহার করেছি। বেশ সহজ :)