以秒为单位将时间间隔转换成更易读的形式

在前端开发中,我们有时候需要将时间间隔(例如时间戳)转换成更易读的形式,比如将 600 秒转换成 "10 分钟"。本文将介绍如何实现这个功能。

实现思路

要将时间间隔转换成易读的形式,我们需要确定两个因素:时间间隔的单位和显示的格式。常见的时间单位包括秒、分钟、小时、天、周等;常见的格式包括 X 分钟前X 小时前X 天前 等等。

对于单位的选择,我们可以使用下面的规则:

  • 如果时间小于 60 秒,使用秒作为单位;
  • 如果时间小于 60 分钟,使用分钟作为单位;
  • 如果时间小于 24 小时,使用小时作为单位;
  • 如果时间小于 7 天,使用天作为单位;
  • 否则,使用周作为单位。

对于格式的选择,我们可以使用下面的规则:

  • 如果时间间隔在 1 分钟以内,显示 "刚刚";
  • 如果时间间隔在 1 小时以内,显示 "X 分钟前"
  • 如果时间间隔在 1 天以内,显示 "X 小时前"
  • 如果时间间隔在 7 天以内,显示 "X 天前"
  • 否则,显示 "X 周前"

实现代码

基于上面的思路,我们可以编写以下 JavaScript 代码:

-------- -------------------- -
  ----- ---------- - ---
  ----- -------- - -- - -----------
  ----- ------- - -- - ---------
  ----- -------- - - - --------

  --- ----- ------
  -- ----- - ----------- -
    ---- - ----
    ----- - -----
  - ---- -- ----- - --------- -
    ---- - -----
    ----- - --------------- - ------------
  - ---- -- ----- - -------- -
    ---- - -----
    ----- - --------------- - ----------
  - ---- -- ----- - --------- -
    ---- - ----
    ----- - --------------- - ---------
  - ---- -
    ---- - ----
    ----- - --------------- - ----------
  -

  -- ------ --- -- -
    ------ -----
  - ---- -- ------ - --- -
    ------ --------- ----------
  - ---- -
    ----- ---- - --- --------------- - ---- - ------
    ----- ---- - -------------------
    ----- ----- - ----------------------- - ---
    ----- --- - ------------------------
    ------ --------------------------
  -
-

-------- ---------- -
  ------ - - -- - ------- - --
-

上面的代码定义了一个 formatDuration 函数,它接受一个时间间隔(单位为秒)作为参数,返回一个易读的字符串。如果时间间隔小于 1 分钟,返回 "刚刚";否则,根据时间间隔的大小选择合适的单位和格式。

使用示例

我们可以使用下面的代码来测试上面的 formatDuration 函数:

--------------------------------           -- --- ---
--------------------------------           -- -- ----
----------------------------------         -- -- ----
-----------------------------------        -- -- ---
-------------------------------- - ----    -- -- ---
-------------------------------- - -----   -- ------------

在上面的示例中,我们分别使用了不同大小的时间间隔来调用 formatDuration 函数,并打印了函数的返回值。我们可以看到,对于不同大小的时间间隔,函数都返回了相应的易读字符串。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/14235