M

MLOG

मराठी

जावास्क्रिप्ट Intl API सह जागतिक पोहोच मिळवा. तारीख, संख्या, चलन फॉरमॅटिंगसाठी आंतरराष्ट्रीयीकरणाच्या सर्वोत्तम पद्धती जाणून घ्या आणि जगभरात अखंड वापरकर्ता अनुभव सुनिश्चित करा.

जावास्क्रिप्ट Intl API: जागतिक प्रेक्षकांसाठी आंतरराष्ट्रीयीकरणाची सर्वोत्तम पद्धती

आजच्या जोडलेल्या जगात, जागतिक प्रेक्षकांसाठी वेब ॲप्लिकेशन्स तयार करणे महत्त्वाचे आहे. जावास्क्रिप्ट Intl API आंतरराष्ट्रीयीकरणासाठी (i18n) शक्तिशाली साधने प्रदान करते, ज्यामुळे तुम्हाला विविध लोकेलच्या प्रघातानुसार तारखा, संख्या, चलने आणि बरेच काही फॉरमॅट करता येते. हा लेख खऱ्या अर्थाने जागतिक ॲप्लिकेशन्स तयार करण्यासाठी Intl API चा लाभ घेण्यासाठी सर्वोत्तम पद्धतींचा शोध घेतो.

आंतरराष्ट्रीयीकरण (i18n) आणि स्थानिकीकरण (l10n) समजून घेणे

Intl API च्या तपशिलात जाण्यापूर्वी, आंतरराष्ट्रीयीकरण (i18n) आणि स्थानिकीकरण (l10n) यामधील फरक समजून घेणे महत्त्वाचे आहे. I18n म्हणजे ॲप्लिकेशन्स अशा प्रकारे डिझाइन आणि विकसित करणे की अभियांत्रिकी बदलांशिवाय त्यांना विविध भाषा आणि प्रदेशांसाठी सहजपणे जुळवून घेता येईल. L10n, दुसरीकडे, म्हणजे आंतरराष्ट्रीयीकृत ॲप्लिकेशनला मजकूर भाषांतरित करून आणि इतर लोकेल-विशिष्ट घटक सानुकूलित करून एका विशिष्ट लोकेलसाठी जुळवून घेण्याची प्रक्रिया.

Intl API i18n पैलूवर लक्ष केंद्रित करते, लोकेल-संवेदनशील डेटा हाताळण्यासाठी यंत्रणा प्रदान करते, तर स्थानिकीकरणात सामान्यतः भाषांतरे आणि लोकेल-विशिष्ट कॉन्फिगरेशन्स प्रदान करणे समाविष्ट असते.

Intl API चे प्रमुख घटक

Intl API मध्ये अनेक प्रमुख ऑब्जेक्ट्स आहेत, प्रत्येक आंतरराष्ट्रीयीकरणाच्या विशिष्ट पैलूंना हाताळण्यासाठी जबाबदार आहे:

Intl API वापरण्यासाठी सर्वोत्तम पद्धती

Intl API चा प्रभावीपणे वापर करण्यासाठी आणि आपल्या जागतिक प्रेक्षकांसाठी सकारात्मक वापरकर्ता अनुभव सुनिश्चित करण्यासाठी, खालील सर्वोत्तम पद्धतींचा विचार करा:

१. योग्य लोकेल निर्दिष्ट करा

आंतरराष्ट्रीयीकरणाचा पाया योग्य लोकेल निर्दिष्ट करणे आहे. लोकेल भाषा, प्रदेश आणि फॉरमॅटिंगसाठी वापरल्या जाणार्‍या कोणत्याही विशिष्ट प्रकारांना ओळखतो. आपण वापरकर्त्याची पसंतीची लोकेल navigator.language प्रॉपर्टी किंवा Accept-Language HTTP हेडरवरून मिळवू शकता.

Intl ऑब्जेक्ट्स तयार करताना, आपण लोकेलला स्ट्रिंग किंवा स्ट्रिंगच्या ॲरे म्हणून निर्दिष्ट करू शकता. आपण ॲरे प्रदान केल्यास, API उपलब्ध पर्यायांमधून सर्वोत्तम जुळणारा लोकेल शोधण्याचा प्रयत्न करेल.

उदाहरण:

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

वापरकर्त्याची पसंतीची लोकेल उपलब्ध नसल्यास, आपण एक फॉलबॅक लोकेल प्रदान करू शकता. उदाहरणार्थ, वापरकर्त्याचा ब्राउझर असमर्थित लोकेल नोंदवल्यास आपण 'en-US' डीफॉल्ट म्हणून वापरू शकता.

२. तारीख आणि वेळ स्वरूपनासाठी Intl.DateTimeFormat चा वापर करा

स्थानिकीकृत अनुभव देण्यासाठी तारखा आणि वेळा योग्यरित्या फॉरमॅट करणे महत्त्वाचे आहे. Intl.DateTimeFormat ऑब्जेक्ट आपल्याला विशिष्ट लोकेलच्या प्रघातानुसार तारखा आणि वेळा फॉरमॅट करण्याची परवानगी देतो.

आपण वर्ष, महिना, दिवस, तास, मिनिट आणि सेकंद स्वरूपनासारखे विविध पर्याय निर्दिष्ट करून स्वरूपन सानुकूलित करू शकता. आपण वेळ क्षेत्र (time zone) देखील निर्दिष्ट करू शकता जेणेकरून जगाच्या विविध भागांतील वापरकर्त्यांसाठी तारखा आणि वेळा योग्यरित्या प्रदर्शित होतील.

उदाहरण:

const locale = 'de-DE'; // जर्मन (जर्मनी)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // आउटपुट: उदा. "22. Mai 2024, 14:30"
console.log(formattedDate);

हे उदाहरण सध्याची तारीख आणि वेळ जर्मन (जर्मनी) लोकेलनुसार फॉरमॅट करते, ज्यात वर्ष, महिना, दिवस, तास आणि मिनिट यांचा समावेश आहे. हे 'Europe/Berlin' टाइम झोन देखील निर्दिष्ट करते.

जगभरात वापरल्या जाणार्‍या विविध तारीख आणि वेळ स्वरूपांचा विचार करणे लक्षात ठेवा. उदाहरणार्थ, यूएस MM/DD/YYYY वापरते, तर इतर अनेक देश DD/MM/YYYY वापरतात.

३. संख्या, चलन आणि टक्केवारी स्वरूपनासाठी Intl.NumberFormat वापरा

Intl.NumberFormat ऑब्जेक्ट लोकेल-विशिष्ट प्रघातांनुसार संख्या, चलने आणि टक्केवारी फॉरमॅट करण्याचा एक लवचिक मार्ग प्रदान करतो. आपण चलन, शैली (दशांश, चलन, किंवा टक्के), किमान आणि कमाल अपूर्णांक अंक आणि बरेच काही यासारखे पर्याय निर्दिष्ट करून स्वरूपन सानुकूलित करू शकता.

उदाहरण (चलन स्वरूपन):

const locale = 'ja-JP'; // जपानी (जपान)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // आउटपुट: उदा. "￥12,346"
console.log(formattedAmount);

हे उदाहरण 12345.67 या संख्येला जपानी येन (JPY) म्हणून फॉरमॅट करते. चलन चिन्ह (￥) आणि गट विभाजक (,) जपानी लोकेलनुसार आपोआप कसे समायोजित केले जातात हे लक्षात घ्या.

उदाहरण (टक्केवारी स्वरूपन):

const locale = 'ar-EG'; // अरबी (इजिप्त)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // आउटपुट: उदा. "٧٥٫٠٠٪"
console.log(formattedPercentage);

हे उदाहरण 0.75 या संख्येला अरबी (इजिप्त) मध्ये टक्केवारी म्हणून फॉरमॅट करते. आउटपुटमध्ये अरबी टक्केवारी चिन्ह (٪) आणि दोन दशांश स्थळे समाविष्ट आहेत.

चलन स्वरूपनासाठी महत्त्वाचे विचार:

४. Intl.PluralRules सह अनेकवचन योग्यरित्या हाताळा

अनेकवचन नियम भाषांनुसार लक्षणीयरीत्या बदलतात. उदाहरणार्थ, इंग्रजीमध्ये एकवचनी आणि अनेकवचनी रूपांसह सोपे नियम आहेत, तर इतर भाषांमध्ये संख्येच्या मूल्यावर आधारित अधिक जटिल नियम आहेत. Intl.PluralRules ऑब्जेक्ट आपल्याला दिलेल्या संख्येसाठी आणि लोकेलसाठी योग्य अनेकवचन रूप निर्धारित करण्यास मदत करते.

उदाहरण:

const locale = 'ru-RU'; // रशियन (रशिया)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // товар (एकवचन)
    case 'few': return 'товара'; // товара (काही)
    case 'many': return 'товаров'; // товаров (अनेक)
    default: return 'товаров'; // डीफॉल्टनुसार अनेक
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // आउटपुट: "5 товаров"

हे उदाहरण रशियन भाषेत "товар" (वस्तू) शब्दासाठी योग्य अनेकवचन रूप मिळविण्यासाठी Intl.PluralRules कसे वापरावे हे दर्शवते. रशियन भाषेत संख्या १, २-४, किंवा ५-९ मध्ये संपते यावर अवलंबून वेगवेगळी अनेकवचनी रूपे आहेत.

५. Intl.ListFormat सह सूची फॉरमॅट करा

वस्तूंची सूची सादर करताना, स्वरूपन लोकेलनुसार बदलू शकते. Intl.ListFormat ऑब्जेक्ट आपल्याला लोकेल-विशिष्ट प्रघातांनुसार सूची फॉरमॅट करण्याची परवानगी देतो, ज्यात भिन्न conjunctions (उदा., "आणि", "किंवा") आणि सूची विभाजक (उदा., स्वल्पविराम, अर्धविराम) यांचा वापर समाविष्ट आहे.

उदाहरण:

const locale = 'es-ES'; // स्पॅनिश (स्पेन)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // आउटपुट: "manzanas, naranjas y plátanos"
console.log(formattedList);

हे उदाहरण स्पॅनिश (स्पेन) भाषेत फळांची सूची फॉरमॅट करते, शेवटच्या दोन वस्तूंना जोडण्यासाठी "y" (आणि) या conjunction चा वापर करते.

६. Intl.RelativeTimeFormat सह सापेक्ष वेळ फॉरमॅट करा

सापेक्ष वेळ (उदा., "काल", "2 तासांत") प्रदर्शित करणे वेळेची माहिती सादर करण्याचा एक वापरकर्ता-अनुकूल मार्ग प्रदान करतो. Intl.RelativeTimeFormat ऑब्जेक्ट आपल्याला लोकेल-विशिष्ट प्रघातांनुसार सापेक्ष वेळ फॉरमॅट करण्याची परवानगी देतो.

उदाहरण:

const locale = 'fr-CA'; // फ्रेंच (कॅनडा)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // आउटपुट: "hier"
console.log(rtf.format(2, 'day')); // आउटपुट: "dans 2 jours"

हे उदाहरण फ्रेंच (कॅनडा) मध्ये सापेक्ष वेळ फॉरमॅट करते. आउटपुट "hier" (काल) आणि "dans 2 jours" (२ दिवसांत) दर्शवते.

numeric पर्याय संख्या कशा प्रदर्शित केल्या जातात हे नियंत्रित करतो. `'auto'` उपलब्ध असताना सापेक्ष शब्द (जसे की "काल") प्रदर्शित करतो, आणि अन्यथा संख्या प्रदर्शित करतो. `'always'` नेहमी संख्या प्रदर्शित करतो.

७. Intl.Collator सह स्ट्रिंगची जुळवणी करा

स्ट्रिंगची तुलना लोकेल-संवेदनशील असते. स्ट्रिंग ज्या प्रकारे क्रमवारी लावल्या जातात ते भाषेनुसार बदलते. उदाहरणार्थ, जर्मनमध्ये, "ä" हे अक्षर सामान्यतः "a" सारखे क्रमवारी लावले जाते, तर स्वीडिशमध्ये ते "z" नंतर क्रमवारी लावले जाते. `Intl.Collator` ऑब्जेक्ट आपल्याला विशिष्ट लोकेलच्या नियमांनुसार स्ट्रिंगची तुलना करण्याची परवानगी देतो.

उदाहरण:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // आउटपुट: ["äpfel", "aprikosen", "bananen", "birnen"]

हे उदाहरण Intl.Collator वापरून जर्मन शब्दांच्या ॲरेची क्रमवारी लावते. लक्षात घ्या की "äpfel" हे "aprikosen" च्या आधी क्रमवारी लावले आहे, जरी "ä" वर्णमालेत नंतर येतो.

८. एज केसेस आणि गहाळ डेटा हाताळा

सर्व लोकेल प्रत्येक ब्राउझर किंवा वातावरणाद्वारे समर्थित नसतात. जेथे लोकेल उपलब्ध नाही किंवा डेटा गहाळ आहे अशा एज केसेस हाताळणे आवश्यक आहे. खालील धोरणांचा विचार करा:

९. विविध लोकेलसह संपूर्णपणे चाचणी करा

आपले आंतरराष्ट्रीयीकृत ॲप्लिकेशन सर्व समर्थित लोकेलसाठी योग्यरित्या कार्य करते याची खात्री करण्यासाठी संपूर्ण चाचणी करणे महत्त्वाचे आहे. आपले ॲप्लिकेशन विविध लोकेलसह तपासा, ज्यात भिन्न अक्षर संच, तारीख आणि वेळ स्वरूपन, संख्या स्वरूपन आणि अनेकवचन नियम वापरणाऱ्या भाषांचा समावेश आहे.

आपले ॲप्लिकेशन विविध लोकेलमध्ये अपेक्षेप्रमाणे वागते याची पडताळणी करण्यासाठी स्वयंचलित चाचणी साधने वापरण्याचा विचार करा.

१०. कार्यक्षमतेच्या परिणामांचा विचार करा

Intl API साधारणपणे कार्यक्षम असले तरी, Intl ऑब्जेक्ट्स तयार करणे तुलनेने खर्चिक असू शकते. कार्यक्षमता ऑप्टिमाइझ करण्यासाठी, खालील गोष्टींचा विचार करा:

Intl API च्या पलीकडे: आंतरराष्ट्रीयीकरणासाठी पुढील विचार

Intl API डेटा फॉरमॅट करण्यासाठी शक्तिशाली साधने प्रदान करत असले तरी, आंतरराष्ट्रीयीकरणात केवळ फॉरमॅटिंगपेक्षा अधिक गोष्टींचा समावेश असतो. खालील अतिरिक्त पैलूंचा विचार करा:

निष्कर्ष

जावास्क्रिप्ट Intl API हे जागतिक प्रेक्षकांसाठी वेब ॲप्लिकेशन्स तयार करण्यासाठी एक अमूल्य साधन आहे. या लेखात वर्णन केलेल्या सर्वोत्तम पद्धतींचे पालन करून, आपण असे ॲप्लिकेशन्स तयार करू शकता जे केवळ कार्यात्मकच नाहीत तर जगभरातील वापरकर्त्यांसाठी सांस्कृतिकदृष्ट्या संवेदनशील आणि वापरकर्ता-अनुकूल देखील आहेत. Intl API च्या शक्तीचा स्वीकार करा आणि जागतिक स्तरावर आपल्या ॲप्लिकेशनची क्षमता अनलॉक करा. Intl API मध्ये प्रभुत्व मिळवल्याने आपल्या सर्व वापरकर्त्यांसाठी, त्यांचे स्थान किंवा भाषा काहीही असली तरी, अधिक समावेशक आणि प्रवेशयोग्य अनुभव मिळेल.