URLSearchParams API, यूआरएल के बिट और हिस्सों के लिए एक जैसा इंटरफ़ेस उपलब्ध कराता है. साथ ही, क्वेरी स्ट्रिंग (? के बाद के आइटम) में छोटे-छोटे बदलाव करने की अनुमति देता है.
पहले से ही डेवलपर, यूआरएल से क्वेरी पैरामीटर निकालने के लिए रेगुलर एक्सप्रेशन और स्ट्रिंग स्प्लिटिंग का इस्तेमाल करते हैं. अगर हम सब ईमानदार रहें, तो यह मज़ेदार नहीं है.
यह उबाऊ हो सकता है और सही जवाब मिलने का खतरा रहता है. मेरी एक खास बात यह है कि मैंने Google.com के कई बड़े get|set|removeURLParameter ऐप्लिकेशन में, इन हेल्पर वाले तरीकों का फिर से इस्तेमाल किया है. इन ऐप्लिकेशन में Google सैंटा Tracker और Google I/O 2015 वेब भी शामिल है.
अब समय आ गया है कि कोई सही एपीआई काम करे, जो हमारे लिए यह काम कर सके!
URLSearchParams एपीआई
Chrome 49, यूआरएल की खास बातों से URLSearchParams को लागू करता है. यह एक ऐसा एपीआई है जो यूआरएल क्वेरी पैरामीटर के साथ काम करने के लिए उपयोगी है. मेरे ख़्याल से URLSearchParams, यूआरएल की सुविधा के बराबर है, क्योंकि FormData फ़ॉर्म के लिए था.
तो इसकी मदद से क्या-क्या किया जा सकता है? यूआरएल स्ट्रिंग को देखते हुए, पैरामीटर वैल्यू को आसानी से एक्सट्रैक्ट किया जा सकता है:
// 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);
}
पैरामीटर वैल्यू set करने के लिए:
params.set('version', 2);
मौजूदा पैरामीटर के लिए कोई दूसरी वैल्यू append:
params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim']
पैरामीटर मिटाएं:
params.delete('person');
यूआरएल के साथ काम करना
ज़्यादातर मामलों में, शायद आप पूरे यूआरएल के साथ काम करने या अपने ऐप्लिकेशन के यूआरएल में
बदलाव करने की कोशिश करते हों. 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'
यूआरएल में असल बदलाव करने के लिए, पैरामीटर इकट्ठा किए जा सकते हैं, उनकी वैल्यू अपडेट की जा सकती हैं,
फिर 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 टेंप्लेट स्ट्रिंग का इस्तेमाल किया है.
अन्य जगहों के यूआरएल के साथ इंटिग्रेशन का इस्तेमाल किया जाता है
डिफ़ॉल्ट रूप से, fetch() एपीआई अनुरोध में FormData भेजने से, कई हिस्सों वाली बॉडी बन जाती है.
अगर आपको इसकी ज़रूरत है, तो URLSearchParams डेटा को पोस्ट करने का दूसरा तरीका देता है. यह MIME मल्टीपार्ट के बजाय यूआरएल कोड में बदला गया है.
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's मटीरियल डिज़ाइन आइकॉनसेट जनरेटर पर जाएं. मैंने इसका इस्तेमाल करके, डीप लिंक से ऐप्लिकेशन की शुरुआती स्थिति सेट अप की है. काफ़ी आसान :)