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 会回退到用户浏览器或操作系统的默认设置。这在开发测试阶段可能没问题，但一旦上线，不同用户的环境千差万别，你的日期显示可能就会变得不可预测。
陷阱表现：用户A看到的是“6/15/2024”，用户B看到的是“15.06.2024”，用户C看到的是“2024年6月15日”，这可能不是你想要的统一体验。正确做法：对于关键的日期显示，尤其是在后台管理系统或需要统一数据展示的场景，务必明确指定 locale。对于涉及时间同步或事件安排的场景，务必明确指定 timeZone。
时区名称的模糊性：timeZoneName 选项虽然方便，但像 'longGeneric' (Pacific Time) 或 'shortGeneric' (PT) 这样的通用名称，在夏令时和冬令时之间切换时，其具体偏移量是会变化的。如果你需要精确的偏移量，最好使用 'longOffset' 或 'shortOffset'。
陷阱表现：用户可能看到“Pacific Time”，但不知道具体是 PDT 还是 PST。正确做法：根据需求选择最能清晰表达时区信息的方式。如果需要精确到偏移量，就用带偏移量的选项。
Intl.DateTimeFormat 不能用于日期解析：它的职责是格式化（Date -> String），而不是解析（String -> Date）。试图用它来解析用户输入的日期字符串是行不通的。
陷阱表现：你可能会尝试用 new Date(formattedString) 来反向解析，但通常会失败或得到意想不到的结果，因为 Date 构造函数对字符串格式有严格要求。正确做法：日期解析通常需要专门的库（如 date-fns 或 moment.js，尽管 moment 已不推荐新项目使用），或者依赖于 Date.parse() 对 ISO 8601 格式的良好支持。
最佳实践：
后端存储和传输日期始终使用 UTC (ISO 8601 格式)：这是最普遍、最稳健的做法。将所有日期时间数据在数据库和 API 传输中都标准化为 UTC，通常是 ISO 8601 字符串（如 2024-06-15T10:30:00.000Z）。这样可以避免服务器和客户端之间的时区混淆，也方便不同系统间的集成。前端仅在显示时进行本地化和时区转换：从后端获取 UTC 时间后，只在需要展示给用户时，才使用 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格式化日期的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1509821.html
微信扫一扫 
支付宝扫一扫 
