如何格式化过去的日期?
在前端开发中,经常会遇到需要将过去的日期转换成易读的形式,比如"刚刚"、“几分钟前”、"几小时前"等。为了方便处理这种情况,我们可以使用一个自定义的JavaScript方法来实现日期的格式化。
方法介绍
下面是这个格式化过去日期的方法:
const formatPast = (date, type = "default", zeroFillFlag = true) => {
// 获取当前时间和传入时间之间的时间差
const currentTime = new Date().getTime();
const afferentTime = new Date(date).getTime();
const timeDifference = currentTime - afferentTime;
// 根据时间差的不同范围返回不同的字符串表示
switch (true) {
case timeDifference < 10000:
return "刚刚";
case timeDifference < 60000:
return `${
Math.floor(timeDifference / 1000)}秒前`;
case timeDifference < 3600000:
return `${
Math.floor(timeDifference / 60000)}分钟前`;
case timeDifference < 86400000:
return `${
Math.floor(timeDifference / 3600000)}小时前`;
case timeDifference >= 86400000 && type === "default":
let countTime = Math.floor(timeDifference / 86400000);
if (countTime >= 365) {
return `${
Math.floor(countTime / 365)}年前`;
}
if (countTime >= 30) {
return `${
Math.floor(countTime / 30)}个月前`;
}
return `${
countTime}天前`;
default:
// 如果时间差超过一天,返回具体的日期表示
const formattedDate = new Date(date);
const Y = formattedDate.getFullYear();
const M = formattedDate.getMonth() + 1;
const D = formattedDate.getDate();
const zeroFillM = zeroFillFlag ? M.toString().padStart(2, "0") : M;
const zeroFillD = zeroFillFlag ? D.toString().padStart(2, "0") : D;
if (type === "-" || type === "/" || type === ".") {
return `${
Y}${
type}${
zeroFillM}${
type}${
zeroFillD}`;
}
if (type === "年月日") {
return `${
Y}年${
zeroFillM}月${
zeroFillD}日`;
}
if (type === "月日") {
return `${
zeroFillM}月${
zeroFillD}日`;
}
if (type === "年") {
return `${
Y}年`;
}
}
};
使用示例
const date1 = "2024-02-15T09:30:00"; // 过去的日期
const date2 = "2024-02-28T15:45:00"; // 过去的日期
console.log(formatPast(date1)); // 输出:15天前
console.log(formatPast(date2, "年月日")); // 输出:2024年02月28日
在上述示例中,我们传入了不同的过去日期,并使用不同的格式类型进行格式化。你可以根据自己的需要选择合适的格式类型。
结语
这个自定义的JavaScript方法可以帮助我们方便地将过去的日期格式化成易读的形式。通过灵活使用不同的格式类型,我们可以根据需求展示出符合用户期望的日期表示。