intl.datetimeformat 是 javascript 中用于国际化日期和时间格式化的强大工具。1. 它能根据指定的语言环境自动处理日期格式、月份名称、星期几、时区等；2. 支持通过 options 对象精细控制年、月、日、时、分、秒等组件的显示方式；3. 提供 datestyle 和 timestyle 快捷选项用于常用格式；4. 支持指定时区（timezone）及时区名称（timezonename）；5. 相比传统 date 方法，具备更高的灵活性、更精细的控制、更强大的国际化支持及更优的性能；6. 使用时应明确指定 locale 和 timezone 以避免默认行为带来的不确定性；7. 适用于展示但不适用于解析日期字符串；8. 最佳实践包括使用 utc 存储和传输日期，仅在展示时进行本地化转换。
JavaScript中，Intl.DateTimeFormat 提供了一个强大且国际化的方式来格式化日期和时间。它不仅仅是简单地将日期对象转换为字符串，更关键的是，它能根据特定的语言环境（locale）和格式选项，自动处理数字系统、月份名称、星期几、时区乃至日期组件的顺序，让你的应用在全球范围内都能以用户习惯的方式展示时间信息。这省去了我们手动编写大量条件判断和映射表的麻烦，大大提升了开发效率和用户体验。
使用 Intl.DateTimeFormat 来格式化日期非常直接。你需要创建一个 DateTimeFormat 实例，传入可选的语言环境（locale）和格式化选项（options），然后调用其 format() 方法，传入一个 Date 对象。
例如，最基础的用法：
立即学习“Java免费学习笔记（深入）”；
const date = new Date(); // 当前日期和时间
// 默认语言环境和选项
const formatterDefault = new Intl.DateTimeFormat();
console.log(formatterDefault.format(date));
// 示例输出: "6/15/2024, 10:30:00 AM" (取决于你的系统设置)
// 指定语言环境
const formatterCN = new Intl.DateTimeFormat('zh-CN');
console.log(formatterCN.format(date));
// 示例输出: "2024/6/15 星期六 上午10:30:00"
// 指定语言环境和时区
const formatterTokyo = new Intl.DateTimeFormat('ja-JP', { timeZone: 'Asia/Tokyo' });
console.log(formatterTokyo.format(date));
// 示例输出: "2024/6/15 11:30:00" (如果当前是北京时间10:30)更复杂的格式化，你需要利用 options 对象来精细控制输出：
const date = new Date('2024-06-15T10:30:00Z'); // UTC时间
// 仅显示日期，长格式
const optionsDateLong = { year: 'numeric', month: 'long', day: 'numeric' };
const formatterDateLong = new Intl.DateTimeFormat('en-US', optionsDateLong);
console.log(formatterDateLong.format(date));
// 示例输出: "June 15, 2024"
// 显示时间和日期，短格式，24小时制
const optionsDateTimeShort = {
year: 'numeric', month: '2-digit', day: '2-digit',
hour: '2-digit', minute: '2-digit', second: '2-digit',
hourCycle: 'h23' // 强制24小时制
};
const formatterDateTimeShort = new Intl.DateTimeFormat('en-GB', optionsDateTimeShort);
console.log(formatterDateTimeShort.format(date));
// 示例输出: "15/06/2024, 10:30:00" (因为输入是UTC，这里默认显示UTC时间)
// 使用 dateStyle 和 timeStyle 简化常用格式
const formatterFull = new Intl.DateTimeFormat('en-US', { dateStyle: 'full', timeStyle: 'long' });
console.log(formatterFull.format(date));
// 示例输出: "Saturday, June 15, 2024 at 10:30:00 AM UTC" (自动带上时区信息)Intl.DateTimeFormat 的灵活性在于它能组合多种选项，满足几乎所有国际化日期格式的需求。
Intl.DateTimeFormat 相比传统 Date 方法有何优势？在JavaScript中，我们很早就有了像 Date.prototype.toLocaleDateString()、toLocaleString() 这样的方法。它们确实能提供一些基本的本地化格式，用起来也挺方便。但说实话，一旦你对格式化有了一点点细致的要求，或者需要处理多语言、多时区的场景，这些传统方法就显得力不不逮了。我个人就曾被 toLocaleString() 那些“黑盒”般的默认行为搞得头大，想要微调一下，结果发现根本无从下手，只能寄希望于浏览器默认行为符合预期，或者干脆自己写一大堆冗长的 if/else 逻辑去拼字符串。
Intl.DateTimeFormat 的出现，彻底改变了这种局面。它的最大优势在于：
Intl.DateTimeFormat 允许你通过 options 对象，精确到每一个日期时间组件（年、月、日、时、分、秒、星期几、纪元等）的显示方式，比如月份要显示数字还是全称，年份是两位还是四位。这种精细度是传统方法无法比拟的。timeZone 选项，让日期时间以特定时区显示，而无需手动进行复杂的时区转换计算。这对于全球化应用来说是至关重要的，比如一个跨国会议的日程，你希望每个用户都能看到自己当地时间对应的会议开始时间。Intl.DateTimeFormat 实例，然后重复调用其 format() 方法，通常比每次都调用 toLocaleString() 性能更好，因为它避免了重复的语言环境解析和格式化规则查找。options 对象，你的代码意图更加清晰。一眼就能看出你想如何格式化日期，而不是依赖于某个字符串参数的魔术值。总的来说，如果你只是想简单地显示一个日期，toLocaleString() 也许够用。但如果你对用户体验有更高要求，或者你的应用面向全球用户，那么 Intl.DateTimeFormat 绝对是更专业、更可靠、更省心的选择。它把国际化和本地化的复杂性封装得很好，让我们开发者可以更专注于业务逻辑。
Intl.DateTimeFormat 的输出格式？自定义 Intl.DateTimeFormat 的输出格式，核心在于第二个参数——options 对象。这个对象里包含了各种各样的属性，每一个属性都对应日期时间的一个组件或一个格式化规则，通过它们，你几乎可以拼凑出任何你想要的日期时间字符串。
我们来深入看看一些常用的 options 属性及其用法：
1. 日期组件的显示方式：
这些属性决定了年、月、日、星期等如何显示。它们的值通常是 'numeric' (数字), '2-digit' (两位数字), 'long' (全称), 'short' (缩写), 'narrow' (更短的缩写)。
year: 'numeric' (2024), '2-digit' (24)month: 'numeric' (6), '2-digit' (06), 'long' (June), 'short' (Jun), 'narrow' (J)day: 'numeric' (15), '2-digit' (15)weekday: 'long' (Saturday), 'short' (Sat), 'narrow' (S)era: 'long' (Anno Domini), 'short' (AD), 'narrow' (A) (用于显示公元前后等)const date = new Date('2024-06-15T14:30:00Z'); // UTC时间
// 显示“六月 十五日 星期六”
const customDate1 = new Intl.DateTimeFormat('zh-CN', {
month: 'long',
day: 'numeric',
weekday: 'long'
});
console.log(customDate1.format(date)); // 示例输出: "六月 十五日 星期六"
// 显示“24/06/15”
const customDate2 = new Intl.DateTimeFormat('en-GB', {
year: '2-digit',
month: '2-digit',
day: '2-digit'
});
console.log(customDate2.format(date)); // 示例输出: "15/06/24" (注意英式日期习惯)2. 时间组件的显示方式：
hour: 'numeric', '2-digit'
minute: 'numeric', '2-digit'
second: 'numeric', '2-digit'
fractionalSecondDigits: 1到3的数字，用于显示毫秒。hourCycle: 'h11', 'h12', 'h23', 'h24'。这决定了小时是12小时制（带AM/PM）还是24小时制，以及0点或12点的表示方式。const date = new Date('2024-06-15T01:05:08.123Z'); // UTC时间
// 显示“01:05:08 AM”
const customTime1 = new Intl.DateTimeFormat('en-US', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hourCycle: 'h12' // 明确12小时制
});
console.log(customTime1.format(date)); // 示例输出: "01:05:08 AM"
// 显示“13:05:08.123” (假设在东八区)
const customTime2 = new Intl.DateTimeFormat('zh-CN', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
fractionalSecondDigits: 3,
hourCycle: 'h23', // 明确24小时制
timeZone: 'Asia/Shanghai' // 指定时区
});
console.log(customTime2.format(date)); // 示例输出: "13:05:08.123"3. 预设的日期/时间样式：dateStyle 和 timeStyle
这两个属性是快捷方式，它们的值可以是 'full', 'long', 'medium', 'short'。它们会根据语言环境自动选择最合适的日期或时间组合。
const date = new Date();
// 完整日期和时间
const fullStyle = new Intl.DateTimeFormat('en-US', { dateStyle: 'full', timeStyle: 'long' });
console.log(fullStyle.format(date)); // 示例: "Saturday, June 15, 2024 at 10:30:00 AM PDT"
// 短日期和时间
const shortStyle = new Intl.DateTimeFormat('en-CA', { dateStyle: 'short', timeStyle: 'short' });
console.log(shortStyle.format(date)); // 示例: "2024-06-15, 10:30 a.m."4. 时区 (timeZone) 和时区名称 (timeZoneName)：
timeZone: 指定要显示的时区，例如 'America/New_York', 'Asia/Shanghai', 'UTC'。timeZoneName: 'long' (Pacific Daylight Time), 'short' (PDT), 'longOffset' (GMT-07:00), 'shortOffset' (GMT-7), 'longGeneric' (Pacific Time), 'shortGeneric' (PT)。const date = new Date(); // 假设当前是北京时间 2024-06-15 10:30:00
// 显示纽约时间，带长时区名称
const nyTime = new Intl.DateTimeFormat('en-US', {
hour: '2-digit',
minute: '2-digit',
timeZone: 'America/New_York',
timeZoneName: 'long'
});
console.log(nyTime.format(date)); // 示例输出: "10:30 AM Eastern Daylight Time" (如果当前是纽约夏令时)
// 显示伦敦时间，带短时区偏移
const londonTime = new Intl.DateTimeFormat('en-GB', {
hour: '2-digit',
minute: '2-digit',
timeZone: 'Europe/London',
timeZoneName: 'shortOffset'
});
console.log(londonTime.format(date)); // 示例输出: "03:30 GMT+1" (如果当前是伦敦夏令时)通过灵活组合这些选项，你可以精确地控制 Intl.DateTimeFormat 的输出，使其完美符合你的应用需求和目标用户的习惯。记住，一旦你指定了 dateStyle 或 timeStyle，再单独指定 year, month, day 等组件可能会被忽略，因为样式优先级更高。
在使用 Intl.DateTimeFormat 甚至整个 JavaScript Date 对象体系时，处理时区和国际化日期，我发现有些地方特别容易踩坑，或者说，有些概念一开始理解起来会有点模糊。这不仅仅是技术细节，更关乎我们如何构建一个真正健壮、用户友好的全球化应用。
常见陷阱：
误解 Date 对象的本质：最常见的一个误区是认为 new Date() 构造出来的 Date 对象包含了时区信息。实际上，JavaScript 的 Date 对象内部存储的是一个从 Unix Epoch (1970年1月1日 00:00:00 UTC) 起算的毫秒数。它本身是“时区无关”的，或者说，它始终代表一个特定的UTC时刻。当你 console.log(new Date()) 时，看到的是本地时区的时间，那只是因为 Date.prototype.toString() 方法为了方便调试，自动将 UTC 时间转换成了你系统当前的时区进行显示。
Date 对象的时区，这是不可能的。Date 对象一旦创建，其内部的 UTC 毫秒数就固定了。Date 对象是时间的“锚点”，而时区是“视角”。Intl.DateTimeFormat 的 timeZone 选项，只是改变了你“看”这个锚点时所用的时区视角，而不是改变锚点本身。过度依赖浏览器默认设置：如果你不明确指定 locale 或 timeZone，Intl.DateTimeFormat 会回退到用户浏览器或操作系统的默认设置。这在开发测试阶段可能没问题，但一旦上线，不同用户的环境千差万别，你的日期显示可能就会变得不可预测。
locale。对于涉及时间同步或事件安排的场景，务必明确指定 timeZone。时区名称的模糊性：timeZoneName 选项虽然方便，但像 'longGeneric' (Pacific Time) 或 'shortGeneric' (PT) 这样的通用名称，在夏令时和冬令时之间切换时，其具体偏移量是会变化的。如果你需要精确的偏移量，最好使用 'longOffset' 或 'shortOffset'。
Intl.DateTimeFormat 不能用于日期解析：它的职责是格式化（Date -> String），而不是解析（String -> Date）。试图用它来解析用户输入的日期字符串是行不通的。
new Date(formattedString) 来反向解析，但通常会失败或得到意想不到的结果，因为 Date 构造函数对字符串格式有严格要求。date-fns 或 moment.js，尽管 moment 已不推荐新项目使用），或者依赖于 Date.parse() 对 ISO 8601 格式的良好支持。最佳实践：
2024-06-15T10:30:00.000Z）。这样可以避免服务器和客户端之间的时区混淆，也方便不同系统间的集成。Intl.DateTimeFormat 根据用户的偏好或业务需求进行格式化和时区转换。locale 和 timeZone：除非你确实希望依赖用户的系统默认设置（例如，一个纯粹的本地工具），否则始终明确指定 new Intl.DateTimeFormat(locale, options) 中的 locale 和 timeZone。这能确保你的应用在全球范围内提供一致且可预测的用户体验。locale 可以从用户浏览器 navigator.language 获取，或允许用户在设置中选择。timeZone 可以从用户浏览器 Intl.DateTimeFormat().resolvedOptions().timeZone 获取，或从用户设置中选择，或根据业务逻辑硬编码（如事件统一显示为某地时间）。resolvedOptions() 调试和理解行为：当你创建了一个 Intl.DateTimeFormat 实例后，可以调用 formatter.resolvedOptions() 来查看它最终解析出来的语言环境和选项。这对于调试和理解为什么某个格式会以特定方式显示非常有帮助。Date 方法：Intl.DateTimeFormat 专注于格式化。如果你需要进行日期的加减、比较、获取特定日期（如月初、月末），请使用 Date 对象本身的方法（如 setHours, setDate）或更专业的日期处理库。Intl 现已广泛支持）：尽管现代浏览器对 Intl API 的支持已经非常完善，但在极少数情况下，如果你需要支持非常老的浏览器，可能需要引入 polyfill。不过，这在大多数新项目中已不再是主要考虑。通过遵循这些最佳实践，你就能更自信、更高效地处理 JavaScript 中的日期时间国际化问题，避免那些令人头疼的时区和格式陷阱。
以上就是JavaScript如何用Intl.DateTimeFormat格式化日期的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
549
收藏
