如何显示公历、希伯来历、伊斯兰历等日历名称？

介绍

不同的文化和宗教使用不同的日历系统来记录日期和组织时间。虽然公历在世界许多地方很常见，但其他日历系统被用于宗教仪式、文化活动和日常生活。希伯来日历在以色列和全球的犹太社区中使用。伊斯兰历指导穆斯林的宗教实践。佛教历在泰国和其他东南亚国家使用。

为国际用户服务的应用程序需要让用户选择他们偏好的日历系统。日期选择器、设置界面和日程安排工具会显示日历名称，以便用户选择符合其需求的系统。与其显示像 "gregory" 或 "islamic-umalqura" 这样的代码，应用程序会显示可读的名称，如 "公历" 或 "乌姆·库拉历"。

JavaScript 的 Intl.DisplayNames API 可以将日历系统代码转换为人类可读的名称。此 API 会自动处理翻译，显示用户语言中的日历名称，而无需手动翻译文件。

什么是日历代码

日历代码是表示不同日历系统的简短字符串标识符。JavaScript 在内部使用这些标准化的代码来标识日历。

常见的日历代码包括：

gregory 表示公历
hebrew 表示希伯来日历
islamic 表示伊斯兰历
buddhist 表示佛教历
chinese 表示中国农历
japanese 表示日本历

这些代码遵循 Unicode 区域标识符规范。它们始终为小写，并在需要时使用连字符分隔单词，例如 islamic-umalqura 或 islamic-civil。

Intl.DisplayNames 如何处理日历

Intl.DisplayNames 构造函数创建一个对象，用于将代码翻译为可读文本。您可以为输出语言指定一个区域设置，并为要翻译的代码类型指定一个类型。

要显示日历名称，您需要将 "calendar" 作为类型传递：

const displayNames = new Intl.DisplayNames('zh', { type: 'calendar' });

第一个参数是区域代码，例如 'en' 表示英语或 'fr' 表示法语。第二个参数是一个选项对象，其中设置 type: 'calendar'。

一旦有了 DisplayNames 对象，就可以使用其 of() 方法将日历代码转换为名称：

const calendarName = displayNames.of('gregory');
console.log(calendarName); // "公历"

以英文显示日历名称

以下是如何以英文显示公历、希伯来历和伊斯兰历的名称：

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "Gregorian Calendar"
console.log(displayNames.of('hebrew')); // "Hebrew Calendar"
console.log(displayNames.of('islamic')); // "Islamic Calendar"

您可以通过将日历代码传递给 of() 方法来显示任何支持的日历：

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

console.log(displayNames.of('buddhist')); // "Buddhist Calendar"
console.log(displayNames.of('chinese')); // "Chinese Calendar"
console.log(displayNames.of('japanese')); // "Japanese Calendar"
console.log(displayNames.of('persian')); // "Persian Calendar"

伊斯兰历有多种不同的计算方法变体：

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

console.log(displayNames.of('islamic')); // "Islamic Calendar"
console.log(displayNames.of('islamic-umalqura')); // "Umm al-Qura Calendar"
console.log(displayNames.of('islamic-civil')); // "Islamic Civil Calendar"
console.log(displayNames.of('islamic-tbla')); // "Islamic Tabular Calendar"

获取所有可用的日历系统

JavaScript 提供了 17 种日历系统。您可以使用 Intl.supportedValuesOf() 以编程方式获取完整列表：

const calendars = Intl.supportedValuesOf('calendar');
console.log(calendars);

这将返回一个包含所有支持的日历代码的数组：

[
  'buddhist',
  'chinese',
  'coptic',
  'dangi',
  'ethioaa',
  'ethiopic',
  'gregory',
  'hebrew',
  'indian',
  'islamic',
  'islamic-umalqura',
  'islamic-tbla',
  'islamic-civil',
  'islamic-rgsa',
  'iso8601',
  'japanese',
  'persian',
  'roc'
]

您可以遍历此数组以显示所有日历名称：

const calendars = Intl.supportedValuesOf('calendar');
const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

calendars.forEach(calendar => {
  console.log(`${calendar}: ${displayNames.of(calendar)}`);
});

这将打印：

buddhist: Buddhist Calendar
chinese: Chinese Calendar
coptic: Coptic Calendar
dangi: Dangi Calendar
ethioaa: Ethiopic Amete Alem Calendar
ethiopic: Ethiopic Calendar
gregory: Gregorian Calendar
hebrew: Hebrew Calendar
indian: Indian National Calendar
islamic: Islamic Calendar
islamic-umalqura: Umm al-Qura Calendar
islamic-tbla: Islamic Tabular Calendar
islamic-civil: Islamic Civil Calendar
islamic-rgsa: Islamic Calendar (Saudi Arabia)
iso8601: ISO-8601 Calendar
japanese: Japanese Calendar
persian: Persian Calendar
roc: Minguo Calendar

在不同语言中本地化日历名称

日历名称会以您在 locale 参数中指定的语言显示。这使您可以以用户的首选语言显示日历名称。

以阿拉伯语显示日历名称：

const displayNames = new Intl.DisplayNames('ar', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "التقويم الميلادي"
console.log(displayNames.of('hebrew')); // "التقويم العبري"
console.log(displayNames.of('islamic')); // "التقويم الهجري"

以法语显示日历名称：

const displayNames = new Intl.DisplayNames('fr', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "calendrier grégorien"
console.log(displayNames.of('hebrew')); // "calendrier hébraïque"
console.log(displayNames.of('islamic')); // "calendrier musulman"

以希伯来语显示日历名称：

const displayNames = new Intl.DisplayNames('he', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "לוח השנה הגרגוריאני"
console.log(displayNames.of('hebrew')); // "לוח השנה העברי"
console.log(displayNames.of('islamic')); // "לוח השנה ההיג'רי"

以中文显示日历名称：

const displayNames = new Intl.DisplayNames('zh', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "公历"
console.log(displayNames.of('hebrew')); // "希伯来历"
console.log(displayNames.of('islamic')); // "伊斯兰历"

浏览器会自动处理所有翻译。您无需翻译文件或手动管理字符串。

构建一个日历选择下拉菜单

以下是创建一个让用户选择日历系统的下拉菜单的方法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日历选择器</title>
</head>
<body>
  <label for="calendar-select">选择一个日历：</label>
  <select id="calendar-select"></select>

  <script>
    const userLocale = navigator.language || 'en';
    const displayNames = new Intl.DisplayNames(userLocale, { type: 'calendar' });
    const calendars = Intl.supportedValuesOf('calendar');
    const selectElement = document.getElementById('calendar-select');

    calendars.forEach(calendar => {
      const option = document.createElement('option');
      option.value = calendar;
      option.textContent = displayNames.of(calendar);
      selectElement.appendChild(option);
    });

    selectElement.addEventListener('change', (event) => {
      console.log('选定的日历：', event.target.value);
    });
  </script>
</body>
</html>

此代码执行以下操作：

使用 navigator.language 获取用户的浏览器语言
使用用户的语言创建一个 DisplayNames 对象
检索所有可用的日历代码
为每个日历创建一个选项元素
将选项文本设置为本地化的日历名称
添加事件监听器以处理日历选择

下拉菜单会自动以用户的语言显示日历名称。使用阿拉伯语浏览器的用户会看到阿拉伯语的日历名称。使用法语浏览器的用户会看到法语的日历名称。

何时使用日历名称显示

在以下情况下显示日历名称：

用户在设置页面选择其首选日历系统时
支持多种日历系统的日期选择组件
用户在事件创建表单中指定使用哪种日历时
存储用户日历偏好的用户个人资料页面
跨不同日历系统工作的日程安排应用程序
参考特定日历的宗教或文化应用程序

显示日历名称可以使您的应用程序对使用非公历系统的用户更具可访问性。这消除了应用程序在日期和事件中使用哪种日历系统的歧义。

使用 Intl.DisplayNames API 和 type: 'calendar'，您可以即时获取本地化的日历名称，而无需维护翻译文件或日历系统元数据。