各位观众老爷，早上好中午好晚上好！欢迎来到今天的“时间旅行者指南”讲座，我是你们的导游，专门带大家畅游 JavaScript 的 Temporal API 世界。
话说 JavaScript 的日期时间处理一直是个老大难问题，简直就是程序员的噩梦。Date 对象的设计缺陷简直罄竹难书，时区处理混乱，API 难用得令人发指。每次碰到日期时间，我都想祭出 moment.js 这把倚天剑，但它毕竟是个外部库，而且体积也不小。
好消息是，JavaScript 终于要迎来它的救星了！那就是处于 Stage 3 阶段的 Temporal API。它旨在取代 Date 对象，成为 JavaScript 中处理日期和时间的官方标准。今天，我们就来深入了解一下这个强大的 API。
Temporal API 的核心概念
Temporal API 引入了一系列新的对象，用于表示不同的日期时间概念。我们先来认识一下这些核心成员：
Temporal.PlainDate: 表示一个没有时区信息的日期（年、月、日）。比如 2023 年 10 月 27 日。Temporal.PlainTime: 表示一个没有时区信息的时间（小时、分钟、秒、毫秒等）。比如 10 点 30 分 0 秒。Temporal.PlainDateTime: 表示一个没有时区信息的日期和时间。它是PlainDate和PlainTime的组合。Temporal.ZonedDateTime: 表示一个带时区信息的日期和时间。这是处理真实世界场景中最常用的类型。Temporal.Instant: 表示时间轴上的一个绝对时间点，以 UTC 时间为基准。Temporal.TimeZone: 表示一个时区。Temporal.Duration: 表示一段时间的长度，比如 2 天 3 小时。Temporal.YearMonth: 表示一个特定的年份和月份，不包含日。Temporal.MonthDay: 表示一个特定的月份和日期，不包含年份。
这些对象都是不可变的（immutable），这意味着一旦创建，就不能修改。任何操作都会返回一个新的对象，这有助于避免意外的副作用。
创建一个 Temporal 对象
我们先来看看如何创建这些 Temporal 对象。
Temporal.PlainDate
// 从年、月、日创建
const plainDate = Temporal.PlainDate.from({ year: 2023, month: 10, day: 27 });
console.log(plainDate.toString()); // 输出：2023-10-27
// 从 ISO 格式的字符串创建
const plainDateFromString = Temporal.PlainDate.from("2023-10-28");
console.log(plainDateFromString.toString()); // 输出：2023-10-28
//从Date对象创建
const date = new Date();
const plainDateFromDate = Temporal.PlainDate.from(date);
console.log(plainDateFromDate.toString());Temporal.PlainTime
// 从小时、分钟、秒创建
const plainTime = Temporal.PlainTime.from({ hour: 10, minute: 30, second: 0 });
console.log(plainTime.toString()); // 输出：10:30:00
// 从 ISO 格式的字符串创建
const plainTimeFromString = Temporal.PlainTime.from("11:45:30");
console.log(plainTimeFromString.toString()); // 输出：11:45:30Temporal.PlainDateTime
// 从年、月、日、小时、分钟、秒创建
const plainDateTime = Temporal.PlainDateTime.from({
year: 2023,
month: 10,
day: 27,
hour: 10,
minute: 30,
second: 0,
});
console.log(plainDateTime.toString()); // 输出：2023-10-27T10:30:00
// 从 ISO 格式的字符串创建
const plainDateTimeFromString = Temporal.PlainDateTime.from("2023-10-28T12:00:00");
console.log(plainDateTimeFromString.toString()); // 输出：2023-10-28T12:00:00Temporal.ZonedDateTime
// 创建一个带时区信息的日期和时间
const zonedDateTime = Temporal.ZonedDateTime.from({
year: 2023,
month: 10,
day: 27,
hour: 10,
minute: 30,
second: 0,
timeZone: "America/Los_Angeles", // 时区
});
console.log(zonedDateTime.toString()); // 输出：2023-10-27T10:30:00-07:00[America/Los_Angeles]
//从Date对象创建
const date = new Date();
const zonedDateTimeFromDate = Temporal.ZonedDateTime.from(date, {timeZone: 'America/Los_Angeles'})
console.log(zonedDateTimeFromDate.toString());Temporal.Instant
// 从 Unix 时间戳创建
const instant = Temporal.Instant.fromEpochMilliseconds(Date.now());
console.log(instant.toString()); // 输出类似于：2023-10-27T17:30:00.000Z
//从Date对象创建
const date = new Date();
const instantFromDate = Temporal.Instant.from(date);
console.log(instantFromDate.toString());Temporal.Duration
// 创建一个表示 2 天 3 小时的 Duration
const duration = Temporal.Duration.from({ days: 2, hours: 3 });
console.log(duration.toString()); // 输出：P2DT3H
// 从 ISO 8601 格式的字符串创建
const durationFromString = Temporal.Duration.from("P1Y2M3DT4H5M6S");
console.log(durationFromString.toString()); // 输出：P1Y2M3DT4H5M6STemporal 对象的常用操作
创建了 Temporal 对象之后，我们就可以对它们进行各种操作了。
获取日期和时间的各个部分
const plainDate = Temporal.PlainDate.from({ year: 2023, month: 10, day: 27 });
console.log(plainDate.year); // 输出：2023
console.log(plainDate.month); // 输出：10
console.log(plainDate.day); // 输出：27
console.log(plainDate.dayOfWeek); // 输出：5 (星期五)
console.log(plainDate.dayOfYear); // 输出：300 (一年中的第 300 天)
console.log(plainDate.weekOfYear); // 输出：43 （一年中的第 43 周）日期和时间的加减
const plainDate = Temporal.PlainDate.from({ year: 2023, month: 10, day: 27 });
// 加 5 天
const newPlainDate = plainDate.add({ days: 5 });
console.log(newPlainDate.toString()); // 输出：2023-11-01
// 减 2 个月
const anotherPlainDate = plainDate.subtract({ months: 2 });
console.log(anotherPlainDate.toString()); // 输出：2023-08-27
const plainDateTime = Temporal.PlainDateTime.from({year: 2023, month: 10, day: 27, hour: 10, minute: 30});
const newPlainDateTime = plainDateTime.add({hours: 2, minutes: 30});
console.log(newPlainDateTime.toString()); // 输出：2023-10-27T13:00:00日期和时间的比较
const plainDate1 = Temporal.PlainDate.from({ year: 2023, month: 10, day: 27 });
const plainDate2 = Temporal.PlainDate.from({ year: 2023, month: 10, day: 28 });
console.log(plainDate1.equals(plainDate2)); // 输出：false
console.log(plainDate1.until(plainDate2)); // 输出：{ years: 0, months: 0, weeks: 0, days: 1, hours: 0, minutes: 0, seconds: 0, milliseconds: 0, microseconds: 0, nanoseconds: 0 }
console.log(plainDate1.since(plainDate2)); // 输出：{ years: 0, months: 0, weeks: 0, days: -1, hours: 0, minutes: 0, seconds: 0, milliseconds: 0, microseconds: 0, nanoseconds: 0 }
console.log(Temporal.PlainDate.compare(plainDate1, plainDate2)); // 输出：-1 (plainDate1 < plainDate2)
if (plainDate1 < plainDate2) { //注意这里不能直接比较，需要覆写valueOf方法才行。但是不推荐直接使用<和>比较，推荐使用compare
console.log("plainDate1 is before plainDate2");
} else {
console.log("plainDate1 is not before plainDate2");
}日期和时间的格式化
Temporal API 本身并没有提供格式化日期时间的 API，而是建议使用 Intl.DateTimeFormat 对象。
const plainDate = Temporal.PlainDate.from({ year: 2023, month: 10, day: 27 });
const formatter = new Intl.DateTimeFormat('zh-CN', { // 使用中文格式
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
});
console.log(formatter.format(plainDate.toJSDate())); // 输出：2023年10月27日 星期五
const zonedDateTime = Temporal.ZonedDateTime.from({
year: 2023,
month: 10,
day: 27,
hour: 10,
minute: 30,
second: 0,
timeZone: "America/Los_Angeles", // 时区
});
const formatter2 = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
timeZone: 'America/Los_Angeles',
timeZoneName: 'short'
});
console.log(formatter2.format(zonedDateTime.toJSDate())); // 输出：October 27, 2023, 10:30 AM PDT时区处理
Temporal API 在时区处理方面做了很大的改进。它使用 IANA 时区数据库，提供了准确可靠的时区信息。
// 获取当前时区
const currentTimeZone = Temporal.Now.timeZoneId();
console.log(currentTimeZone); // 输出：Asia/Shanghai (取决于你所在的地区)
// 将日期时间转换为不同的时区
const zonedDateTime = Temporal.ZonedDateTime.from({
year: 2023,
month: 10,
day: 27,
hour: 10,
minute: 30,
second: 0,
timeZone: "America/Los_Angeles", // 原始时区
});
const newZonedDateTime = zonedDateTime.withTimeZone("Asia/Shanghai");
console.log(newZonedDateTime.toString()); // 输出：2023-10-28T01:30:00+08:00[Asia/Shanghai]
// 计算两个时区之间的时间差
const timeZone1 = Temporal.TimeZone.from("America/Los_Angeles");
const timeZone2 = Temporal.TimeZone.from("Asia/Shanghai");
const now = Temporal.Now.instant();
const offset1 = timeZone1.getOffsetStringFor(now);
const offset2 = timeZone2.getOffsetStringFor(now);
console.log(`Los Angeles offset: ${offset1}`); // 输出：Los Angeles offset: -07:00
console.log(`Shanghai offset: ${offset2}`); // 输出：Shanghai offset: +08:00与其他 API 的集成
Temporal API 可以与现有的 JavaScript API 集成，比如 Date 对象。
// 将 Temporal 对象转换为 Date 对象
const plainDate = Temporal.PlainDate.from({ year: 2023, month: 10, day: 27 });
const date = plainDate.toJSDate();
console.log(date); // 输出：Fri Oct 27 2023 00:00:00 GMT+0800 (中国标准时间)
// 将 Date 对象转换为 Temporal 对象
const date2 = new Date();
const plainDate2 = Temporal.PlainDate.from(date2);
console.log(plainDate2.toString());一些高级用法
Temporal.Calendar: 用于处理不同的日历系统，比如农历。Temporal.Now: 用于获取当前日期和时间。Temporal.round: 用于将日期时间四舍五入到指定的精度。- 自定义解析: Temporal API 支持自定义解析器，允许你从非标准的字符串格式创建 Temporal 对象。
- 算术运算: Temporal.Duration 对象可以进行加减乘除等算术运算，方便进行时间段的计算。
Temporal API 的优势
相比于 Date 对象，Temporal API 具有以下优势：
- 更好的 API 设计: API 更加清晰、一致，易于使用。
- 不可变性: 避免了意外的副作用，提高了代码的可靠性。
- 时区支持: 提供了准确可靠的时区信息，解决了时区处理的难题。
- 国际化: 支持不同的日历系统和本地化格式。
- 类型安全: 使用 TypeScript 等类型检查工具可以更好地利用 Temporal API 的类型信息。
Temporal API 的局限性
虽然 Temporal API 解决了 Date 对象的很多问题，但它也存在一些局限性：
- 还在 Stage 3 阶段: API 可能会发生变化，不建议在生产环境中使用。
- 浏览器兼容性: 目前只有部分浏览器支持 Temporal API，需要使用 polyfill。
- 学习成本: 需要学习新的 API 和概念。
- 体积:Polyfill 可能会增加代码体积。
总结
Temporal API 是 JavaScript 日期时间处理的一次重大革新。它解决了 Date 对象的诸多问题，提供了更加强大、灵活、易用的 API。虽然目前还处于 Stage 3 阶段，但我们有理由相信，它将会成为 JavaScript 中处理日期时间的官方标准。
表格总结：Date vs Temporal
| 特性 | Date 对象 |
Temporal API |
|---|---|---|
| API 设计 | 混乱，不一致，难以使用 | 清晰，一致，易于使用 |
| 可变性 | 可变的 (mutable) | 不可变的 (immutable) |
| 时区处理 | 复杂，容易出错 | 准确，可靠 |
| 国际化 | 支持有限 | 支持多种日历系统和本地化格式 |
| 类型安全 | 缺乏类型信息 | 提供类型信息，可以与 TypeScript 等类型检查工具配合使用 |
| 性能 | 相对较快 | 可能稍慢，但可以通过优化来提高性能 |
| 适用场景 | 简单的时间处理，对精度要求不高 | 需要处理时区、日历、复杂的日期时间计算等场景 |
| 是否标准 | 是标准 | 提案中，尚未成为正式标准 |
| 浏览器支持 | 广泛 | 有限，需要 polyfill |
代码示例：一个简单的日历应用
为了更好地理解 Temporal API 的用法，我们来看一个简单的日历应用示例。这个应用可以显示当前月份的日历，并支持切换月份。
<!DOCTYPE html>
<html>
<head>
<title>Temporal Calendar</title>
<style>
.calendar {
width: 300px;
border: 1px solid #ccc;
}
.header {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: #f0f0f0;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
}
.day {
padding: 5px;
border: 1px solid #eee;
}
.today {
background-color: #ff0;
}
</style>
</head>
<body>
<div id="calendar" class="calendar">
<div class="header">
<button id="prevMonth"><</button>
<span id="monthYear"></span>
<button id="nextMonth">></button>
</div>
<div id="days" class="days"></div>
</div>
<script>
// 获取 DOM 元素
const calendarEl = document.getElementById('calendar');
const monthYearEl = document.getElementById('monthYear');
const daysEl = document.getElementById('days');
const prevMonthBtn = document.getElementById('prevMonth');
const nextMonthBtn = document.getElementById('nextMonth');
// 当前月份
let currentMonth = Temporal.Now.plainDate('iso8601').with({ day: 1 });
// 渲染日历
function renderCalendar(month) {
// 设置月份和年份
monthYearEl.textContent = month.year + '年' + month.month + '月';
// 清空日历
daysEl.innerHTML = '';
// 获取当月第一天是星期几
const firstDayOfWeek = month.dayOfWeek;
// 获取当月有多少天
const daysInMonth = month.daysInMonth;
// 渲染空白单元格
for (let i = 1; i < firstDayOfWeek; i++) {
const dayEl = document.createElement('div');
dayEl.classList.add('day');
daysEl.appendChild(dayEl);
}
// 渲染日期单元格
for (let i = 1; i <= daysInMonth; i++) {
const dayEl = document.createElement('div');
dayEl.classList.add('day');
dayEl.textContent = i;
// 标记今天
const today = Temporal.Now.plainDate('iso8601');
if (month.year === today.year && month.month === today.month && i === today.day) {
dayEl.classList.add('today');
}
daysEl.appendChild(dayEl);
}
}
// 切换到上个月
prevMonthBtn.addEventListener('click', () => {
currentMonth = currentMonth.subtract({ months: 1 });
renderCalendar(currentMonth);
});
// 切换到下个月
nextMonthBtn.addEventListener('click', () => {
currentMonth = currentMonth.add({ months: 1 });
renderCalendar(currentMonth);
});
// 初始化日历
renderCalendar(currentMonth);
</script>
</body>
</html>这个示例展示了如何使用 Temporal API 来处理日期，包括获取月份信息、计算日期、渲染日历等。
总结
Temporal API 是一项令人兴奋的技术，它有望彻底改变 JavaScript 中日期时间处理的方式。虽然目前还处于发展阶段，但我们应该积极关注它，并尝试在项目中应用它。
今天的讲座就到这里，感谢大家的收看！希望大家都能成为时间旅行的高手！