जावास्क्रिप्ट में URL पैरामीटर कैसे प्राप्त करें: हुड के नीचे विश्लेषण

जावास्क्रिप्ट में URL पैरामीटर: सरल से जटिल तक

प्रत्येक डेवलपर को कम से कम एक बार इस कार्य का सामना करना पड़ा है: ब्राउज़र के एड्रेस बार से डेटा निकालना। आप एक पेज खोलते हैं, कुछ इस तरह देखते हैं /products?id=42&category=books — और समझ जाते हैं: वर्णों के इस सेट के अंदर कहीं महत्वपूर्ण डेटा छिपा हुआ है। इसे कैसे निकालें? यह प्रश्न, जिसने Stack Overflow पर हज़ारों वोट एकत्र किए हैं, इस प्रकार है: "How can I get query string values in JavaScript?"। आज हम केवल तैयार उत्तर नहीं देंगे — हम इस प्रक्रिया के हुड के नीचे झाँकेंगे और समझेंगे कि जावास्क्रिप्ट में URL पार्सिंग सभी स्तरों पर कैसे काम करती है।

यह क्यों महत्वपूर्ण है? क्योंकि URL पैरामीटर आधुनिक वेब की नींव हैं। पृष्ठों के बीच डेटा स्थानांतरण, उत्पाद फ़िल्टरिंग, एनालिटिक्स, रेफरल लिंक — ये सब प्रश्न चिह्न के बाद सरल स्ट्रिंग्स पर आधारित हैं। और यदि आप जावास्क्रिप्ट में लिखते हैं, तो query string के साथ काम करने की क्षमता कोई विकल्प नहीं, बल्कि एक अनिवार्य कौशल है।

query string क्या है और इसे ब्राउज़र में कैसे देखें

शुरुआत में, आइए शब्दों को समझते हैं। Query string (अनुरोध स्ट्रिंग) URL का वह भाग है जो प्रश्न चिह्न के बाद शुरू होता है। उदाहरण के लिए, पते में:

https://example.com/search?q=javascript&lang=ru&page=1

? के बाद जो कुछ भी आता है — वह query string है। यह एम्परसेंड (&) द्वारा अलग किए गए कुंजी=मान जोड़ों से बनी होती है। प्रत्येक कुंजी कई बार आ सकती है — और यह याद रखना महत्वपूर्ण है।

जावास्क्रिप्ट में यह स्ट्रिंग प्राप्त करने के लिए, बस प्रॉपर्टी तक पहुँचें:

const queryString = window.location.search;\nconsole.log(queryString); // "?q=javascript&lang=ru&page=1"

ध्यान दें: प्रॉपर्टी प्रश्न चिह्न सहित स्ट्रिंग लौटाती है। यह आगे के सभी संचालन का प्रारंभिक बिंदु है।

विधि #1: URLSearchParams — आधुनिक और सरल

यदि आप आधुनिक ब्राउज़रों के लिए कोड लिख रहे हैं (और यह 99% मामलों में है), तो अंतर्निहित API URLSearchParams का उपयोग करें। यह 2016 में सामने आया और तब से URL पैरामीटर के साथ काम करने के लिए डी-फैक्टो मानक बन गया है। आइए देखें कि यह कैसे काम करता है:

// अनुरोध स्ट्रिंग प्राप्त करें\nconst queryString = window.location.search;\n\n// URLSearchParams ऑब्जेक्ट बनाएँ\nconst params = new URLSearchParams(queryString);\n\n// कुंजी द्वारा मान प्राप्त करें\nconst q = params.get('q');       // "javascript"\nconst lang = params.get('lang'); // "ru"\nconst page = params.get('page'); // "1"\n\n// जाँचें कि पैरामीटर मौजूद है या नहीं\nconsole.log(params.has('lang')); // true\n\n// यदि कुंजी दोहराई जाती है तो सभी मान प्राप्त करें\nparams.append('q', 'python');\nconsole.log(params.getAll('q')); // ["javascript", "python"]\n\n// सभी पैरामीटर पर पुनरावृति करें\nfor (const [key, value] of params) {\n    console.log(`${key}: ${value}`);\n}\n// आउटपुट:\n// q: javascript\n// lang: ru\n// page: 1\n// q: python

हुड के नीचे, URLSearchParams स्वचालित रूप से एन्कोडेड वर्णों को डीकोड करता है (उदाहरण के लिए, %20 को स्पेस में बदलता है) और दोहराई जाने वाली कुंजियों जैसे जटिल मामलों को सही ढंग से संभालता है। यह न केवल सुविधाजनक है — यह सुरक्षित भी है।

यह हुड के नीचे कैसे काम करता है?

जब आप new URLSearchParams(queryString) बनाते हैं, तो जावास्क्रिप्ट इंजन निम्नलिखित चरण निष्पादित करता है:

\n
• अग्रणी प्रश्न चिह्न हटाता है (यदि मौजूद है)।
\n
• स्ट्रिंग को & वर्ण द्वारा विभाजित करता है, जोड़ों की एक सरणी प्राप्त करता है।
\n
• प्रत्येक जोड़ी को पहले = वर्ण द्वारा विभाजित करता है कुंजी और मान में।
\n
• URI घटकों को डीकोड करता है — %20 को स्पेस, %23 को # आदि से बदलता है।
\n
• सब कुछ एक संरचना में सहेजता है, जहाँ प्रत्येक कुंजी मानों की एक सरणी से मेल खाती है (भले ही वह एक ही हो)।
\n

यह प्रक्रिया पूरी तरह से प्रतिवर्ती है। आप पैरामीटर को संशोधित कर सकते हैं