encodeURIComponent बनाम encodeURI: कब किसका उपयोग करें

दो JavaScript URL एन्कोडिंग फंक्शन्स

JavaScript URL एन्कोडिंग के लिए दो बिल्ट-इन फंक्शन प्रदान करता है: encodeURI() और encodeURIComponent()। भले ही ये देखने में एक जैसे लगें, गलत फंक्शन का उपयोग टूटे हुए URL, सुरक्षा कमजोरियों, या डेटा भ्रष्ट होने का कारण बन सकता है। इनके बीच का अंतर समझना वेब डेवलपर्स के लिए बेहद जरूरी है।

encodeURI() - संपूर्ण URI के लिए

encodeURI() को एक संपूर्ण URI को एन्कोड करने के लिए डिज़ाइन किया गया है। यह उन सभी करैक्टर्स को एन्कोड करता है, सिवाय उन करैक्टर्स के जिनका URI संरचना में कोई विशेष अर्थ होता है। खास तौर पर, यह इन्हें एन्कोड नहीं करता:

• रिज़र्व्ड करैक्टर्स: ; , / ? : @ & = + $ #
• अनरिज़र्व्ड करैक्टर्स: अक्षर, अंक, - _ . ! ~ * ' ( )

// encodeURI URI की संरचना को बनाए रखता है
encodeURI('https://example.com/path?q=hello world&lang=en')
// "https://example.com/path?q=hello%20world&lang=en"
// ध्यान दें: :, /, ?, =, & एन्कोड नहीं होते

encodeURIComponent() - URI कॉम्पोनेंट्स के लिए

encodeURIComponent() को किसी URI के एकल कॉम्पोनेंट (जैसे कोई क्वेरी पैरामीटर वैल्यू) को एन्कोड करने के लिए डिज़ाइन किया गया है। यह इन्हें छोड़कर सभी करैक्टर्स को एन्कोड करता है:

• अनरिज़र्व्ड करैक्टर्स: अक्षर, अंक, - _ . ! ~ * ' ( )

// encodeURIComponent अनरिज़र्व्ड करैक्टर्स को छोड़कर सब कुछ एन्कोड करता है
encodeURIComponent('hello world & goodbye')
// "hello%20world%20%26%20goodbye"
// ध्यान दें: & को एन्कोड किया जाता है क्योंकि यह एक रिज़र्व्ड करैक्टर है

// इसे किसी क्वेरी पैरामीटर वैल्यू के लिए उपयोग करना
const url = 'https://example.com/search?q=' +
  encodeURIComponent('cats & dogs');
// "https://example.com/search?q=cats%20%26%20dogs"

आम गलतियाँ

गलती 1: क्वेरी वैल्यू के लिए encodeURI का उपयोग

यदि आप किसी क्वेरी पैरामीटर वैल्यू को एन्कोड करने के लिए encodeURI() का उपयोग करते हैं जिसमें एम्परसैंड (&) मौजूद है, तो एम्परसैंड एन्कोड नहीं होगा और उसे एक पैरामीटर सेपरेटर के रूप में समझा जाएगा, जिससे आपका URL टूट जाएगा।

// गलत: वैल्यू में मौजूद एम्परसैंड URL को तोड़ देता है
const badUrl = 'https://api.example.com/search?q=' +
  encodeURI('Tom & Jerry');
// "https://api.example.com/search?q=Tom%20&%20Jerry"
// सर्वर देखता है: q="Tom " और एक पैरामीटर " Jerry" जिसकी कोई वैल्यू नहीं है

// सही: encodeURIComponent का उपयोग करें
const goodUrl = 'https://api.example.com/search?q=' +
  encodeURIComponent('Tom & Jerry');
// "https://api.example.com/search?q=Tom%20%26%20Jerry"
// सर्वर सही तरीके से देखता है: q="Tom & Jerry"

गलती 2: पूरे URL के लिए encodeURIComponent का उपयोग

यदि आप किसी संपूर्ण URL पर encodeURIComponent() का उपयोग करते हैं, तो यह कोलन, स्लैश, प्रश्नचिह्न, और अन्य संरचनात्मक करैक्टर्स को एन्कोड कर देगा, जिससे URL पूरी तरह से अनुपयोगी हो जाएगा।

कब किसका उपयोग करें: सरल नियम

• encodeURI() का उपयोग तब करें जब आपके पास एक संपूर्ण URI हो जिसमें स्पेस या नॉन-ASCII करैक्टर्स हो सकते हैं, लेकिन जिसकी संरचना वैध है
• encodeURIComponent() का उपयोग तब करें जब आप डेटा के किसी एकल हिस्से को एन्कोड कर रहे हों जिसे किसी URI में रखा जाएगा (क्वेरी पैरामीटर वैल्यू, पाथ सेगमेंट, आदि)

URLSearchParams विकल्प

आधुनिक JavaScript URLSearchParams API प्रदान करता है जो एन्कोडिंग को स्वचालित रूप से संभालता है। क्वेरी स्ट्रिंग्स बनाने के लिए अक्सर यही सबसे अच्छा तरीका होता है:

const params = new URLSearchParams({
  q: 'Tom & Jerry',
  category: 'cartoons & animation',
  page: '1'
});

const url = 'https://example.com/search?' + params.toString();
// "https://example.com/search?q=Tom+%26+Jerry&category=cartoons+%26+animation&page=1"

// या URL API का उपयोग करें
const url2 = new URL('https://example.com/search');
url2.searchParams.set('q', 'Tom & Jerry');
console.log(url2.toString());