JavaScript日期格式化技巧

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《JavaScript使用Intl.DateTimeFormat格式化日期的方法》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

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 对象。

例如，最基础的用法：

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 的出现，彻底改变了这种局面。它的最大优势在于：

1. 显式控制与精细粒度：传统方法往往只能选择预设的几种格式（如短日期、长日期），而 Intl.DateTimeFormat 允许你通过 options 对象，精确到每一个日期时间组件（年、月、日、时、分、秒、星期几、纪元等）的显示方式，比如月份要显示数字还是全称，年份是两位还是四位。这种精细度是传统方法无法比拟的。
2. 真正的国际化支持：它不仅仅是简单地翻译月份和星期，它理解不同语言环境下的日期书写习惯。比如，在英语中是“月/日/年”，在德语中是“日.月.年”，在中文中是“年/月/日”。它还能处理不同的数字系统（如阿拉伯数字、印度数字），甚至包括日历系统（虽然这部分在日常开发中不常用，但能力在那里）。
3. 时区处理的强大与便捷：这是我最欣赏的一点。你可以直接指定 timeZone 选项，让日期时间以特定时区显示，而无需手动进行复杂的时区转换计算。这对于全球化应用来说是至关重要的，比如一个跨国会议的日程，你希望每个用户都能看到自己当地时间对应的会议开始时间。
4. 性能考量（针对批量操作）：如果你需要格式化大量的日期，创建一次 Intl.DateTimeFormat 实例，然后重复调用其 format() 方法，通常比每次都调用 toLocaleString() 性能更好，因为它避免了重复的语言环境解析和格式化规则查找。
5. 语义化与可读性：通过 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 对象体系时，处理时区和国际化日期，我发现有些地方特别容易踩坑，或者说，有些概念一开始理解起来会有点模糊。这不仅仅是技术细节，更关乎我们如何构建一个真正健壮、用户友好的全球化应用。

常见陷阱：

1. 误解 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 选项，只是改变了你“看”这个锚点时所用的时区视角，而不是改变锚点本身。

2. 过度依赖浏览器默认设置：如果你不明确指定 locale 或 timeZone，Intl.DateTimeFormat 会回退到用户浏览器或操作系统的默认设置。这在开发测试阶段可能没问题，但一旦上线，不同用户的环境千差万别，你的日期显示可能就会变得不可预测。

   • 陷阱表现：用户A看到的是“6/15/2024”，用户B看到的是“15.06.2024”，用户C看到的是“2024年6月15日”，这可能不是你想要的统一体验。
   • 正确做法：对于关键的日期显示，尤其是在后台管理系统或需要统一数据展示的场景，务必明确指定 locale。对于涉及时间同步或事件安排的场景，务必明确指定 timeZone。

3. 时区名称的模糊性：timeZoneName 选项虽然方便，但像 'longGeneric' (Pacific Time) 或 'shortGeneric' (PT) 这样的通用名称，在夏令时和冬令时之间切换时，其具体偏移量是会变化的。如果你需要精确的偏移量，最好使用 'longOffset' 或 'shortOffset'。

   • 陷阱表现：用户可能看到“Pacific Time”，但不知道具体是 PDT 还是 PST。
   • 正确做法：根据需求选择最能清晰表达时区信息的方式。如果需要精确到偏移量，就用带偏移量的选项。

4. Intl.DateTimeFormat 不能用于日期解析：它的职责是格式化（Date -> String），而不是解析（String -> Date）。试图用它来解析用户输入的日期字符串是行不通的。

   • 陷阱表现：你可能会尝试用 new Date(formattedString) 来反向解析，但通常会失败或得到意想不到的结果，因为 Date 构造函数对字符串格式有严格要求。
   • 正确做法：日期解析通常需要专门的库（如 date-fns 或 moment.js，尽管 moment 已不推荐新项目使用），或者依赖于 Date.parse() 对 ISO 8601 格式的良好支持。

最佳实践：

1. 后端存储和传输日期始终使用 UTC (ISO 8601 格式)：这是最普遍、最稳健的做法。将所有日期时间数据在数据库和 API 传输中都标准化为 UTC，通常是 ISO 8601 字符串（如 2024-06-15T10:30:00.000Z）。这样可以避免服务器和客户端之间的时区混淆，也方便不同系统间的集成。
2. 前端仅在显示时进行本地化和时区转换：从后端获取 UTC 时间后，只在需要展示给用户时，才使用 Intl.DateTimeFormat 根据用户的偏好或业务需求进行格式化和时区转换。
3. 明确指定 locale 和 timeZone：除非你确实希望依赖用户的系统默认设置（例如，一个纯粹的本地工具），否则始终明确指定 new Intl.DateTimeFormat(locale, options) 中的 locale 和 timeZone。这能确保你的应用在全球范围内提供一致且可预测的用户体验。
   • locale 可以从用户浏览器 navigator.language 获取，或允许用户在设置中选择。
   • timeZone 可以从用户浏览器 Intl.DateTimeFormat().resolvedOptions().timeZone 获取，或从用户设置中选择，或根据业务逻辑硬编码（如事件统一显示为某地时间）。
4. 利用 resolvedOptions() 调试和理解行为：当你创建了一个 Intl.DateTimeFormat 实例后，可以调用 formatter.resolvedOptions() 来查看它最终解析出来的语言环境和选项。这对于调试和理解为什么某个格式会以特定方式显示非常有帮助。
5. 为日期计算使用专门的库或 Date 方法：Intl.DateTimeFormat 专注于格式化。如果你需要进行日期的加减、比较、获取特定日期（如月初、月末），请使用 Date 对象本身的方法（如 setHours, setDate）或更专业的日期处理库。
6. 考虑浏览器兼容性（虽然 Intl 现已广泛支持）：尽管现代浏览器对 Intl API 的支持已经非常完善，但在极少数情况下，如果你需要支持非常老的浏览器，可能需要引入 polyfill。不过，这在大多数新项目中已不再是主要考虑。

通过遵循这些最佳实践，你就能更自信、更高效地处理 JavaScript 中的日期时间国际化问题，避免那些令人头疼的时区和格式陷阱。

到这里，我们也就讲完了《JavaScript日期格式化技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！