ES2024 Temporal API——JavaScript时间与日期处理的革命性新篇章

Temporal 的由来

《2022 年 JS 现状》调查中,第三个 最常见的答案是"认为 JavaScript 目前缺少什么?" 是日期管理

这导致了Temporal 提案的产生,它提供了一个标准的全局对象来替换该Date对象,并修复了多年来在 JavaScript 中处理日期时给开发人员带来很大痛苦的一些问题。

JavaScript 中处理日期都是很恶心的;

日期的困难导致流行的库如MomentDay.JSdate-fns出现,试图解决这些问题。然而,该TemporalAPI 在本地解决所有问题。

Temporal将支持多个时区和开箱即用的非公历,并将提供一个简单易用的 API,使从字符串解析日期变得更加容易。此外,所有Temporal对象都是不可变的,这将有助于避免任何意外的日期更改错误。

让我们看一下 API 提供的最有用方法的一些示例Temporal

Temporal.Now.Instant()

Temporal.Now.Instant()将返回一个最接近纳秒的 DateTime 对象。您可以使用from如下方法指定特定日期:

js 复制代码
const olympics = Temporal.Instant.from('2024-07-26T20:24:00+01:00');

Temporal.PlainDate

创建一个日期,没有时间:

js 复制代码
new Temporal.PlainDate(2024, 7, 26);

Temporal.PlainDate.from('2024-07-26')

Temporal.PlainTime

作为 的补充PlainDate(),我们可以使用它来创建一个没有日期的时间,使用.PlainTime()

js 复制代码
new Temporal.PlainTime(20, 24, 0);

Temporal.PlainTime.from('20:24:00');

Temporal.PlainMonthDay

同样,还有PlainYearMonth只返回年份和月份(对于表示一年中的整个月份很有用):

js 复制代码
const march = Temporal.PlainYearMonth.from({ month: 3, year: 2024 });

Temporal.Now.plainDateISO()

可以使用 Temporal 对象完成许多计算。可以向日期对象添加和减去各种时间单位:

js 复制代码
const today = Temporal.Now.plainDateISO();

const lastWeek = today.subtract({ days: 7});

const nextWeek = today.add({ days: 7 });

until方法since可让您了解距某个特定日期或自该日期发生以来的时间。例如,以下代码将告诉您距离巴黎奥运会还有多少天:

js 复制代码
olympics.until().days

valentinesDay.since().hours

这些方法返回一个Temporal.Duration对象,该对象可用于测量具有多种不同单位和舍入选项的时间量

附加功能

可以从 Date 对象中提取年、月、日,并从 Time 对象中提取时、分、秒、毫秒、微秒和纳秒(微秒和纳秒在当前 DateTime 对象中不可用)。例如:

js 复制代码
olympics.hour;
<< 20

还有其他属性,例如dayOfWeek(返回1星期一和7星期日)、daysInMonth(返回28, 29,3031取决于月份) 和daysinYear(返回365366取决于闰年)。

Temporal日期对象还有一个compare方法,可用于使用各种排序算法对日期进行排序。

点赞收藏支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。

往期热门精彩推荐

# 关于浏览器调试的30个奇淫技巧

# Next.js 的路由为什么是这样的

# 2024最新程序员接活儿搞钱平台盘点

解锁 JSON.stringify() 5 个鲜为人知的功能

解锁 JSON.stringify() 7 个鲜为人知的坑

如何去实现浏览器多窗口互动

面试相关热门推荐

前端万字面经------基础篇

前端万字面积------进阶篇

简述 pt、rpx、px、em、rem、%、vh、vw的区别

实战开发相关推荐

前端常用的几种加密方法

探索Web Worker在Web开发中的应用

不懂 seo 优化?一篇文章帮你了解如何去做 seo 优化

【实战篇】微信小程序开发指南和优化实践

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM

移动端相关推荐

移动端横竖屏适配与刘海适配

移动端常见问题汇总

聊一聊移动端适配

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

更多精彩详见:个人主页

相关推荐
3345543226 分钟前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test28 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml441 分钟前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事43 分钟前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶43 分钟前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo44 分钟前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
测试19982 小时前
2024软件测试面试热点问题
自动化测试·软件测试·python·测试工具·面试·职场和发展·压力测试