如何利用JavaScript的Intl.DateTimeFormat实现多语言日期格式化，以及它如何处理历法和时区差异？-js教程-PHP中文网

Intl.DateTimeFormat通过locales和options参数实现多语言日期时间格式化，支持不同地区、历法与时区。它利用ICU数据自动处理日期顺序、名称翻译及数字系统，并可通过calendar和timeZone选项处理日本历、伊斯兰历及时区转换；formatToParts()支持精细化控制，而缓存实例可提升性能，兼容性方面需注意老旧浏览器polyfill及Node.js的ICU数据完整性。

如何利用javascript的intl.datetimeformat实现多语言日期格式化，以及它如何处理历法和时区差异？

JavaScript的

Intl.DateTimeFormat

登录后复制

是一个非常强大的内置对象，它能以用户友好的方式处理多语言日期和时间格式化，并且能够优雅地管理各种历法和时区差异。它让我们在开发国际化应用时，不必再手动处理那些繁琐的日期字符串拼接和本地化规则，极大地提升了开发效率和用户体验。

Intl.DateTimeFormat

登录后复制

的核心在于其构造函数接收两个参数：

locales

登录后复制

和

options

登录后复制

。

locales

登录后复制

参数定义了语言环境，比如

'en-US'

登录后复制

（美式英语）、

'zh-CN'

登录后复制

（简体中文）或

'de-DE'

登录后复制

（德语），它决定了日期部分的顺序、分隔符以及月份和星期名称的显示方式。

options

登录后复制

参数则是一个对象，允许我们精细地控制输出的各个方面，比如年份、月份、日期、小时、分钟、秒的显示样式，以及最重要的——时区和历法。

举个例子，创建一个格式化器：

const date = new Date(); // 假设现在是 2023年10月27日 下午3点45分 (UTC+8)

// 基本用法：根据语言环境自动格式化
let formatter = new Intl.DateTimeFormat('en-US');
console.log(formatter.format(date)); // 10/27/2023

formatter = new Intl.DateTimeFormat('zh-CN');
console.log(formatter.format(date)); // 2023/10/27

// 带选项的用法：指定日期和时间样式
formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});
console.log(formatter.format(date)); // October 27, 2023 at 03:45:00 PM (假设时区是美国东部时间)

// 更简洁的方式：使用 dateStyle 和 timeStyle
formatter = new Intl.DateTimeFormat('en-US', {
  dateStyle: 'full',
  timeStyle: 'long'
});
console.log(formatter.format(date)); // Friday, October 27, 2023 at 3:45:00 PM GMT+8 (实际输出会根据运行环境的时区而定)

登录后复制

Intl.DateTimeFormat

登录后复制

如何精准地处理多语言日期和时间显示？

当我们谈论多语言日期和时间显示时，

Intl.DateTimeFormat

登录后复制

的强大之处在于它不仅仅是翻译，更是一种文化适应。它能自动处理不同语言环境下日期元素的顺序、分隔符、月份和星期的名称、甚至数字系统。我个人觉得，这比手动拼接字符串要优雅太多了，而且还不容易出错。

立即学习“Java免费学习笔记（深入）”；

例如，一个日期

2023年10月27日

登录后复制

：

在美式英语（
```
en-US
```
登录后复制
）中，通常显示为
```
10/27/2023
```
登录后复制
或
```
October 27, 2023
```
登录后复制
。
在德语（
```
de-DE
```
登录后复制
）中，则可能是
```
27.10.2023
```
登录后复制
。
而中文（
```
zh-CN
```
登录后复制
）里，我们习惯
```
2023/10/27
```
登录后复制
或者
```
2023年10月27日
```
登录后复制
。

Intl.DateTimeFormat

登录后复制

通过其

locales

登录后复制

参数，能够智能地识别并应用这些规则。你不需要写复杂的条件判断来区分是哪种语言，它内部的ICU（International Components for Unicode）数据会帮你搞定一切。

const myDate = new Date(2023, 9, 27); // 注意月份是0-11，所以9代表10月

console.log(new Intl.DateTimeFormat('en-US').format(myDate)); // 10/27/2023
console.log(new Intl.DateTimeFormat('de-DE').format(myDate)); // 27.10.2023
console.log(new Intl.DateTimeFormat('zh-CN').format(myDate)); // 2023/10/27

// 还可以指定更详细的格式
console.log(new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(myDate)); // October 27, 2023

console.log(new Intl.DateTimeFormat('zh-CN', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(myDate)); // 2023年10月27日

// 如果你需要对日期各个部分进行单独处理，比如自定义样式，可以使用 formatToParts()
const parts = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).formatToParts(myDate);

console.log(parts.map(p => `${p.type}: ${p.value}`).join(', '));
// year: 2023, literal: , month: October, literal: , day: 27

登录后复制

formatToParts()

登录后复制

返回一个对象数组，每个对象包含日期部分类型（如

year

登录后复制

、

month

登录后复制

、

day

登录后复制

）和其对应的字符串值，这在需要对特定部分应用CSS样式时特别有用。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

面对复杂的历法和时区，

Intl.DateTimeFormat

登录后复制

有哪些高级用法和注意事项？

处理历法和时区差异是国际化日期格式化的真正挑战所在，而

Intl.DateTimeFormat

登录后复制

在这方面表现得相当出色。第一次接触到

calendar

登录后复制

这个选项时，我有点惊讶于它的强大，它不仅仅是格式，更是对日期概念的深层理解。

历法（Calendar）处理： 除了我们常用的公历（Gregorian calendar），世界上还有许多其他历法，比如伊斯兰历、希伯来历、日本历、农历等。

Intl.DateTimeFormat

登录后复制

允许你通过

calendar

登录后复制

选项指定使用哪种历法。

const specificDate = new Date(2023, 9, 27); // 2023年10月27日

// 使用日本历 (Japanese calendar)
let formatterJapanese = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'long' // 日本历会显示年号
});
console.log(formatterJapanese.format(specificDate)); // 令和5年10月27日

// 使用伊斯兰历 (Islamic calendar)
let formatterIslamic = new Intl.DateTimeFormat('ar-SA-u-ca-islamic', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
console.log(formatterIslamic.format(specificDate)); // ١٤٤٥ ربيع الآخر ١٢ (1445年，第二个月，第12天)

登录后复制

这里需要注意的是，

u-ca-japanese

登录后复制

这样的部分是 Unicode 扩展，表示使用日本历。不同的历法其年、月、日的计算方式和名称都不同，

Intl.DateTimeFormat

登录后复制

会根据指定的历法进行正确转换和显示。这对于服务特定文化背景的用户来说至关重要。

时区（Time Zone）处理： 时区是另一个让开发者头疼的问题。我发现很多新手开发者会在这里踩坑，以为只要设置了

new Date()

登录后复制

就能万事大吉，但实际上，时区管理远比这复杂。

new Date()

登录后复制

默认创建的是运行环境的本地时间，而

Intl.DateTimeFormat

登录后复制

的

timeZone

登录后复制

选项则允许你指定日期时间应该以哪个时区来解释和显示。

const utcDate = new Date('2023-10-27T15:00:00Z'); // UTC时间 2023年10月27日 下午3点

// 显示为纽约时间 (America/New_York)
let nyFormatter = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  timeZone: 'America/New_York',
  timeZoneName: 'short'
});
console.log(nyFormatter.format(utcDate)); // 11:00:00 AM EDT (纽约在夏令时)

// 显示为上海时间 (Asia/Shanghai)
let shFormatter = new Intl.DateTimeFormat('zh-CN', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  timeZone: 'Asia/Shanghai',
  timeZoneName: 'short'
});
console.log(shFormatter.format(utcDate)); // 下午11:00:00 GMT+8

// 如果不指定 timeZone，会使用运行环境的默认时区
let defaultFormatter = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});
console.log(defaultFormatter.format(utcDate)); // 实际输出取决于你运行代码的机器的时区

登录后复制

关键点在于，内部存储日期时最好使用UTC时间（

new Date()

登录后复制

的ISO字符串通常是UTC，或者直接使用

Date.UTC()

登录后复制

），然后在显示给用户时，再根据用户的偏好或指定的时区进行格式化。

timeZoneName

登录后复制

选项还能让你显示时区的名称，比如

EDT

登录后复制

、

GMT+8

登录后复制

，这对于用户理解时间非常有帮助。

如何处理

Intl.DateTimeFormat

登录后复制

在不同浏览器和环境中的兼容性问题？

尽管

Intl.DateTimeFormat

登录后复制

功能强大，但在实际应用中，我们仍然需要考虑它的兼容性和性能问题。说实话，虽然

Intl

登录后复制

API 功能强大，但它背后的ICU数据包却是个不小的东西。在某些受限的环境里，比如一些嵌入式系统或者需要极小打包体积的项目，你可能就需要权衡一下了。

浏览器支持： 现代主流浏览器（Chrome、Firefox、Safari、Edge）对

Intl.DateTimeFormat

登录后复制

的支持都非常好，包括各种

options

登录后复制

参数和历法、时区。但如果你需要支持一些老旧的浏览器，比如IE11，那么可能就需要引入

Intl.js

登录后复制

这样的polyfill库来弥补功能上的不足。在部署前，务必通过

caniuse.com

登录后复制

这样的网站检查目标用户群的浏览器兼容性。

Node.js环境： 在Node.js环境中，

Intl

登录后复制

API的完整性取决于Node.js的构建方式和版本。

早期版本 (Node.js < 13): 默认情况下可能只包含英语的ICU数据，导致其他语言的格式化功能受限。解决办法是安装
```
full-icu
```
登录后复制
包，并在启动Node.js时通过
```
--icu-data-dir
```
登录后复制
参数指定ICU数据路径，或者直接使用
```
node-full-icu
```
登录后复制
这样的预编译版本。
```
npm install full-icu
node --icu-data-dir=./node_modules/full-icu your_script.js
```
登录后复制
现代版本 (Node.js >= 13): 大多数现代Node.js版本都默认包含了完整的ICU数据，所以通常不需要额外配置。不过，如果你遇到某些特定语言或历法格式化不正确的情况，仍然值得检查Node.js的ICU数据支持情况。

缺失的Locale/Calendar/TimeZone数据： 即使在支持

Intl

登录后复制

API的环境中，也可能因为底层ICU数据不完整而导致某些特定的

locale

登录后复制

、

calendar

登录后复制

或

timeZone

登录后复制

无法正确解析。在这种情况下，

Intl.DateTimeFormat

登录后复制

可能会回退到默认值，或者在严格模式下抛出错误。为了稳妥起见，可以使用

Intl.DateTimeFormat.supportedLocalesOf()

登录后复制

来检查给定语言环境是否被支持。

const requestedLocales = ['fr-FR', 'xyz-XYZ']; // 'xyz-XYZ' 是一个不存在的语言环境
const supported = Intl.DateTimeFormat.supportedLocalesOf(requestedLocales);
console.log(supported); // ['fr-FR']

登录后复制

对于生产环境，我们通常会有一个回退策略，比如如果用户请求的语言不支持，就回退到英语或其他默认语言。

性能考虑： 创建

Intl.DateTimeFormat

登录后复制

实例并不是免费的。虽然它比手动格式化要高效得多，但每次都创建新的实例，尤其是在循环中处理大量日期时，仍然可能带来性能开销。一个好的实践是缓存
Intl.DateTimeFormat
登录后复制
实例。如果你的应用需要以相同的

locale

登录后复制

和

options

登录后复制

格式化多个日期，可以只创建一次格式化器，然后重复使用它。

// 简单的格式化器缓存
const formatterCache = {};

function getCachedDateTimeFormatter(locale, options) {
  // 创建一个唯一的键来标识这个格式化器配置
  const key = `${locale}-${JSON.stringify(options)}`;
  if (!formatterCache[key]) {
    formatterCache[key] = new Intl.DateTimeFormat(locale, options);
  }
  return formatterCache[key];
}

const longDateOptions = { year: 'numeric', month: 'long', day: 'numeric' };

const date1 = new Date();
const date2 = new Date(date1.getTime() + 86400000); // 明天

// 第一次创建并缓存
const enUsFormatter = getCachedDateTimeFormatter('en-US', longDateOptions);
console.log(enUsFormatter.format(date1));

// 第二次直接从缓存获取
console.log(getCachedDateTimeFormatter('en-US', longDateOptions).format(date2));

// 切换语言，创建新的格式化器并缓存
const zhCnFormatter = getCachedDateTimeFormatter('zh-CN', longDateOptions);
console.log(zhCnFormatter.format(date1));

登录后复制

通过这种方式，可以显著减少重复创建对象带来的性能损耗，让你的国际化应用更加流畅。

以上就是如何利用JavaScript的Intl.DateTimeFormat实现多语言日期格式化，以及它如何处理历法和时区差异？的详细内容，更多请关注php中文网其它相关文章！