بعد از معرفی این همه گزینهها و رفتارهای متنوع، احتمالاً این سوال برایتان پیش آمده که چطور باید این گزینهها را به خودِ کاربر نمایش دهیم؟ مثلاً اگر بخواهید یک منوی بازشو (Dropdown) برای انتخاب تقویم یا زبان به کاربر نشان دهید، چطور نام آنها را بومیسازی میکنید؟
مجموعه Intl دو API بسیار کاربردی برای ساخت رابطهای کاربری (UI) بومیسازیشده در اختیارتان میگذارد: Intl.supportedValuesOf() و Intl.DisplayNames.
Intl.supportedValuesOf()این تابع لیستی (یک آرایه) از تمام مقادیر پشتیبانیشده توسط مرورگر را برای یک گزینه خاص برمیگرداند. به عنوان مثال، میتوانید از آن برای پر کردن خودکار یک لیست کشویی از تقویمهای پشتیبانیشده استفاده کنید تا کاربر بتواند تقویم دلخواهش را انتخاب کند:
const supportedCal = Intl.supportedValuesOf("calendar");
console.log(supportedCal);
// خروجی: ['buddhist', 'chinese', 'coptic', 'dangi', ...]
Intl.DisplayNamesشناسههایی که متد بالا برمیگرداند (مثل buddhist یا gregory) اصلاً برای نمایش مستقیم به کاربر نهایی مناسب و دوستانه نیستند! شما احتمالاً میخواهید نام این تقویمها یا کشورها را به زبان خودِ کاربر (مثلاً هجری شمسی، میلادی و...) نشان دهید.
شیء Intl.DisplayNames دقیقاً همین کار را انجام میدهد. این ابزار شبیه فرمتکنندههای قبلی نیست و بر اساس قالب (Template) کار نمیکند؛ بلکه یک نقشهبرداری و تبدیل مستقیم (Direct Mapping) از شناسههای فنی به نامهای ترجمه و بومیسازیشده است. این ابزار از بومیسازی موارد زیر پشتیبانی میکند:
زبانها (Languages)
کشورها/مناطق (Regions)
خطوط نگارشی (Scripts)
واحدهای پولی (Currency)
انواع تقویمها (Calendar)
فیلدهای تاریخ و زمان (DateTime Fields مثل کلمه "سال"، "ماه"، "دقیقه")
کد زیر یک نمونه واقعی و فوقالعاده از ترکیب تمام ابزارهایی است که تا به اینجا یاد گرفتهایم. این دمو یک منوی انتخاب زبان و تقویم میسازد که با تغییر زبان، نام خودِ زبانها، نام تقویمها و حتی برچسبِ اجزای زمان (از طریق تگ <ruby>) کاملاً به صورت داینامیک به زبان انتخابی ترجمه میشوند:
<select id="lang"></select>
<select id="calendar"></select>
<fieldset></fieldset>
<output id="output"></output>
const langSelect = document.getElementById("lang");
const calSelect = document.getElementById("calendar");
const fieldset = document.querySelector("fieldset");
const output = document.getElementById("output");
// چند نمونه لوکال برای منوی انتخاب زبان
const langs = [
"en-US", "zh-Hans-CN", "ja-JP", "ar-EG", "ru-RU",
"es-ES", "fr-FR", "de-DE", "hi-IN", "pt-BR", "bn-BD", "he-IL"
];
// دریافت تمام تقویمهای پشتیبانیشده مرورگر
const calendars = Intl.supportedValuesOf("calendar");
// ۱. پر کردن منوی انتخاب زبان با نام بومی هر زبان
for (const lang of langs) {
const option = document.createElement("option");
option.value = lang;
// نام هر زبان را به همان زبان خودش تولید میکند (مثلاً English، العربية و...)
option.textContent = new Intl.DisplayNames(lang, { type: "language" }).of(lang);
langSelect.appendChild(option);
}
// ۲. رندر کردن منوی انتخاب تقویم بر اساس زبان انتخابشده
function renderCalSelect() {
const lang = langSelect.value;
calSelect.innerHTML = "";
const dn = new Intl.DisplayNames(lang, { type: "calendar" });
// دریافت تقویمهای ترجیحی آن لوکال (در صورت پشتیبانی مرورگر)
const preferredCalendars = new Intl.Locale(lang).getCalendars?.() ?? ["gregory"];
// مرتبسازی لیست تقویمها به طوری که تقویمهای ترجیحی لوکال در ابتدا قرار بگیرند
const sortedCalendars = [
...preferredCalendars,
...calendars.filter((c) => !preferredCalendars.includes(c)),
];
for (const cal of sortedCalendars) {
const option = document.createElement("option");
option.value = cal;
option.textContent = dn.of(cal); // ترجمه نام تقویم به زبان انتخابی
calSelect.appendChild(option);
}
}
// ۳. نمایش زمان زنده با برچسبهای بومیسازیشده برای هر جزء
function renderTime() {
const lang = langSelect.value;
const cal = calSelect.value;
const df = new Intl.DateTimeFormat(lang, {
calendar: cal,
dateStyle: "full",
timeStyle: "full",
});
const now = new Date();
const dn = new Intl.DisplayNames(lang, { type: "dateTimeField" });
output.innerHTML = "";
// تجزیه زمان به تکههای مختلف و قرار دادن نام فیلد (مثل Month) بالای هر تکه
for (const component of df.formatToParts(now)) {
const text = document.createElement("span");
text.textContent = component.value;
// اگر تکه فعلی جزو اجزای اصلی زمان نبود (مثل فاصلهها یا ویرگول)، مستقیم اضافهاش کن
if (![
"era", "year", "quarter", "month", "weekOfYear",
"weekday", "day", "dayPeriod", "hour", "minute", "second", "timeZoneName"
].includes(component.type)) {
output.appendChild(text);
continue;
}
// دریافت نام بومی آن فیلد (مثلاً کلمه "day" در عربی میشود "اليوم")
const title = dn.of(component.type);
// استفاده از تگ ruby برای نمایش عنوان بالای متن اصلی
const field = document.createElement("ruby");
field.appendChild(text);
const rt = document.createElement("rt");
rt.textContent = title;
field.appendChild(rt);
output.appendChild(field);
}
}
// مقداردهی اولیه دمو
renderCalSelect();
renderTime();
// گوش دادن به رویداد تغییر زبان و تقویم
langSelect.addEventListener("change", () => {
renderCalSelect();
renderTime();
});
calSelect.addEventListener("change", renderTime);
// بروزرسانی زمان در هر نیم ثانیه
setInterval(renderTime, 500);
پرونده کل مستندات استاندارد بینالمللیسازی (Intl) در جاوااسکریپت مدرن با تمام جزئیات مهندسی و کاربردیاش در اینجا بسته شد. حالا شما ابزارهای فوقالعاده نیرومندی برای ساخت اپلیکیشنهای چندزبانه و جهانی در دست دارید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://developer.mozilla.org/en-US/docs/Web/JavaScript