迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

Javascript Temporal 以及其工作原理

作者:迹忆客 最近更新:2022/10/24 浏览次数:

我们之前介绍过 Javascript 日期的许多问题。 好消息是,有计划使用全新的 Javascript 功能来弥补 Date() 的错误。 该功能称为 Temporal。 在本篇文章中,我们将介绍为什么 Temporal 比 Date() 更好,以及如何使用它。


对 Temporal 的支持

还不稳定,没有浏览器或后端 Javascript 实现了时间规范。 如果你今天想试试 Temporal,你可以试试这个 polyfill(在生产环境中谨慎使用)。

JavaScript Temporal的支持


什么是 Temporal?

Temporal 包含一系列对 Javascript 的重大更改,以解决开发人员对 Date() 的所有抱怨。 Temporal 提出了解决大多数存在问题的愿景,包括:

  • 强类型对象或日期、时间、日期/时间、年/月、月/年、分区日期/时间和持续时间。
  • 不可变对象(与当前 Date() 对象的可变性相比)。
  • 标准化日期格式之间的互操作性。
  • 支持所有时区和夏令时的时间安全算法。
  • 符合 ISO8601、RFC3339 和 RFC5545 等主要日期/时间标准。
  • 完全支持非公历。

如果你一直在为 Date 固有的任何问题而苦苦挣扎,那么其中一些变化是非常令人兴奋的。


Temporal 中的新数据类型

Temporal 最令人兴奋的部分之一是我们最终为不同的时间测量提供了不同的类型。 在 Date() 中,所有日期都是下面的时间戳。 通过时间,我们最终获得了一系列不同类型的日期/时间数据。 这些都是:

  • PlainDateTime - 日期和时间组合。
  • PlainDate - 年、月和日。
  • PlainTime - 时间。
  • PlainMonthDay - 月份和日期。
  • PlainYearMonth - 年份和月份。
  • Now - 类似于当前的 new Date() 实现,返回当前时刻。
  • TimeZone - 时区。
  • Calendar - 任何日历扩展
  • ZonedDateTime - 整个日期和时间,带有时区扩展和日历扩展。
  • Instant - PlainDateTime 加上时区偏移量。
  • Duration - 定义持续时间,可以使用年、月、周、天、小时等。

这意味着我们最终可以定义一个日期,并让它表示一个特定的日期,而不是时间戳或日期/时间。 以下是每种时间或日期类型如何符合标准日期/时间字符串的细分:

Javascript Temporal

Temporal 方法

关于如何构建 Temporal 功能的一个很酷的事情是,上面定义的每个类型都有一个关联的构造函数,然后是每个对象的方法。 这意味着我们有诸如 Temporal.PlainDateTemporal.NowTemporal.PlainTimeTemporal.ZonedDateTime 等构造函数。它们中的每一个都有两个常用方法 - .from(),它可以让我们从一组数据中生成日期或时间 , 和 compare(),它可以让我们比较两个日期或时间。

让我们看几个例子。

在 Temporal 中定义日期

假设我们要创建一个日期。 以前,我们必须在 Javascript 中使用 new Date(),即便如此,这也是一个日期/时间。 使用 Temporal,我们可以使用 PlainDate 对象,它只返回日期。 每个构造函数都有两个常用方法:fromcompare,这让我们可以从一组数据中创建日期和时间,并比较两组日期/时间。

如果我们想创建一个 PlainDate,我们可以通过编写以下代码来实现:

let myDate = Temporal.PlainDate.from({
    year: 2022,
    month: 03,
    day: 28,
    hour: 8,
    second: 0,
    minute: 44
});

由于这会返回 PlainDate 类型的数据,它只会返回 2022-03-28,这意味着不再担心时区或 Unix 纪元。

除此之外,我们可以从新的 PlainDate 数据点收集数据:

let myDate = Temporal.PlainDate.from({
    year: 2022,
    month: 03,
    day: 28,
    hour: 8,
    second: 0,
    minute: 44
});

myDate.year; // 2022
myDate.month; // 03
myDate.day; // 28
myDate.inLeapYear; // false
myDate.toString(); // 2022-03-28

获取当前的 Unix 时间戳

仍然有很多时候我们需要获取当前时间戳,但是 Temporal 将此功能与其他有效功能分开,例如仅日期或仅时区构造函数。 这里有些例子:

let currentTime = Temporal.Now.instant(); // 当前 unix 时间戳

使用 Temporal 获取时间

有时我们只想获取时间,而不是用日期污染该信息。 我们可以使用 PlainTime 类型来获取该数据。 关于 Temporal 的另一个很酷的事情是它精确到纳秒,而目前在 Javascript 中,我们只有毫秒。

下面的代码将返回 08:44:00.068123434。 就像我们之前的例子一样,我们可以使用 from 创建我们的 PlainTime,然后使用各种方法从该函数的后面获取数据:

let myDate = Temporal.PlainTime.from({
    hour: 8,
    second: 0,
    minute: 44,
    millisecond: 45,
    microsecond: 123,
    nanosecond: 434
});

myDate.hour; // 8
myDate.second; // 0
myDate.minute; // 44
myDate.millisecond; // 45
myDate.microsecond; // 123
myDate.nanosecond; // 434
myDate.toString(); // 08:44:00.068123434

比较两个日期与时间

使用 Date() 比较日期可能非常困难,因为我们经常使用 Unix 时间戳。 对于时间,由于我们有日期类型,我们可以使用 compare() 方法轻松比较两个日期。 应该注意的是,所有 Temporal 对象都包含一个名为 compare() 的方法,因此比较许多不同的日期和时间也很容易。 这是一个比较两个日期的示例:

let now = Temporal.Now.instant();
let checkDate = Temporal.PlainDate.from({
    year: 2022,
    month: 03,
    day: 28
});

// 当是 2022-03-28 时返回 true 
Temporal.PlainDate.compare(now, checkDate);

创建常规分区日期时间

这是我们在使用 Date() 时所习惯的,我们也可以轻松地在 Temporal 中创建带有时区的完整日期/时间。 同样的原则也适用——我们可以使用 .from() 来创建它,我们也可以访问许多属性。 我们还可以使用 compare() 将其与其他日期和时间进行比较:

let myDate = Temporal.PlainDate.from({
    timeZone: 'Europe/Belfast',
    year: 2022,
    month: 03,
    day: 28,
    hour: 8,
    second: 0,
    minute: 44,
    millisecond: 45,
    microsecond: 123,
    nanosecond: 434
});

myDate.year; // 2022
myDate.month; // 03
myDate.day; // 28
myDate.hour; // 8
myDate.second; // 0
myDate.minute; // 44
myDate.millisecond; // 45
myDate.microsecond; // 123
myDate.nanosecond; // 434

myDate.toString(); // 2022-03-28T08:44:00.068123434-00:00[Europe/Belfast]

**

总结

Temporal 增加了更多的内容。 从上面的示例中,很容易看出 Temporal 为 Javascript 带来的价值主张,以及为什么它对日期/时间相关功能如此令人兴奋。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便