同学们，各位靓仔靓女，早上好/下午好/晚上好！今天咱们来聊聊JavaScript里两个重量级选手：Temporal API 和 Intl 提案，看看它们如何在日期时间处理的国际化舞台上唱双簧。
一、引子：历史的痛点，时代的呼唤
在开始之前，咱们先得回顾一下JavaScript日期时间处理的"黑历史"。Date对象，这个老伙计，相信大家都用过，也都被它坑过。它设计上的缺陷简直是罄竹难书：
- 可变性（Mutability）：
Date对象的值是可以修改的，这在多线程环境下简直是噩梦。一不小心，你的日期就被人偷偷改了，防不胜防。 - 时区处理混乱：
Date对象默认使用本地时区，但在不同时区之间转换时，结果经常让人摸不着头脑。 - API设计反人类：
getMonth()返回的是0-11，getDay()返回的是0-6，简直是程序员的噩梦，要死记硬背。 - 缺乏对日历的支持：
Date对象只支持公历，对于其他日历（比如农历、伊斯兰历）无能为力。
这些问题导致我们在处理日期时间时，经常需要借助第三方库（比如Moment.js、date-fns），但这些库又增加了项目的体积和依赖。
因此，我们需要一个更强大、更易用、更国际化的日期时间处理方案，这就是Temporal API诞生的背景。而Intl提案则一直在国际化方面默默耕耘，为Temporal提供了坚实的基础。
二、Temporal API：闪亮登场的新秀
Temporal API是ES提案中的一个新特性，旨在彻底解决Date对象的缺陷。它具有以下优点：
- 不可变性（Immutability）：
Temporal对象的值是不可变的，每次修改都会返回一个新的对象，避免了意外修改的问题。 - 明确的时区处理：
Temporal提供了清晰的时区概念，可以轻松地在不同时区之间转换。 - 人性化的API设计：
Temporal的API更加直观易懂，避免了Date对象中那些让人迷惑的设定。 - 对日历的支持：
Temporal支持多种日历系统，可以满足不同文化背景下的需求。
Temporal API包含多个类，每个类都负责不同的功能：
Temporal.Instant: 代表时间轴上的一个绝对时刻，精确到纳秒。Temporal.ZonedDateTime: 代表带有时区的日期和时间。Temporal.PlainDateTime: 代表不带时区的日期和时间。Temporal.PlainDate: 代表不带时区的日期。Temporal.PlainTime: 代表不带时区的时间。Temporal.Duration: 代表一段时间间隔。Temporal.TimeZone: 代表时区。Temporal.Calendar: 代表日历系统。
咱们来看一些代码示例：
// 创建一个Temporal.PlainDate对象
const today = Temporal.PlainDate.today();
console.log(today.toString()); // 输出：2023-10-27 (假设今天是2023年10月27日)
// 创建一个Temporal.ZonedDateTime对象，指定时区
const now = Temporal.ZonedDateTime.from({
year: 2023,
month: 10,
day: 27,
hour: 10,
minute: 30,
second: 0,
timeZone: 'America/Los_Angeles'
});
console.log(now.toString()); // 输出：2023-10-27T10:30:00-07:00[America/Los_Angeles]
// 计算两个日期之间的间隔
const startDate = Temporal.PlainDate.from({ year: 2023, month: 1, day: 1 });
const endDate = Temporal.PlainDate.from({ year: 2023, month: 10, day: 27 });
const duration = endDate.since(startDate);
console.log(duration.toString()); // 输出：P9M26D (表示9个月零26天)三、Intl提案：国际化的幕后英雄
Intl提案是ECMAScript国际化API的标准化规范，它提供了一系列对象，用于处理与语言、国家和文化相关的任务，比如：
- 日期和时间格式化： 将日期和时间格式化为特定语言和地区的字符串。
- 数字格式化： 将数字格式化为特定语言和地区的字符串，包括货币、百分比等。
- 排序： 根据特定语言和地区的规则对字符串进行排序。
- 区域设置信息： 获取有关特定语言和地区的信息，比如货币符号、日期格式等。
Intl对象主要包含以下几个类：
Intl.Collator: 用于字符串比较和排序。Intl.DateTimeFormat: 用于日期和时间格式化。Intl.NumberFormat: 用于数字格式化。Intl.PluralRules: 用于处理复数形式。Intl.RelativeTimeFormat: 用于格式化相对时间。Intl.ListFormat: 用于格式化列表。
咱们来看一些代码示例：
// 使用Intl.DateTimeFormat格式化日期
const date = new Date();
const formatter = new Intl.DateTimeFormat('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
timeZoneName: 'short'
});
console.log(formatter.format(date)); // 输出：2023年10月27日 10:45:30 CST (假设当前时间是2023年10月27日 10:45:30，时区是CST)
// 使用Intl.NumberFormat格式化货币
const price = 1234.56;
const currencyFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
console.log(currencyFormatter.format(price)); // 输出：$1,234.56
// 使用Intl.Collator进行字符串排序
const names = ['张三', '李四', '王五'];
const collator = new Intl.Collator('zh-CN');
names.sort(collator.compare);
console.log(names); // 输出：['李四', '王五', '张三']四、Temporal 与 Intl 的深度协同：珠联璧合，相得益彰
Temporal API 和 Intl 提案并不是孤立存在的，它们之间有着紧密的联系，可以相互配合，共同完成国际化日期时间处理的任务。
-
Temporal使用Intl进行本地化：Temporal对象可以使用Intl.DateTimeFormat进行格式化，从而将日期和时间以特定语言和地区的格式呈现出来。 -
Intl可以增强Temporal的功能：Intl提供了更丰富的本地化选项，可以增强Temporal的日期时间格式化能力。
下面咱们通过一些例子来说明它们是如何协同工作的：
场景一：将 Temporal.ZonedDateTime 对象格式化为中文日期时间字符串
const zonedDateTime = Temporal.ZonedDateTime.from({
year: 2023,
month: 10,
day: 27,
hour: 11,
minute: 0,
second: 0,
timeZone: 'Asia/Shanghai'
});
const formatter = new Intl.DateTimeFormat('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
timeZoneName: 'short'
});
console.log(formatter.format(zonedDateTime)); // 输出：2023年10月27日 11:00:00 CST在这个例子中，我们首先创建了一个Temporal.ZonedDateTime对象，然后使用Intl.DateTimeFormat将其格式化为中文日期时间字符串。Intl.DateTimeFormat的第一个参数指定了语言和地区（’zh-CN’表示中国大陆），第二个参数指定了格式化选项，比如年份的显示方式（’numeric’表示数字形式），月份的显示方式（’long’表示完整月份名称）等等。
场景二：根据用户偏好设置格式化 Temporal.PlainDate 对象
假设我们有一个网站，允许用户设置自己的语言和地区偏好。我们可以根据用户的偏好设置来格式化Temporal.PlainDate对象。
// 获取用户偏好设置
const userLocale = navigator.language || 'en-US'; // 获取浏览器默认语言，如果没有则使用英语
const plainDate = Temporal.PlainDate.from({ year: 2023, month: 10, day: 27 });
const formatter = new Intl.DateTimeFormat(userLocale, {
year: 'numeric',
month: 'long',
day: 'numeric'
});
console.log(formatter.format(plainDate)); // 输出：October 27, 2023 (如果用户偏好设置为英语)
// 输出：2023年10月27日 (如果用户偏好设置为中文)在这个例子中，我们首先获取用户的语言偏好设置，然后使用Intl.DateTimeFormat将其格式化为符合用户偏好的日期字符串。
场景三：使用 Intl.RelativeTimeFormat 格式化 Temporal.Duration 对象
Intl.RelativeTimeFormat可以用于格式化相对时间，比如"昨天"、"明天"、"上个月"等等。我们可以结合Temporal.Duration来使用它。
const now = Temporal.Now.plainDate('iso8601');
const birthday = Temporal.PlainDate.from({ year: 1990, month: 5, day: 15 });
const duration = now.until(birthday);
const relativeTimeFormat = new Intl.RelativeTimeFormat('zh-CN', { numeric: 'auto' });
console.log(relativeTimeFormat.format(duration.years, 'year')); // 输出：33年后
console.log(relativeTimeFormat.format(duration.months, 'month')); // 输出：-6个月后
console.log(relativeTimeFormat.format(duration.days, 'day')); // 输出：-12天后五、Temporal + Intl：实战案例分析
为了让大家更好地理解Temporal API 和 Intl 提案的实际应用，咱们来看一个更复杂的案例：创建一个多语言支持的日历组件。
这个日历组件需要满足以下需求：
- 能够显示指定月份的日历。
- 支持多种语言和地区，能够根据用户的偏好设置显示日期和星期几的名称。
- 能够突出显示指定的日期。
下面是这个日历组件的核心代码：
class Calendar {
constructor(locale = 'en-US', highlightedDates = []) {
this.locale = locale;
this.highlightedDates = highlightedDates;
this.dateFormatter = new Intl.DateTimeFormat(this.locale, {
year: 'numeric',
month: 'long',
day: 'numeric'
});
this.weekdayFormatter = new Intl.DateTimeFormat(this.locale, { weekday: 'short' });
}
render(year, month) {
const firstDayOfMonth = Temporal.PlainDate.from({ year, month, day: 1 });
const lastDayOfMonth = firstDayOfMonth.with({ month: month + 1, day: 1 }).subtract({ days: 1 });
const firstDayOfWeek = firstDayOfMonth.dayOfWeek; // 1 (Monday) to 7 (Sunday)
let calendarHTML = '<table>';
calendarHTML += '<thead><tr>';
// 渲染星期几的表头
for (let i = 0; i < 7; i++) {
const dayOfWeek = (i + 1) % 7; // 0 (Sunday) to 6 (Saturday)
const date = Temporal.PlainDate.from({ year: 2023, month: 1, day: (dayOfWeek + 1) }); // 任意一月，只为了获取星期名称
calendarHTML += `<th>${this.weekdayFormatter.format(date)}</th>`;
}
calendarHTML += '</tr></thead>';
calendarHTML += '<tbody>';
let dayCounter = 1;
for (let week = 0; week < 6; week++) { // 最多6周
calendarHTML += '<tr>';
for (let day = 0; day < 7; day++) {
if (week === 0 && day < (firstDayOfWeek === 7 ? 0 : firstDayOfWeek)) {
// 渲染空白单元格
calendarHTML += '<td></td>';
} else if (dayCounter <= lastDayOfMonth.day) {
const currentDate = Temporal.PlainDate.from({ year, month, day: dayCounter });
const isHighlighted = this.highlightedDates.some(date => currentDate.equals(date));
const highlightedClass = isHighlighted ? 'highlighted' : '';
calendarHTML += `<td class="${highlightedClass}">${dayCounter}</td>`;
dayCounter++;
} else {
// 渲染空白单元格
calendarHTML += '<td></td>';
}
}
calendarHTML += '</tr>';
if (dayCounter > lastDayOfMonth.day) {
break; // 提前结束循环
}
}
calendarHTML += '</tbody></table>';
return calendarHTML;
}
}
// 使用日历组件
const highlightedDates = [
Temporal.PlainDate.from({ year: 2023, month: 10, day: 27 }),
Temporal.PlainDate.from({ year: 2023, month: 10, day: 31 })
];
const calendar = new Calendar('zh-CN', highlightedDates); // 使用中文
const calendarHTML = calendar.render(2023, 10); // 显示2023年10月的日历
document.getElementById('calendar-container').innerHTML = calendarHTML;
const calendarEn = new Calendar('en-US', highlightedDates); // 使用英文
const calendarHTMLEn = calendarEn.render(2023, 10); // 显示2023年10月的日历
document.getElementById('calendar-container-en').innerHTML = calendarHTMLEn;关键点解释：
- 构造函数: 接收语言环境
locale和需要高亮显示的日期数组highlightedDates，并初始化日期和星期格式化器dateFormatter和weekdayFormatter。 render(year, month)方法:- 根据传入的年份和月份，计算出该月的第一天和最后一天。
- 计算出第一天是星期几。
- 循环遍历每一周和每一天，生成日历的 HTML 代码。
- 使用
Intl.DateTimeFormat格式化星期几的名称。 - 如果当前日期需要高亮显示，则添加
highlighted类。
- HTML 结构: 使用
<table>标签来创建日历的表格结构。<thead>创建表头，包含星期几的名称。<tbody>创建表体，包含日期。
六、总结与展望
今天咱们深入探讨了Temporal API 和 Intl 提案在JavaScript国际化日期时间处理中的深度协同。Temporal API以其不可变性、明确的时区处理和人性化的API设计，彻底解决了Date对象的缺陷。Intl提案则为Temporal API提供了强大的本地化支持，使其能够轻松地处理各种语言和地区的日期时间格式。
Temporal API 和 Intl 提案的结合，为JavaScript开发者提供了一个更加强大、更加易用、更加国际化的日期时间处理方案。虽然Temporal API目前还处于提案阶段，但相信在不久的将来，它将会成为JavaScript的标准特性，彻底改变我们处理日期时间的方式。
希望今天的讲座能够帮助大家更好地理解Temporal API 和 Intl 提案，并在实际项目中应用它们。 记住，掌握这些技术，你就能更好地应对各种国际化的挑战，让你的应用走向世界！
感谢大家！ 下课！