前言
在开发前端应用程序时，时间处理是一个很常见的问题，有时我们需要根据日期计算时间差、生成时间戳，也有时我们需要将时间格式化为可视字符串，并根据某种规则输出时间偏移量。
npm 包 relative-date-reverse 就提供了一种方便、易用、适合前端的相对时间格式化方法，它可以按照某种约定的时间偏移规则将任意时间点转换为相对时间，通常用于展示文章等的发布时间。
安装
在终端中使用以下命令安装 relative-date-reverse：
npm install relative-date-reverse --save
安装完成之后，在使用时请确保已经在相应的组件中导入：
import { relativeDateReverse } from "relative-date-reverse";
使用示例
假设我们有一个文章发布时间，如下：
const postDate = new Date('2021-09-10T22:21:58');
我们可以使用以下代码来将该时间转换为相对时间：
const relativeDate = relativeDateReverse(postDate); console.log(relativeDate); // 4 天前
上面的代码会将 postDate 转换为至少三个最大单位（分钟、小时、天、月、年）之一的相对时间字符串，也就是将该时间点距离现在的时间差转化为相对时间。
传入选项
relativeDateReverse 方法可以接收一个选项对象，该对象包含以下属性：
| 属性 | 类型 | 描述 |
|---|---|---|
locales |
`string | string[]` |
style |
"long" | "ago" | "event" |
用于在控制输出的风格。 "long" 风格会给出一个具体的日期（例如："January 1, 2000"）， "ago" 风格会输出相对时间（例如："10 years ago"），而 "event" 风格则能够生成一个可定制的日期（例如："Today at 2:30 PM"）。默认情况下，此值为 "ago"。 |
选项的传递方式如下所示：
const date = new Date(); const relativeDate = relativeDateReverse(date, {locales: "zh-CN", style: "long"}); console.log(relativeDate); // 2021年9月10日
根据传入的选项不同，relativeDate 输出结果也会不同。
自定义时间格式
relative-date-reverse 已经默认了一个相对时间偏移量约定规则，如果你想要根据自己的需求来约定相对时间偏移量规则，可以通过自定义选项来实现。例如，我们想要将 "周" 作为最大单位，那么可以这样实现：
-- -------------------- ---- ------- ------ - ------------------- - ---- ------------------------ ----- --------- - --- ----- ------- - --- ----- ------ - -- ----- ------- - --- -- ------- ----- -------- - --- ----- -------- - ----- ----- ----- ---- ---- ---- ----- ----- -------------------------------- - - ------ --- ----- ----- ------ ---------- ----- ------ ------ -------- ----- ------ ------ ------- ----- ----- ------ -------- ----- ----- ------ --------- ----- ----- ------ --------- ----- ----- -- ----- ---- - --- ------- ----- ------------ - ------------------------- - -------------- --------------------------------- ------ -------- --- -------------------------- -- - --展开代码
总结
相比传统的手动计算时间差并格式化时间字符串来说，使用 relative-date-reverse 偏移约定规则的方式会更加方便、灵活，避免了时间格式化过程中的一些小错误，提高了开发效率。
当然，本文仅仅是对 relative-date-reverse 的一个简单介绍，你可以根据自己的需求去进一步了解该模块的其他特性和选项，如我们上述介绍的自定义时间格式等，更多选项和使用方法可以参考该npm包的github官网。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067012e361a36e0bce8dce
