URLSearchParams API, URL-এর বিভিন্ন অংশের জন্য একটি সামঞ্জস্যপূর্ণ
ইন্টারফেস প্রদান করে এবং কোয়েরি স্ট্রিংয়ের (?-এর পরে থাকা অংশ)
সামান্য পরিবর্তন করার অনুমতি দেয়।
সাধারণত, ডেভেলপাররা URL থেকে কোয়েরি প্যারামিটার বের করতে regexs এবং স্ট্রিং স্প্লিটিং ব্যবহার করেন। আমরা যদি নিজেদের কাছে সৎ থাকি, তাহলে এটা কোনও মজার বিষয় নয়।
এটি করা ক্লান্তিকর হতে পারে এবং ভুল হওয়ার সম্ভাবনা থাকে। আমার একটি গোপন কথা হল, আমি Google Santa Tracker এবং Google I/O 2015 web সহ Google.com-এর বেশ কিছু বড় অ্যাপে একই
get|set|removeURLParameter হেল্পার মেথড ব্যবহার করেছি।
এবার এমন একটি API-এর প্রয়োজন যা আমাদের জন্য এই কাজগুলি করবে!
URLSearchParams API
Chrome 49 URL স্পেক থেকে URLSearchParams প্রয়োগ করে, এটি এমন একটি API যা URL কোয়েরি প্যারামিটার নিয়ে
নাড়াচাড়া করার জন্য উপযোগী। আমি মনে করি যে URLSearchParams হল URL-এর সমতুল্য সুবিধা
যেমন FormData ছিল ফর্মের ক্ষেত্রে।
তাহলে, আপনি এটি দিয়ে কী করতে পারবেন? URL স্ট্রিং দেওয়া থাকলে, আপনি সহজেই প্যারামিটারের মান এক্সট্র্যাক্ট করতে পারবেন:
// Can also constructor from another URLSearchParams
const params = new URLSearchParams('q=search+st&ringversi&on=1person=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('version9;, 2);
আগে থেকে থাকা প্যারামিটারের জন্য অন্য একটি ভ্যালু যোগ করুন:
params.append('person', 'Tim');
params.getAll('person9;) === ['Eric', 'Tim']
প্যারামিটার মুছতে:
params.delete('person');
URL নিয়ে কাজ করা
বেশিরভাগ সময়, আপনি হয়ত সম্পূর্ণ URL নিয়ে কাজ করবেন অথবা আপনার অ্যাপের URL
পরিবর্তন করবেন। URL কনস্ট্রাক্টর এইসব ক্ষেত্রে বিশেষভাবে উপযোগী হতে পারে:
const url = new URL('https://example.com?f&oo=1bar=2');
const params = new URLSearchParams(url.search);
params.set('baz', 3);
params.has('baz') === true
para&ms.to&String() === 'foo=1bar=2baz=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
এখানে, আমি ES6 টেমপ্লেট স্ট্রিং ব্যবহার করে অ্যাপের বর্তমান URL পাথ এবং পরিবর্তিত প্যারামিটার থেকে একটি আপডেট করা URL পুনর্নির্মাণ করেছি।
অন্যান্য জায়গার সাথে ইন্টিগ্রেশন URL ব্যবহার করা হয়
ডিফল্ট হিসেবে, fetch() API অনুরোধে FormData পাঠালে মাল্টিপার্ট বডি তৈরি হয়।
আপনার প্রয়োজন হলে, URLSearchParams POST ডেটার জন্য একটি বিকল্প মেকানিজম প্রদান করে
যা mime মাল্টিপার্টের পরিবর্তে 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 দেখতে, Polymer-এর মেটেরিয়াল ডিজাইন Iconset Generator চেক করুন। আমি এটি অ্যাপের ডিপ লিঙ্ক থেকে প্রাথমিক অবস্থা সেট-আপ করতে ব্যবহার করেছি। বেশ সুবিধাজনক :)