JS `Temporal API` `DateTimeFormat` `Locale` `Matching` 算法与自定义规则

各位观众老爷，晚上好！今天咱们来聊聊 JS Temporal API 里的 DateTimeFormat，这玩意儿，说白了就是让你的时间显示得更漂亮、更符合当地人的习惯。但是，要让它真正听你的话，你就得了解它的“内心世界”——Locale、Matching算法，以及怎么自定义规则。准备好了吗？咱们开讲！

第一部分：Temporal API 和 DateTimeFormat，时间魔法棒

首先，简单介绍一下 Temporal API。这东西是用来替代 Date 对象的，Date 对象坑太多，Temporal 就是来填坑的。Temporal 提供了更清晰、更现代化的 API 来处理日期和时间。

DateTimeFormat，顾名思义，就是用来格式化日期和时间的。它能把一个 Temporal 对象（例如 Temporal.PlainDate、Temporal.PlainTime、Temporal.ZonedDateTime 等）变成一个字符串，而且这个字符串会根据指定的 locale 进行格式化。

// 一个简单的例子
const now = Temporal.Now.plainDateTimeISO(); // 获取当前日期和时间
const formatter = new Intl.DateTimeFormat('zh-CN', { // 中国大陆的格式
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  timeZoneName: 'short'
});
const formatted = formatter.format(now);
console.log(formatted); // 输出类似 "2024年10月27日 21:35:42 GMT+8"

这段代码展示了DateTimeFormat的基本用法。我们创建了一个 DateTimeFormat 对象，指定了 locale 为 ‘zh-CN’（中国大陆），并设置了一些格式化选项。然后，我们使用 format() 方法将一个 Temporal 对象格式化成字符串。

第二部分：Locale，语言和文化的身份证

Locale，可以理解为语言和文化的“身份证”。它告诉 DateTimeFormat，应该使用哪种语言的习惯来格式化日期和时间。Locale 的格式通常是 language[-script][-region][-variant]。

• language: 语言代码，例如 en（英语）、zh（中文）。
• script: 脚本代码，例如 Latn（拉丁文）、Hans（简体中文）。
• region: 地区代码，例如 US（美国）、CN（中国大陆）。
• variant: 变体代码，用于区分更细微的文化差异。

一些例子：

• en-US: 美国英语
• zh-CN: 中国大陆简体中文
• de-DE: 德国德语
• fr-CA: 加拿大法语

DateTimeFormat 会根据指定的 locale 来选择合适的格式化规则。例如，在美国，日期通常是 "月/日/年" 的格式，而在欧洲，通常是 "日/月/年" 的格式。

第三部分：Matching 算法，寻找最佳匹配

当你提供一个 locale 给 DateTimeFormat 时，DateTimeFormat 不会傻乎乎地认为你提供的 locale 就一定存在。它会使用一种叫做 "Locale Matching" 的算法，来寻找最合适的 locale。

Matching 算法的目标是找到一个 DateTimeFormat 支持的 locale，它与你提供的 locale 最接近。这个过程有点像相亲，你提出了很多要求（locale），然后系统帮你找到最符合你要求的对象（supported locale）。

Matching 算法通常有几种模式：

• "best fit": 这是默认模式。它会尽力找到最接近你提供的 locale 的 supported locale。
• "lookup": 这种模式会按照你提供的 locale 的顺序，逐个查找是否存在完全匹配的 supported locale。如果找不到，就返回一个默认的 locale。

举个例子，假设 DateTimeFormat 支持的 locale 只有 en-US 和 de-DE。

• 如果你提供 en-GB，使用 "best fit" 模式，DateTimeFormat 可能会选择 en-US，因为它们都是英语。
• 如果你提供 en-GB，使用 "lookup" 模式，DateTimeFormat 可能会返回一个默认的 locale，例如 en，因为它找不到完全匹配的 en-GB。

可以通过 DateTimeFormat 的 resolvedOptions() 方法来查看最终选择的 locale。

const formatter = new Intl.DateTimeFormat('en-GB', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
console.log(formatter.resolvedOptions().locale); // 可能会输出 "en-US" 或 "en"

第四部分：自定义规则，我的时间我做主

DateTimeFormat 提供了很多选项，让你自定义日期和时间的格式。这些选项可以分为以下几类：

1. 日期组件：

   • year: 年份。可以是 "numeric"（例如 "2024"）、"2-digit"（例如 "24"）。
   • month: 月份。可以是 "numeric"（例如 "10"）、"2-digit"（例如 "10"）、"long"（例如 "October"）、"short"（例如 "Oct"）、"narrow"（例如 "O"）。
   • day: 日期。可以是 "numeric"（例如 "27"）、"2-digit"（例如 "27"）。

2. 时间组件：

   • hour: 小时。可以是 "numeric"（例如 "9"）、"2-digit"（例如 "09"）。
   • minute: 分钟。可以是 "numeric"（例如 "35"）、"2-digit"（例如 "35"）。
   • second: 秒。可以是 "numeric"（例如 "42"）、"2-digit"（例如 "42"）。
   • fractionalSecondDigits: 毫秒的位数。可以是 1、2 或 3。

3. 时区：

   • timeZone: 时区。例如 "America/Los_Angeles"、"Asia/Shanghai"。
   • timeZoneName: 时区名称。可以是 "long"（例如 "Pacific Standard Time"）、"short"（例如 "PST"）、"shortOffset"（例如 "GMT-08:00"）、"longOffset"（例如 "GMT-0800"）、"generic"（例如 "Pacific Time"）、"genericShort"（例如 "PT"）。

4. 其他选项：

   • calendar: 日历系统。例如 "gregory"（公历）、"chinese"（农历）。
   • numberingSystem: 数字系统。例如 "latn"（拉丁数字）、"arab"（阿拉伯数字）。
   • hour12: 是否使用 12 小时制。true 表示使用，false 表示使用 24 小时制。
   • hourCycle: 小时周期。可以是 "h11"（1-12）、"h12"（1-12）、"h23"（0-23）、"h24"（1-24）。
   • dateStyle: 日期样式。可以是 "full"、"long"、"medium"、"short"。
   • timeStyle: 时间样式。可以是 "full"、"long"、"medium"、"short"。
   • localeMatcher: Locale Matching 算法。可以是 "best fit" 或 "lookup"。

你可以根据自己的需求，组合这些选项，来创建自定义的格式化规则。

const now = Temporal.Now.plainDateTimeISO();
const formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour12: true
});
const formatted = formatter.format(now.toZonedDateTimeISO('America/Los_Angeles'));
console.log(formatted); // 输出类似 "Oct 27, 9:35 PM PDT"

这个例子展示了如何使用自定义选项来格式化日期和时间。我们指定了 year、month、day、hour、minute、timeZone、timeZoneName 和 hour12 选项，来创建一个符合美国习惯的日期和时间格式。注意，这里使用了 toZonedDateTimeISO 方法来将 PlainDateTimeISO 对象转换为 ZonedDateTime 对象，因为 timeZone 选项只有在 ZonedDateTime 对象上才有效。

第五部分：深入 Matching 算法，知其所以然

让我们更深入地了解一下 Locale Matching 算法。正如前面提到的，Matching 算法的目标是找到最合适的 supported locale。这个过程可以分为以下几个步骤：

1. Canonicalize the Requested Locales: 首先，将你提供的 locale 列表进行规范化。规范化的过程包括将 locale 字符串转换为标准格式，并去除重复的 locale。

2. Available Locales: 获取 DateTimeFormat 支持的 locale 列表。这个列表通常是固定的，由 JavaScript 引擎提供。

3. Locale Selection: 根据指定的 localeMatcher 算法，从 supported locale 列表中选择最合适的 locale。

   • "best fit" 算法：

     a. 对于你提供的每一个 locale，从 supported locale 列表中找到一个 "best fit" 的 locale。

     b. "best fit" 的定义是：找到一个 supported locale，它与你提供的 locale 的语言代码、脚本代码和地区代码都相同，或者至少语言代码相同。如果找到多个符合条件的 supported locale，则选择其中一个。具体的选择策略由 JavaScript 引擎实现决定。

     c. 如果找不到任何符合条件的 supported locale，则返回一个默认的 locale。

   • "lookup" 算法：

     a. 按照你提供的 locale 列表的顺序，逐个查找是否存在完全匹配的 supported locale。

     b. 如果找到完全匹配的 supported locale，则立即返回。

     c. 如果找不到任何完全匹配的 supported locale，则尝试去除 locale 字符串的最后一部分（例如，如果 locale 是 en-GB，则尝试查找 en）。

     d. 重复步骤 c，直到只剩下语言代码。

     e. 如果仍然找不到任何匹配的 supported locale，则返回一个默认的 locale。

4. Return the Selected Locale: 返回最终选择的 locale。

用表格来总结一下 "best fit" 和 "lookup" 算法的区别：

特性	"best fit"	"lookup"
匹配策略	寻找最接近的匹配，允许部分匹配（例如，只匹配语言代码）。	寻找完全匹配，如果找不到完全匹配，则逐级降级（例如，从 en-GB 降级到 en）。
适用场景	当你需要尽可能地找到一个合适的 locale，即使它不是完全匹配时。	当你需要确保只使用完全匹配的 locale，或者当你知道用户很可能需要特定的 locale 时。
性能	通常比 "lookup" 算法慢，因为它需要搜索整个 supported locale 列表。	通常比 "best fit" 算法快，因为它只需要按照你提供的 locale 列表的顺序逐个查找。
结果的不确定性	结果可能是不确定的，因为 "best fit" 算法的具体实现由 JavaScript 引擎决定。	结果是确定的，只要你提供的 locale 列表是固定的，并且 supported locale 列表也是固定的。
例子	你提供 en-GB，supported locale 只有 en-US 和 de-DE，"best fit" 算法可能会选择 en-US，因为它与 en-GB 的语言代码相同。	你提供 en-GB，supported locale 只有 en-US 和 de-DE，"lookup" 算法会返回一个默认的 locale，例如 en，因为它找不到完全匹配的 en-GB。

第六部分：高级技巧，让时间更听话

1. 使用 Unicode Extension Syntax:

   你可以使用 Unicode Extension Syntax 来指定更高级的 locale 选项。例如：

   const formatter = new Intl.DateTimeFormat('zh-CN-u-ca-chinese', { // 使用农历
     year: 'numeric',
     month: 'long',
     day: 'numeric'
   });
   const now = Temporal.Now.plainDateISO().toTemporalYearMonthDay();
   console.log(formatter.format(now)); // 输出农历日期

   在这个例子中，我们使用了 zh-CN-u-ca-chinese 这个 locale，它告诉 DateTimeFormat 使用农历（chinese calendar）。

2. 使用 formatRange() 方法：

   DateTimeFormat 提供了 formatRange() 方法，可以用来格式化日期范围。

   const startDate = Temporal.PlainDate.from('2024-10-27');
   const endDate = Temporal.PlainDate.from('2024-10-31');
   const formatter = new Intl.DateTimeFormat('en-US', {
     year: 'numeric',
     month: 'long',
     day: 'numeric'
   });
   const formattedRange = formatter.formatRange(startDate, endDate);
   console.log(formattedRange); // 输出 "October 27 – October 31, 2024"

3. 处理不支持的 Locale：

   在某些情况下，DateTimeFormat 可能不支持你提供的 locale。为了避免错误，你可以使用 try...catch 语句来捕获异常，并提供一个默认的格式。

   try {
     const formatter = new Intl.DateTimeFormat('invalid-locale', {
       year: 'numeric',
       month: 'long',
       day: 'numeric'
     });
     const formatted = formatter.format(Temporal.Now.plainDateISO());
     console.log(formatted);
   } catch (error) {
     console.error('Unsupported locale:', error);
     // 提供一个默认的格式
     const defaultFormatter = new Intl.DateTimeFormat('en-US', {
       year: 'numeric',
       month: 'long',
       day: 'numeric'
     });
     const formatted = defaultFormatter.format(Temporal.Now.plainDateISO());
     console.log('Using default format:', formatted);
   }

第七部分：总结，时间管理大师

DateTimeFormat 是一个强大的工具，可以让你轻松地格式化日期和时间，并使其符合当地的文化习惯。要充分利用 DateTimeFormat，你需要了解 Locale、Matching 算法，以及如何自定义格式化规则。

记住，时间就像海绵里的水，只要你愿意挤，总还是有的。学会了 DateTimeFormat，你就能更好地管理时间，让时间为你服务，而不是被时间追着跑。

今天的讲座就到这里，感谢各位观众老爷的捧场！希望大家都能成为时间管理大师！