M

MLOG

فارسی

با API Intl جاوا اسکریپت به دسترسی جهانی دست یابید. بهترین شیوه‌های بین‌المللی‌سازی را برای قالب‌بندی تاریخ، اعداد، ارزها و موارد دیگر بیاموزید تا تجربه‌ای یکپارچه برای کاربران در سراسر جهان فراهم کنید.

API Intl جاوا اسکریپت: بهترین شیوه‌ها برای بین‌المللی‌سازی برای مخاطبان جهانی

در دنیای متصل امروزی، ساخت اپلیکیشن‌های وب که به مخاطبان جهانی خدمت‌رسانی کنند، بسیار حیاتی است. API Intl جاوا اسکریپت ابزارهای قدرتمندی برای بین‌المللی‌سازی (i18n) فراهم می‌کند و به شما امکان می‌دهد تاریخ، اعداد، ارزها و موارد دیگر را بر اساس قراردادهای مناطق مختلف قالب‌بندی کنید. این مقاله به بررسی بهترین شیوه‌ها برای استفاده از API Intl برای ساخت اپلیکیشن‌های واقعاً جهانی می‌پردازد.

درک بین‌المللی‌سازی (i18n) و بومی‌سازی (l10n)

پیش از پرداختن به جزئیات API Intl، درک تفاوت بین بین‌المللی‌سازی (i18n) و بومی‌سازی (l10n) مهم است. I18n فرآیند طراحی و توسعه اپلیکیشن‌ها به گونه‌ای است که بتوان آن‌ها را به راحتی برای زبان‌ها و مناطق مختلف بدون نیاز به تغییرات مهندسی تطبیق داد. از سوی دیگر، L10n فرآیند تطبیق یک اپلیکیشن بین‌المللی‌شده برای یک منطقه خاص از طریق ترجمه متن و سفارشی‌سازی سایر عناصر مختص آن منطقه است.

API Intl بر جنبه i18n تمرکز دارد و مکانیزم‌هایی برای مدیریت داده‌های حساس به منطقه فراهم می‌کند، در حالی که بومی‌سازی معمولاً شامل ارائه ترجمه‌ها و پیکربندی‌های مختص منطقه است.

اجزای کلیدی API Intl

API Intl از چندین شیء کلیدی تشکیل شده است که هر کدام مسئول مدیریت جنبه‌های خاصی از بین‌المللی‌سازی هستند:

بهترین شیوه‌ها برای استفاده از API Intl

برای استفاده مؤثر از API Intl و تضمین تجربه کاربری مثبت برای مخاطبان جهانی خود، بهترین شیوه‌های زیر را در نظر بگیرید:

۱. منطقه (Locale) صحیح را مشخص کنید

پایه و اساس بین‌المللی‌سازی، مشخص کردن منطقه صحیح است. منطقه، زبان، ناحیه و هر گونه متغیر خاصی که باید برای قالب‌بندی استفاده شود را مشخص می‌کند. شما می‌توانید منطقه ترجیحی کاربر را از ویژگی navigator.language یا هدر HTTP Accept-Language به دست آورید.

هنگام ایجاد اشیاء Intl، می‌توانید منطقه را به صورت یک رشته یا آرایه‌ای از رشته‌ها مشخص کنید. اگر یک آرایه ارائه دهید، API تلاش می‌کند تا بهترین منطقه منطبق را از بین گزینه‌های موجود پیدا کند.

مثال:

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

اگر منطقه ترجیحی کاربر در دسترس نباشد، می‌توانید یک منطقه جایگزین (fallback) ارائه دهید. برای مثال، ممکن است از 'en-US' به عنوان پیش‌فرض استفاده کنید اگر مرورگر کاربر یک منطقه پشتیبانی‌نشده را گزارش دهد.

۲. از Intl.DateTimeFormat برای قالب‌بندی تاریخ و زمان استفاده کنید

قالب‌بندی صحیح تاریخ و زمان برای ارائه یک تجربه بومی‌سازی شده بسیار مهم است. شیء Intl.DateTimeFormat به شما اجازه می‌دهد تاریخ و زمان را بر اساس قراردادهای یک منطقه خاص قالب‌بندی کنید.

شما می‌توانید قالب‌بندی را با مشخص کردن گزینه‌های مختلفی مانند فرمت سال، ماه، روز، ساعت، دقیقه و ثانیه سفارشی‌سازی کنید. همچنین می‌توانید منطقه زمانی را مشخص کنید تا اطمینان حاصل شود که تاریخ و زمان برای کاربران در نقاط مختلف جهان به درستی نمایش داده می‌شود.

مثال:

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 'товар'; // tovar (مفرد)
    case 'few': return 'товара'; // tovara (کم)
    case 'many': return 'товаров'; // tovarov (زیاد)
    default: return 'товаров'; // پیش‌فرض روی زیاد
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // خروجی: "5 товаров"

این مثال نشان می‌دهد که چگونه از Intl.PluralRules برای به دست آوردن شکل جمع صحیح کلمه "товар" (کالا) در زبان روسی استفاده کنید. زبان روسی بسته به اینکه عدد به ۱، ۲-۴ یا ۵-۹ ختم شود، اشکال جمع متفاوتی دارد.

۵. لیست‌ها را با Intl.ListFormat قالب‌بندی کنید

هنگام ارائه لیستی از آیتم‌ها، قالب‌بندی می‌تواند در مناطق مختلف متفاوت باشد. شیء Intl.ListFormat به شما امکان می‌دهد لیست‌ها را بر اساس قراردادهای منطقه‌ای خاص، از جمله استفاده از حروف ربط مختلف (مانند "و"، "یا") و جداکننده‌های لیست (مانند کاما، نقطه ویرگول)، قالب‌بندی کنید.

مثال:

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" (و) برای اتصال دو آیتم آخر استفاده می‌کند.

۶. زمان‌های نسبی را با Intl.RelativeTimeFormat قالب‌بندی کنید

نمایش زمان‌های نسبی (مثلاً «دیروز»، «تا ۲ ساعت دیگر») روشی کاربرپسند برای ارائه اطلاعات زمانی است. شیء 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" مرتب می‌شود، حتی اگر "ä" در الفبا دیرتر بیاید.

۸. موارد استثنایی و داده‌های گمشده را مدیریت کنید

همه مناطق توسط هر مرورگر یا محیطی پشتیبانی نمی‌شوند. ضروری است که موارد استثنایی را که در آن یک منطقه در دسترس نیست یا داده‌ها گمشده‌اند، مدیریت کنید. استراتژی‌های زیر را در نظر بگیرید:

۹. با مناطق مختلف به طور کامل تست کنید

تست کامل برای اطمینان از اینکه اپلیکیشن بین‌المللی‌شده شما برای همه مناطق پشتیبانی‌شده به درستی کار می‌کند، بسیار مهم است. اپلیکیشن خود را با مناطق مختلفی، از جمله زبان‌هایی که از مجموعه‌های کاراکتری، فرمت‌های تاریخ و زمان، فرمت‌های اعداد و قوانین جمع‌بستن متفاوتی استفاده می‌کنند، تست کنید.

استفاده از ابزارهای تست خودکار را برای تأیید اینکه اپلیکیشن شما در مناطق مختلف مطابق انتظار عمل می‌کند، در نظر بگیرید.

۱۰. پیامدهای عملکردی را در نظر بگیرید

در حالی که API Intl به طور کلی کارآمد است، ایجاد اشیاء Intl می‌تواند نسبتاً پرهزینه باشد. برای بهینه‌سازی عملکرد، موارد زیر را در نظر بگیرید:

فراتر از API Intl: ملاحظات بیشتر برای بین‌المللی‌سازی

در حالی که API Intl ابزارهای قدرتمندی برای قالب‌بندی داده‌ها فراهم می‌کند، بین‌المللی‌سازی فراتر از قالب‌بندی صرف است. جنبه‌های اضافی زیر را در نظر بگیرید:

نتیجه‌گیری

API Intl جاوا اسکریپت ابزاری бесценный برای ساخت اپلیکیشن‌های وب است که به مخاطبان جهانی خدمت‌رسانی می‌کنند. با پیروی از بهترین شیوه‌های ذکر شده در این مقاله، می‌توانید اپلیکیشن‌هایی ایجاد کنید که نه تنها کاربردی، بلکه از نظر فرهنگی حساس و کاربرپسند برای کاربران در سراسر جهان باشند. قدرت API Intl را در آغوش بگیرید و پتانسیل اپلیکیشن خود را در صحنه جهانی آزاد کنید. تسلط بر API Intl منجر به تجربه‌ای فراگیرتر و در دسترس‌تر برای همه کاربران شما، صرف نظر از موقعیت مکانی یا زبان آنها خواهد شد.