随着互联网的发展，时间的表达方式也在不断地更新和创新。其中，“4分钟前”这种相对时间格式被越来越多的网站和App采用。本文旨在探讨如何在前端中使用JavaScript实现时间的格式化，以达到类似于堆栈交换站点的“4分钟前”效果。
一、获取当前时间戳
要实现时间的格式化，首先需要获取当前的时间戳。JavaScript提供了Date.now()方法可以快速获取当前时间的毫秒数，如下所示：
const now = Date.now();
二、将时间戳转换为日期对象
获取到时间戳之后，接下来需要将其转换为日期对象，以便对其进行进一步处理。JavaScript中可以使用new Date()方法将时间戳转换为日期对象，示例如下：
const now = Date.now(); const dateObj = new Date(now);
三、格式化日期对象
得到日期对象之后，就可以对它进行格式化了。常见的时间格式包括年月日时分秒、年月日、时分秒等等。本文以“4分钟前”的格式为例，演示如何实现相对时间的格式化。
-- -------------------- ---- -------
-------- ---------------- -
----- --- - -----------
----- ---- - ---- - ----- - -----
-- ----- - --- -
------ -----
- ---- -- ----- - ----- -
------ --------------- - --- - ------
- ---- -- ----- - ------ -
------ --------------- - ----- - ------
- ---- -
-- ------------
-
-上述代码中，diff代表当前时间与目标时间的时间差。如果时间差小于60秒，则返回“刚刚”；如果时间差小于3600秒，则返回“n分钟前”；如果时间差小于86400秒，则返回“n小时前”；否则，使用具体的日期格式进行格式化。
四、演示代码
下面是一个完整的实现相对时间格式化的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
-------
------
---- ----------------
--------
-------- ---------------- -
----- --- - -----------
----- ---- - ---- - ----- - -----
-- ----- - --- -
------ -----
- ---- -- ----- - ----- -
------ --------------- - --- - ------
- ---- -- ----- - ------ -
------ --------------- - ----- - ------
- ---- -
-- ------------
-
-
-------------- -- -
----- ------ - --------------------------------
----- ---- - --- -------
---------------- - -----------------
-- ------
---------
-------
-------五、总结
本文介绍了如何在前端中使用JavaScript实现时间的格式化，以达到类似于堆栈交换站点的“4分钟前”效果。通过获取当前时间戳、将时间戳转换为日期对象、格式化日期对象等步骤，可以轻松地实现各种时间格式的处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9788
