无需登录 数据私有 本地保存

Temporal API 演练场 - 现代日期时间处理实验

16
0
0
0
Temporal API 是什么?与 Date 有什么不同?
Temporal 是 ECMAScript 的 Stage 3 提案,旨在取代有缺陷的 Date 对象。核心优势包括:不可变性——所有操作返回新对象,无副作用;类型明确——PlainDate(纯日期)、PlainTime(纯时间)、ZonedDateTime(带时区)等类型各司其职;时区安全——原生支持 IANA 时区数据库,自动处理夏令时;纳秒精度——远超 Date 的毫秒精度;直观 API——.add()、.subtract()、.since() 等语义化方法。本演练场内置了 Temporal polyfill,让你可以直接在当前浏览器中体验这些特性。
Temporal 目前可以在生产环境使用吗?
截至 2025 年,Temporal 仍处于 Stage 3,尚未被所有浏览器原生支持。但你可以通过 @js-temporal/polyfill 在生产环境中使用。该 polyfill 体积约 50KB(gzip),API 与规范保持一致,当浏览器原生支持时会自动使用原生实现。本演练场已自动加载该 polyfill,你可以在工具中直接运行 Temporal 代码,体验完整的 API 功能。
如何从 Date 迁移到 Temporal?
主要的迁移映射:new Date() 改为 Temporal.Now.plainDateTimeISO();Date.now() 改为 Temporal.Now.instant().epochMilliseconds;date.getFullYear() 改为 plainDate.year;date.setDate(date.getDate()+7) 改为 plainDate.add({days:7});date1 - date2 改为 date1.since(date2).days。迁移核心是拥抱不可变模式和明确的类型系统。建议先在项目中引入 polyfill,逐步替换 Date 代码,而不是一次性大规模迁移。
PlainDate 和 ZonedDateTime 有什么区别?
PlainDate 仅包含日期(年、月、日),不包含时间和时区信息,适合生日、节假日等场景。ZonedDateTime 包含日期、时间和时区的完整表示,能正确处理夏令时转换,适合会议安排、航班时间等场景。选择原则:如果事件的具体时刻在全球范围内有意义(如视频会议、航班起飞),使用 ZonedDateTime;如果只关心日历日期(如生日、纪念日),使用 PlainDate。在本工具的「日期基础」和「时区处理」实验中分别展示了两种类型的用法。
Duration 的 total() 方法有什么用?
duration.total({unit:'hours'}) 将时间段转换为指定单位的浮点数总和。例如 {days:1, hours:6} 使用 .total({unit:'hours'}) 返回 30。这在需要计算总时长、做数值比较或生成图表数据时非常有用。注意需要提供参考日期来处理可变长度单位(如月份,因为不同月份的天数不同)。在本工具的「时间段计算」实验中可以体验 total() 的实际效果。
Temporal 如何处理夏令时?
ZonedDateTime 使用 IANA 时区数据库,自动处理夏令时。例如在 America/New_York 时区添加 1 天会正确处理 DST 转换日(3 月第二个周日和 11 月第一个周日)。PlainDateTime 则不处理 DST,适合不需要时区语义的场景。这是 Temporal 相比 Date 的重大改进之一——Date 对象完全没有时区概念,所有操作都基于 UTC 偏移。在本工具的「时区处理」实验中可以对比不同时间区的行为差异。
Temporal 的精度能达到什么级别?
Temporal 支持从纳秒到年的完整范围。Instant 类型可以表示约 27 万年的时间范围,精度为纳秒。这在科学计算、金融交易、分布式系统等需要高精度时间的场景中非常关键。对比 Date 仅支持毫秒精度且范围有限。不过在实际 Web 开发中,毫秒精度通常已经足够,纳秒精度更多用于后端和系统级应用。
可以在 Node.js 中使用 Temporal 吗?
可以!安装 npm install @js-temporal/polyfill,然后在代码中 import { Temporal } from '@js-temporal/polyfill' 即可使用。Node.js 18+ 已内置部分实验性支持(需 --experimental-temporal 标志),但推荐使用 polyfill 以获得完整稳定的 API。未来 Node.js 将原生支持 Temporal。在 Node.js 中使用 Temporal 的方式与浏览器中完全一致,polyfill 会自动适配运行环境。
最新

Alexa Skill 意图模型验证器 - 检查 JSON 语法

粘贴 Alexa 技能交互模型 JSON,验证格式并检查常见错误。

视图过渡动画演示 - View Transitions API

在多页面或元素切换时呈现流畅的交叉淡入淡出和变形动画,体验原生视图过渡。

最新

Web Worker 线程池演示 - 多任务并行处理

创建多个 Worker 同时执行计算任务,对比串行与并行的效率。

HTTP 状态码互动参考表 - 含场景与原因短语

按类型筛选状态码,点击查看详细描述与常见使用场景,开发调试速查手册。

JavaScript事件循环可视化 - 任务队列动画

动画展示调用栈、宏任务和微任务的执行顺序,帮助理解JS异步机制。

JSON Schema 示例生成器 - 根据定义产出示例数据

提供JSON Schema定义,自动生成符合约束的示例JSON数据,用于接口文档说明。

GraphQL Schema 关系图浏览器 - 类型图谱展示

输入 GraphQL Schema SDL,生成交互式的关系图谱,展示类型、字段及关联。

网页元数据查看器 - Open Graph/Twitter Card

输入网址,抓取并展示该页面的标题、描述、OG标签和Twitter Card信息。

高级占位图生成器 - 渐变/几何/文字组合

生成漂亮几何图案或文字占位图,指定尺寸,下载用于原型。

结构化数据 (JSON-LD) 验证器 - Schema.org 类型检测

粘贴JSON-LD,校验其是否符合Schema.org语法并预览可能触发的丰富结果类型。

JSON 数据表格生成器 - 自动列与样式

粘贴 JSON 数组,自动生成带搜索、排序和分页功能的数据表格组件。

最新

原型链浏览器 - 查看对象继承关系

输入一个对象构造器名称,以树状图显示其原型链,帮助理解 JS 继承机制。

占位图构建器 - 指定宽高文字自动生成

输入宽高、背景色和文字,生成对应尺寸的占位图片,适用于原型设计和文档填充。

CSS Grid交互演示 - 网格布局可视化学习

通过控件调整网格轨道、间距和对齐,实时展示效果及对应CSS代码,轻松掌握Grid。

热门

工作任务分解结构(WBS)图 - 在线绘制并导出

拖拽创建树形工作分解结构,清晰展示项目交付物与任务包,支持导出PNG/SVG,项目规划利器。

最新

API Blueprint 预览器 - 在线渲染 API 文档

编写 API Blueprint 标记,实时预览生成的 HTML 文档,方便 API 设计。

最新

GraphQL 查询成本计算器 - 估算字段解析复杂度

粘贴 GraphQL 查询和 Schema(或模拟类型权重),计算请求的代价分,辅助限流策略。

CSS @scope 规则演示 - 作用域样式隔离

演示新的 CSS @scope 规则如何限定样式作用范围,对比传统 BEM 和 CSS Modules。

热门

书脊设计预览 - 输入文字看效果

设定书脊宽度,排版书名和出版社文字,模拟书脊在书架上的外观。

几何图案生成器 - 交互式重复纹理SVG

选择基本形状(六边形、菱形等)和配色,无缝拼接生成SVG几何背景图案。

简单经期记录 - 日期预测本地存储

记录月经开始日,根据周期长度预测下次日期,数据仅存本地。

视频缩略图提取器 - 任意时间点截图

加载本地视频,拖动时间轴选取帧,捕获该帧为PNG图片下载。

三分法构图覆盖 - 上传图片加九宫格参考线

为上传的照片添加可调节的三分线、斐波那契螺旋等构图辅助线。

CSS图案背景构建器 - 纯CSS重复花纹

编写或配置基础的CSS渐变、径向、锥形图案组合,生成美观的无缝重复背景代码。

空状态插画生成器 - 无数据占位符

为应用的空白页(如无订单、无消息)生成带插画和文案的HTML/CSS占位组件。

布局蓝图生成器 - 线框容器配置

选择页眉、侧边栏、主体、页脚的网格布局,生成基本的布局骨架代码。

响应式表格生成器 - 移动端堆叠表格

将HTML表格转换为移动端友好的折叠行显示模式,并生成相应CSS。

CSS Subgrid 布局构建器 - 对齐嵌套网格轨道

拖拽设计包含 Subgrid 的嵌套网格,直观展示子网格如何继承父网格轨道并进行独立调整,生成代码。

网页整页截图生成器 - html2canvas当前页面捕获

使用html2canvas截取当前网页的完整内容(需粘贴HTML或演示),生成长图并下载。

待办事项清单 - 在线Todo任务管理(LocalStorage)

简洁的待办事项管理工具,支持添加、完成、删除任务,数据保存在浏览器本地存储中,刷新不丢失。