第一步:了解界面布局
打开工具页面后,首先熟悉整体界面布局。页面上方标注了「Stage 3 Proposal」和四个核心特性(不可变对象、时区感知、精确计算、类型明确)。中间区域分为三个部分:左侧是实验分类标签区(日期基础、时间操作、时区处理、时间段计算、比较排序、格式化实用),每个分类下有多个预设实验;中间是代码编辑器,显示当前实验的 JavaScript 代码;右侧是执行结果区和控制台输出。页面加载时会自动初始化 Temporal Polyfill。
第二步:运行日期基础实验
点击「日期基础」分类下的「今日与下周」预设,代码编辑器会加载对应的示例代码。代码使用 Temporal.Now.plainDateISO() 获取今天的日期,然后通过 .add({ days: 7 }) 计算下周的日期。点击「运行代码」按钮(或按 Ctrl+Enter),右侧会显示执行结果。接着尝试「获取月份天数」和「判断闰年」预设,了解 daysInMonth 属性和闰年判断的不同方式。
第三步:探索时间操作
切换到「时间操作」分类。运行「当前时间与取整」预设,了解 Temporal.Now.plainDateTimeISO() 获取当前完整日期时间,以及 .round() 方法将时间取整到指定精度。「时间加减运算」预设展示 plainDateTime.add() 和 .subtract() 的用法,支持年、月、周、日、时、分、秒等多种单位。「计算时间间隔」预设展示 .until() 方法计算两个时间点之间的 Duration 差距。修改代码中的参数,观察结果变化。
第四步:体验时区处理
切换到「时区处理」分类。运行「当前时区日期时间」预设,了解如何获取当前时区的 ZonedDateTime,以及如何使用不同 IANA 时区标识符创建日期时间。「纽约到东京时区转换」预设展示了 Temporal 最强大的功能之一——将一个时区的 ZonedDateTime 转换为另一个时区,同时正确处理夏令时。尝试修改时区参数(如 Asia/Shanghai、Europe/London),观察同一时刻在不同时区的表示差异。
第五步:计算时间段
切换到「时间段计算」分类。运行「Duration 单位换算」预设,了解 Duration 对象的创建和 total() 方法——将 { days: 1, hours: 6 } 转换为总小时数(30)。「计算日期差距」预设展示 plainDate.until() 返回两个日期之间的 Duration,以及如何提取其中的天数、月份等分量。修改日期参数,观察 Duration 结果的变化。这些功能在日程管理和时间统计中非常实用。
第六步:比较与格式化
切换到「比较与排序」和「格式化与实用」分类。「日期数组排序」预设展示如何使用 Temporal 对象的内置比较能力对日期数组进行排序。「比较两个日期」预设展示 equals()、since()、until() 等比较方法的用法。「中文格式化输出」预示展示 toLocaleString() 与 Intl.DateTimeFormat 配合的本地化效果。「毫秒时间戳转日期」预设展示 Instant 与时间戳的互转。通过这些预设,全面了解 Temporal 在实际应用中的常用操作。
UD5工具箱