在前端开发过程中,经常需要将时间格式化为可读性更好的形式。pretty-date
是一个 npm 包,可以将日期格式化成类似于“10 分钟前”或者“1 天前”的简洁易懂的形式。在本文中,我们将介绍该技术的使用方法和示例代码。
安装
在使用前,需要先安装 pretty-date
:
npm install pretty-date
或者使用 yarn
:
yarn add pretty-date
用法
在加载模块后,可以通过 prettyDate.format()
函数将日期格式化。
该函数需要传递一个时间戳或者能被转换为时间戳的字符串作为参数。
下面是一个例子:
const prettyDate = require('pretty-date'); const timestamp = new Date().getTime(); console.log(prettyDate.format(timestamp)); // "刚刚"
在上例中,pretty-date
将获取的时间戳格式化成了“刚刚”这个可读性更好的形式。
同样,可以将能被转换为时间戳的字符串作为参数进行格式化。下面是一个例子:
const prettyDate = require('pretty-date'); const dateString = '2021-07-01T12:30:00.000Z'; console.log(prettyDate.format(dateString)); // "1 天前"
注意,在将字符串传输给 prettyDate.format()
函数之前,需要将其转换为一个 Date 对象。上例中的日期字符串也是如此。
高级用法
pretty-dat
还有一些可选参数,可以更改默认的格式化选项。
默认情况下,当日期小于 60 秒时,将被称为“刚刚”,当日期小于 60 分钟时,将被称为“X 分钟前”,当日期小于 24 小时时,将被称为“X 小时前”,超过 24 小时将被称为“X 天前”。
通过更改可选参数,可以自定义时间的格式化方式。
下面是一个例子:
-- -------------------- ---- ------- ----- ---------- - ----------------------- ----- ---------- - --------------------------- ----------------------------------------- - ---- --- ------- ----- ------ ----- ------ -------- ------ -- ----- ------ ------ ------ ---- ---- ---- -- -- ----
在上面的例子中,我们使用了三个参数:now
、days
和 hours
。
now
表示当前时间。
days
表示三种情况下的日期格式,分别为“天前”、“后天”和“本月”。
hours
表示一个小时内的日期格式。在此例中,小时数被使用,内部使用了模板字符串“{h} 小时前”。
同时,minutes
对象也被修改,其中包含了三种格式:
- 刚刚 (当分钟数低于 1 分钟)
- 1 分钟前 (当分钟数为 1 分钟)
- {num} 分钟前 (增加了一个占位符,用来替换分钟数)
这个参数的拓展性非常高,可以将 days
, hours
, 和 minutes
中的选项更改为你需要的日期格式,使日期格式化满足特定的业务需要。
总结
在本文中,我们介绍了如何使用 pretty-date
npm 包将日期格式化为可读性更高的形式,并给出了使用示例。我们还演示了如何使用选项参数更改默认的格式化选项,帮助您掌握更多灵活性和拓展性以满足具体的业务需求。随着 pretty-date
等库更为普及,日期格式化将变得更加简单和人性化。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedb640b5cbfe1ea06114ee