encodeURI और encodeURIComponent में क्या अंतर है?

encodeURI() क्या है?

encodeURI() एक बिल्ट-इन जावास्क्रिप्ट फ़ंक्शन है जिसे किसी पूरे Uniform Resource Identifier (URI) को एनकोड करने के लिए डिज़ाइन किया गया है। यह उन कैरेक्टर्स को उनके percent-encoded रूप में बदल देता है जो किसी URI में मान्य नहीं होते, लेकिन यह जानबूझकर उन कैरेक्टर्स को बरकरार रखता है जिनका URI के भीतर संरचनात्मक महत्व होता है।

विशेष रूप से, encodeURI() निम्नलिखित कैरेक्टर्स को एनकोड नहीं करता: A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #। इसका मतलब है कि एनकोडिंग के बाद URL की समग्र संरचना बरकरार रहती है।

// encodeURI() URL की संरचना को बरकरार रखता है
const url = 'https://example.com/my page?name=John Doe&city=New York';
console.log(encodeURI(url));
// "https://example.com/my%20page?name=John%20Doe&city=New%20York"
// ध्यान दें: :, /, ?, & और = एनकोड नहीं होते

यह व्यवहार encodeURI() को तब आदर्श बनाता है जब आपके पास कोई पूरा URL हो जिसमें स्पेस या non-ASCII कैरेक्टर्स हो सकते हैं, लेकिन जिसके संरचनात्मक कैरेक्टर्स (प्रोटोकॉल सेपरेटर, पाथ डिलिमिटर, क्वेरी स्ट्रिंग मार्कर) को जस का तस रहना चाहिए।

encodeURIComponent() क्या है?

encodeURIComponent() को किसी URI के एकल कंपोनेंट, जैसे किसी क्वेरी पैरामीटर वैल्यू या पाथ सेगमेंट, को एनकोड करने के लिए डिज़ाइन किया गया है। encodeURI() के विपरीत, यह लगभग हर विशेष कैरेक्टर को एनकोड कर देता है, जिनमें वे भी शामिल हैं जिनका URL में संरचनात्मक महत्व होता है।

encodeURIComponent() केवल इन कैरेक्टर्स को एनकोड नहीं करता: A-Z a-z 0-9 - _ . ! ~ * ' ( )। बाकी सब कुछ, जिसमें /, ?, &, =, # और : शामिल हैं, percent-encoded हो जाता है।

// encodeURIComponent() unreserved कैरेक्टर्स को छोड़कर सब कुछ एनकोड करता है
const value = 'Tom & Jerry / Friends?';
console.log(encodeURIComponent(value));
// "Tom%20%26%20Jerry%20%2F%20Friends%3F"
// ध्यान दें: &, / और ? एनकोड होते हैं

// क्वेरी पैरामीटर के साथ एक URL बनाना
const url = 'https://example.com/search?q=' + encodeURIComponent(value);
// "https://example.com/search?q=Tom%20%26%20Jerry%20%2F%20Friends%3F"

चूँकि यह संरचनात्मक कैरेक्टर्स को एनकोड कर देता है, इसलिए आपको किसी पूरे URL पर encodeURIComponent() का उपयोग कभी नहीं करना चाहिए। ऐसा करने से ://, सभी / पाथ सेपरेटर और ? क्वेरी डिलिमिटर एनकोड हो जाएँगे, जिससे URL अनुपयोगी हो जाएगा।

एक नज़र में मुख्य अंतर

विशेषता	encodeURI()	encodeURIComponent()
उद्देश्य	पूरे URI को एनकोड करना	किसी URI कंपोनेंट को एनकोड करना
/ एनकोड करता है	नहीं	हाँ (%2F)
? एनकोड करता है	नहीं	हाँ (%3F)
& एनकोड करता है	नहीं	हाँ (%26)
= एनकोड करता है	नहीं	हाँ (%3D)
# एनकोड करता है	नहीं	हाँ (%23)
: एनकोड करता है	नहीं	हाँ (%3A)
स्पेस एनकोड करता है	हाँ (%20)	हाँ (%20)
Unicode एनकोड करता है	हाँ	हाँ

प्रत्येक फ़ंक्शन का उपयोग कब करें

नियम सीधा है: जब आप किसी पूरे URL को उसकी संरचना मान्य रखते हुए एनकोड करना चाहते हैं, तब encodeURI() का उपयोग करें। जब आप किसी एकल वैल्यू को एनकोड करना चाहते हैं जिसे URL में डाला जाएगा, तब encodeURIComponent() का उपयोग करें।

// परिदृश्य 1: स्पेस वाले पूरे URL को एनकोड करना
const fullUrl = 'https://example.com/my documents/file name.pdf';
const encoded = encodeURI(fullUrl);
// "https://example.com/my%20documents/file%20name.pdf"

// परिदृश्य 2: हिस्सों से एक URL बनाना
const baseUrl = 'https://api.example.com/search';
const query = 'price >= 100 & category = books';
const finalUrl = baseUrl + '?q=' + encodeURIComponent(query);
// "https://api.example.com/search?q=price%20%3E%3D%20100%20%26%20category%20%3D%20books"

// परिदृश्य 3: किसी redirect URL को पैरामीटर के रूप में एनकोड करना
const redirectUrl = 'https://example.com/callback?token=abc';
const loginUrl = 'https://auth.example.com/login?redirect=' +
  encodeURIComponent(redirectUrl);
// पूरा redirect URL एक एकल पैरामीटर वैल्यू के रूप में एनकोड होता है

आम गलतियाँ और उनसे कैसे बचें

गलती 1: क्वेरी पैरामीटर वैल्यू के लिए encodeURI() का उपयोग करना। चूँकि encodeURI(), & या = को एनकोड नहीं करता, इसलिए किसी ऐसी पैरामीटर वैल्यू पर इसका उपयोग करना जिसमें ये कैरेक्टर्स हों, क्वेरी स्ट्रिंग की संरचना को बिगाड़ देगा।

// गलत
const bad = 'https://example.com/search?q=' + encodeURI('salt & pepper');
// "https://example.com/search?q=salt%20&%20pepper"
// सर्वर q="salt " और एक अतिरिक्त पैरामीटर " pepper" देखता है

// सही
const good = 'https://example.com/search?q=' + encodeURIComponent('salt & pepper');
// "https://example.com/search?q=salt%20%26%20pepper"

गलती 2: किसी पूरे URL पर encodeURIComponent() का उपयोग करना। यह सभी स्लैश, कोलन और प्रश्नचिह्नों को एनकोड करके URL की संरचना को नष्ट कर देता है।

// गलत
console.log(encodeURIComponent('https://example.com/path?key=value'));
// "https%3A%2F%2Fexample.com%2Fpath%3Fkey%3Dvalue"
// यह अब एक मान्य URL नहीं रहा!

// सही
console.log(encodeURI('https://example.com/path?key=value'));
// "https://example.com/path?key=value" (पहले से मान्य है, एनकोड करने के लिए कुछ नहीं)

गलती 3: डबल एनकोडिंग। अगर कोई स्ट्रिंग पहले से percent-encoded है, तो उसे दोबारा एनकोड करने पर % चिह्न एनकोड हो जाएँगे, जिससे %20, %2520 में बदल जाएगा। एनकोडिंग फ़ंक्शन लागू करने से पहले हमेशा जाँच लें कि कोई वैल्यू पहले से एनकोड हो चुकी है या नहीं।

एक सुरक्षित आधुनिक विकल्प URL और URLSearchParams API हैं, जो एनकोडिंग को स्वचालित रूप से संभालते हैं और आपको इन जोखिमों से पूरी तरह बचने में मदद करते हैं।