एक ही भाषा में बात करें: JavaScript अनुप्रयोगों का अंतर्राष्ट्रीयकरण

आपका एप्लिकेशन दुनिया की किसी भी भाषा में बात करेगा

कल्पना करें: आपने एक शानदार सेवा बनाई, इसे इंटरनेट पर डाला, और जर्मनी, जापान या ब्राजील के उपयोगकर्ता 10 सेकंड के भीतर साइट बंद कर देते हैं। क्यों? क्योंकि वे बटन पर लिखी एक भी बात नहीं समझते हैं। वैश्वीकरण के युग में JavaScript अंतर्राष्ट्रीयकरण कोई विलासिता नहीं, बल्कि एक बुनियादी आवश्यकता है। यदि आप चाहते हैं कि आपका उत्पाद दुनिया (या कम से कम कुछ पड़ोसी देशों) को जीत ले, तो i18n JavaScript के बिना काम नहीं चलेगा।

इस लेख में, हम देखेंगे कि एक सामान्य एप्लिकेशन को बहुभाषी बहुभाषाविद् में कैसे बदला जाए। आप जानेंगे कि कौन सी i18n लाइब्रेरीज़ मौजूद हैं, अनुवाद फ़ाइलों को ठीक से कैसे व्यवस्थित करें, और हम अंतर्राष्ट्रीयकरण के लिए वास्तविक कोड लिखेंगे। चलिए शुरू करते हैं!

अंतर्राष्ट्रीयकरण क्या है और इसकी आवश्यकता क्यों है?

तकनीकी शब्द i18n (जहाँ 18 पहले "i" और अंतिम "n" के बीच अक्षरों की संख्या है) का अर्थ है विभिन्न भाषाओं और संस्कृतियों के साथ काम करने के लिए एप्लिकेशन की वास्तुशिल्प तैयारी। यह केवल शब्दों का अनुवाद नहीं है - यह दिनांक, संख्या, मुद्रा, पाठ दिशा (बाएं से दाएं या दाएं से बाएं) और यहां तक कि रंग योजनाओं के प्रारूपों का अनुकूलन है।

दिनांक "03/04/2025" की कल्पना करें। अमेरिकी निवासी के लिए यह 3 अप्रैल है, जबकि यूरोपीय के लिए यह 4 मार्च है। और यदि आपका एप्लिकेशन जापान के उपयोगकर्ता को डॉलर में मूल्य दिखाता है? आपदा। वेब अनुप्रयोगों का अंतर्राष्ट्रीयकरण कोड स्तर पर इन सभी समस्याओं का समाधान करता है।

अभी क्यों शुरू करें?

\n
• दर्शकों की वृद्धि — 75% उपयोगकर्ता अपनी मातृभाषा में खरीदारी करना पसंद करते हैं
\n
• SEO बूस्ट — खोज इंजन बहुभाषी साइटों को स्थानीय परिणामों में उच्च रैंक देते हैं
\n
• उपयोगिता — बाउंस दर में कमी और साइट पर समय में वृद्धि
\n

JavaScript में i18n के मुख्य दृष्टिकोण

JavaScript स्थानीयकरण के दो वैश्विक दृष्टिकोण हैं: स्व-निर्मित समाधान और तैयार लाइब्रेरीज़ का उपयोग। हम दोनों पर विचार करेंगे, लेकिन मैं दृढ़ता से दूसरे विकल्प की सलाह देता हूं - कम बग, अधिक सुविधाएं।

स्व-निर्मित अंतर्राष्ट्रीयकरण: मूल उदाहरण

यदि आपका एप्लिकेशन 10 पंक्तियों का एक सरल लैंडिंग पेज है, तो आप लाइब्रेरीज़ के बिना काम कर सकते हैं। आइए अनुवादों के साथ एक ऑब्जेक्ट बनाएं:

const translations = {\n    ru: {\n        greeting: "Привет, мир!",\n        button: "Нажми меня"\n    },\n    en: {\n        greeting: "Hello, World!",\n        button: "Click me"\n    },\n    de: {\n        greeting: "Hallo, Welt!",\n        button: "Klick mich"\n    }\n};

अब भाषा बदलने के लिए फ़ंक्शन:

function translate(lang) {\n    document.querySelectorAll('[data-i18n]').forEach(el => {\n        const key = el.dataset.i18n;\n        if (translations[lang] && translations[lang][key]) {\n            el.textContent = translations[lang][key];\n        }\n    });\n}\n\n// HTML में उपयोग:\n// <h1 data-i18n="greeting">Привет, мир!</h1>\n// <button data-i18n="button">Нажми меня</button>

यह काम करता है, लेकिन कल्पना करें कि आपके पास 500 पंक्तियों का टेक्स्ट है, साथ ही बहुवचन (1 सेब, 2 सेब, 5 सेब) और इंटरपोलेशन (नमस्ते, {username}) को संभालने की आवश्यकता है। यहाँ अंतर्राष्ट्रीयकरण लाइब्रेरीज़ काम आती हैं।

JavaScript के लिए शीर्ष i18n लाइब्रेरीज़

i18n लाइब्रेरीज़ का बाजार विविध है। यहाँ तीन नेता हैं जो आपके ध्यान के योग्य हैं:

1. i18next — लाइब्रेरीज़ का राजा

i18next JavaScript वास्तविक मानक है। यह React, Vue, Angular और शुद्ध JS के साथ काम करता है। यह बहुवचन, इंटरपोलेशन, नेस्टेड अनुवाद और मांग पर संसाधन लोडिंग का समर्थन करता है।

import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\n\ni18n.use(initReactI18next).init({\n    resources: {\n        en: {\n            translation: {\n                welcome: "Welcome b