在 JavaScript 中，获取日期之间的相对时间戳差异并显示相应的格式化字符串，是 Web 应用程序中经常遇到的需求。相对时间戳指的是某个时刻与当前时间之间的时间差值，通常可以用来表示文章发布时间、评论时间等等，以便更好地展示给用户。本文将介绍如何使用 JavaScript 获取日期之间的相对时间戳差值，以及如何根据差值生成对应的格式化字符串。
一、使用 Date 对象获取时间戳
在 JavaScript 中，Date 对象提供了很多方法来获取时间戳。其中最常用的是 getTime() 方法，它返回距 1970 年 1 月 1 日 00:00:00 UTC 的毫秒数，即 Unix 时间戳。以下是一个示例：
const date1 = new Date();
const date2 = new Date('2020-07-01T10:00:00');
const timestamp1 = date1.getTime();
const timestamp2 = date2.getTime();
const diff = timestamp1 - timestamp2;
上面的代码中，我们定义了两个 Date 对象 date1 和 date2，分别代表当前时间和 2020 年 7 月 1 日 10:00:00 的时间。然后使用 getTime() 方法获取了它们的时间戳，并计算了它们之间的差值 diff。此时，diff 的值就是两个时间之间的相对时间戳差值，以毫秒为单位。接下来我们将介绍如何将其转换成可读的格式化字符串。
二、将时间戳转换为对应的格式化字符串
在将时间戳转换为格式化字符串之前，我们需要先确定目标格式。常用的格式包括：相对时间（如 1 小时前、3 天前等）、日期时间（如 2020/07/01 10:00:00）等等。下面将依次介绍如何实现这些格式的转换。
1. 相对时间格式
相对时间格式指的是距离当前时间的相对时间长度，如 1 分钟前、3 天前等。为了方便实现，我们可以先定义一个数组，其中每个元素表示一个时间段的值和对应的单位，如下所示：
const intervals = [
{ label: '年', value: 1000 * 60 * 60 * 24 * 365 },
{ label: '个月', value: 1000 * 60 * 60 * 24 * 365 / 12 },
{ label: '天', value: 1000 * 60 * 60 * 24 },
{ label: '小时', value: 1000 * 60 * 60 },
{ label: '分钟', value: 1000 * 60 },
{ label: '秒', value: 1000 },
{ label: '毫秒', value: 1 },
];
然后我们可以编写一个函数，将时间戳转换为相对时间格式的字符串，如下所示：
function formatRelativeTime(timestamp) {
const milliseconds = Date.now() - timestamp;
const interval = intervals.find(i => i.value < milliseconds);
const count = Math.floor(milliseconds / interval.value);
return `${count} ${interval.label}${count !== 1 ? 's' : ''} 前`;
}
上面的代码中，我们使用 Date.now() 获取当前时间戳，然后计算出传入时间戳和当前时间戳之间的毫秒数 milliseconds。接着使用 Array.prototype.find() 方法，在 intervals 数组中找到一个最接近毫秒数的对象 interval。最后将毫秒数除以 interval 的值，得到时间段的数量 count，并返回一个格式化后的字符串。
2. 日期时间格式
日期时间格式指的是精确到年月日时分秒的时间字符串，如 2020/07/01 10:00:00。为了实现日期时间格式的转换，我们需要先定义一个用于格式化数字的函数，如下所示：
function formatNumber(n) {
return n < 10 ? `0${n}` : n.toString();
}
上面的代码中，我们定义了一个 formatNumber() 函数，接收一个数字参数 n，如果 n 小于 10，则在前面加上 0 后返回字符串，否则直接返回 n 的字符串形式。
接下来我们可以编写一个函数，将时间戳转换为日期时间格式的字符串，如下所示：
function formatDateTime(timestamp) {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = formatNumber(date.getMonth() + 1);
const day = formatNumber(date.getDate());
const hour = formatNumber(date.getHours());
const minute = formatNumber(date.getMinutes());
const second = formatNumber(date.getSeconds());
return `${year}/${month}/${day} ${hour}:${minute}:${second}`;
}
上面的代码中，我们首先使用 Date 对象对传入的时间戳进行实例化，并分别使用 Date.prototype 的年月日时分秒等方法获取对应的值。然后使用 formatNumber() 函数将这些值格式化为两位数字，最后将它们拼接起来返回一个完整的日期时间字符串。
三、结合实际场景使用相对时间戳
在实际应用中，我们经常需要将相对时间戳转换为相应的格式化字符串，并将它们展示给用户。以下是一些常见场景的示例：
1. 显示文章发布时间
对于博客、新闻等类型的网站，我们通常需要在文章列表和文章详情页面中显示文章的发布时间。一般来说，我们会使用相对时间戳格式（如 1 小时前、3 天前等）来表示，以便更好地展示给用户。以下是一个示例：
const timestamp = 1593588800000; // 2020-07-02 00:00:00
const formattedTime = formatRelativeTime(timestamp);
console.log(formattedTime); // "2 天前"
上面的代码中，我们定义了一个 timestamp 变量，它代表了 2020 年 7 月 2 日 00:00:00 的时间戳。然后使用 formatRelativeTime() 函数将其转换成相对时间格式，最终打印出了结果。
2. 显示用户在线状态
对于聊天、社交等类型的网站，我们通常需要显示用户的在线状态，以便其他用户知道该用户是否在线。一般来说，我们会使用相对时间戳格式来判断该用户是否在线，如下所示：
const lastActiveTime = 1593688111000; // 上次活跃时间戳
const now = Date.now(); // 当前时间戳
const isOnline = now - lastActiveTime <= 30000; // 在线判断条件：30 秒以内未活跃
上面的代码中，我们定义了一个 lastActiveTime 变量，它是上次活跃的时间戳，一般是从后台获取的。然后使用 Date.now() 获取当前时间戳，计算出它们之间的差值，判断差值是否小于等于 30 秒，即可得到该用户是否在线的状态 isOnline。
四、总结
本文介绍了如何在 JavaScript 中获取日期之间的相对时间戳差异，并根据差异生成相应的格式化字符串。我们首先使用 Date 对象的 getTime() 方法获取时间戳，并计算出它们之间的差值。然后我们介绍了如何将时间戳转换为相对时间格式和日期时间格式的字符串，分别使用了 formatRelativeTime() 和 formatDateTime() 函数实现。最后我们结合实际场景，给出了在显示文章发布时间和用户在线状态时如何使用相对时间戳的示例。如果您想了解更多 JavaScript 的日期处理技巧，请阅读相关资料。