0

0

如何利用JavaScript的Intl.DateTimeFormat实现多语言日期格式化,以及它如何处理历法和时区差异?

紅蓮之龍

紅蓮之龍

发布时间:2025-09-20 21:39:01

|

551人浏览过

|

来源于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样式时特别有用。

唱鸭
唱鸭

音乐创作全流程的AI自动作曲工具,集 AI 辅助作词、AI 自动作曲、编曲、混音于一体

下载

面对复杂的历法和时区,
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 默认情况下可能只包含英语的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));

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

826

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

742

2023.11.06

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

1407

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

381

2024.03.05

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

927

2025.04.24

java中calendar类的用法
java中calendar类的用法

Java Video类是JavaFX库中的一个类,用于创建和操作视频对象。它提供了方法来加载、播放、暂停、停止和控制视频的音量、速度和循环等属性。想了解更多Java中类的相关内容,可以阅读本专题下面的文章。

309

2024.02.29

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

298

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

212

2023.09.04

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

9

2026.01.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

CSS教程
CSS教程

共754课时 | 24.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号