تعیین و انتخاب لوکال مناسب

یک دغدغه مشترک در بحث بین‌المللی‌سازی این است: چطور بفهمم باید از کدام لوکال (زبان و فرهنگ) در برنامه‌ام استفاده کنم؟

بدیهی‌ترین پاسخ این است: «همان زبانی که کاربر ترجیح می‌دهد». مرورگرها لیست زبان‌های مورد علاقه و ترجیحی کاربر را از طریق ویژگی navigator.languages لو می‌دهند. این ویژگی یک آرایه از شناسه‌های زبان است که می‌توانید آن را مستقیماً به متد سازنده‌ی فرمت‌کننده‌ها پاس بدهید (کمی جلوتر بیشتر در این باره صحبت می‌کنیم). کاربر می‌تواند این لیست را در تنظیمات مرورگر خود تغییر دهد. علاوه بر این، شما می‌توانید یک آرایه خالی [] یا undefined را هم پاس بدهید که هر دو باعث می‌شوند مرورگر از لوکال پیش‌فرض خودش استفاده کند:

const numberFormatter = new Intl.NumberFormat(navigator.languages);
console.log(numberFormatter.format(1234567.89));

const numberFormatter2 = new Intl.NumberFormat([]);

تله‌ی استفاده از لوکال پیش‌فرض مرورگر

با اینکه روش بالا ساده است، اما همیشه مطلوب‌ترین نتیجه را به همراه ندارد! رشته‌هایی که توسط فرمت‌کننده‌های Intl تولید می‌شوند، بخش بسیار کوچکی از متن‌های نمایش‌داده‌شده در سایت شما را تشکیل می‌دهند؛ بخش عمده‌ی محتوای بومی‌سازی‌شده، توسط خود شما (توسعه‌دهنده سایت) تامین می‌شود.

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

بنابراین، معمولاً ایده خوبی نیست که از زبان پیش‌فرض مرورگر استفاده کنید. در عوض، باید از همان زبانی استفاده کنید که بقیه بخش‌های سایت شما با آن نمایش داده می‌شوند. برای این کار چند استراتژی استاندارد وجود دارد:

۱. استفاده از تنظیمات ذخیره‌شده کاربر

اگر سایت شما یک دکمه تعویض زبان (Language Switcher) دارد که انتخاب کاربر را در جایی (مثل LocalStorage یا کوکی) ذخیره می‌کند، می‌توانید مستقیماً از همان استفاده کنید:

// فرض کنید این تنظیمات توسط کنترلر تغییر زبان در سراسر سایت قابل تغییر است
const userSettings = {
  locale: "en-US",
  colorMode: "dark",
};

const numberFormatter = new Intl.NumberFormat(userSettings.locale);
console.log(numberFormatter.format(1234567.89));

۲. خواندن زبان از تگ HTML

اگر سایت شما یک بخش بک‌اند (Backend) دارد که زبان را بر اساس هدر Accept-Language کاربر به صورت داینامیک انتخاب می‌کند و بر همان اساس HTML متفاوتی می‌فرستد، می‌توانید زبان را از ویژگی lang در تگ روت HTML بخوانید:

const numberFormatter = new Intl.NumberFormat(document.documentElement.lang);

۳. هاردکد کردن زبان (برای سایت‌های تک‌زبانه)

اگر سایت شما کلاً و فقط به یک زبان ارائه می‌شود، می‌توانید آن لوکال را به صورت ثابت (Hardcode) در کد خود بنویسید:

const numberFormatter = new Intl.NumberFormat("en-US");

تعریف لیست زبان‌های پشتیبان (Fallback Choices)

همان‌طور که قبلاً اشاره شد، شما می‌توانید یک آرایه از لوکال‌ها را به متد سازنده پاس بدهید که نشان‌دهنده یک لیست از انتخاب‌های پشتیبان (Fallback) است. مثال اول که از navigator.languages استفاده می‌کرد دقیقاً همین کار را انجام می‌دهد: اگر اولین لوکالِ تنظیم‌شده توسط کاربر برای آن عملیات خاص پشتیبانی نشود، مرورگر به سراغ دومی می‌رود و این کار را آن‌قدر ادامه می‌دهد تا لوکالی را پیدا کند که داده‌های مربوط به آن در موتور جاوااسکریپت موجود باشد.

شما می‌توانید این لیست را به صورت دستی هم بسازید. در مثال زیر، ما لیستی از لوکال‌ها را به ترتیب کاهش اهمیت و جزئیات می‌نویسیم که همگی زبان‌هایی هستند که یک فرد چینی‌زبان در هنگ‌کنگ آن‌ها را متوجه می‌شود؛ بنابراین فرمت‌کننده دقیق‌ترین و اولین گزینه‌ای را که پشتیبانی می‌کند، انتخاب خواهد کرد:

const numberFormatter = new Intl.NumberFormat([
  "yue-Hant",    // کانتونی (خط سنتی)
  "zh-Hant-HK", // چینی سنتی (هنگ‌کنگ)
  "zh-Hant",    // چینی سنتی
  "zh",         // چینی عمومی
]);

ابزارهای مدیریت لیست لوکال‌ها

هیچ تابع یا API خاصی وجود ندارد که لیست تمام لوکال‌های پشتیبانی‌شده توسط مرورگر را یک‌جا به شما خروجی بدهد، اما دو متد بسیار کاربردی برای مدیریت این لیست‌ها در اختیارتان قرار دارد:

• Intl.getCanonicalLocales(): این تابع لیستی از شناسه‌های زبان را می‌گیرد و شکل استاندارد و اصطلاحاً قانونمندشده‌ی (Canonicalized) آن‌ها را برمی‌گرداند. این متد برای درک فرآیند استانداردسازی شناسه‌ها در متدهای سازنده Intl بسیار مفید است.

• متد استاتیک supportedLocalesOf(): این متد روی تمام اشیای مجموعه Intl (مثل Intl.DateTimeFormat.supportedLocalesOf()) در دسترس است. این متد دقیقاً همان آرگومان‌های متد سازنده (یعنی لیست لوکال‌ها و گزینه‌ها) را می‌گیرد و یک زیرمجموعه از آن تگ‌های زبان ارسالی شما را که توسط مرورگر پشتیبانی می‌شوند برمی‌گرداند. این ابزار برای فهمیدن اینکه مرورگر چه زبان‌هایی از لیست شما را برای یک کار خاص پشتیبانی می‌کند فوق‌العاده است (مثلاً برای اینکه در دکمه تغییر زبان، فقط زبان‌هایی را به کاربر نشان دهید که مرورگرش واقعاً دیتاهای آن را دارد).