JavaScript实现字符串时间转换为相对时间格式

作者：开源拾贝时间：2026-10-23 09:31:44浏览：462

本文介绍如何在JavaScript中将后台返回的字符串格式时间（如2015-07-30 09:36:10）转换为相对时间显示，例如几秒前、几分钟前或几天前。通过解析字符串为时间戳并与当前时间对比，实现动态显示效果，适用于社交动态、新闻列表等场景。

时间转换需求与背景

在项目开发过程中，经常需要将后端返回的标准时间字符串（例如格式为2015-07-30 09:36:10）转换为更具亲和力的相对时间描述，如“几秒前”、“几分钟前”或“几天前”。这需要通过对比当前系统时间与返回的时间数据来实现。

字符串转时间戳处理

首先，由于后端返回的是字符串类型的时间，必须将其转换为时间戳格式，以便进行数值比较。


//字符串转换为时间戳
function getDateTimeStamp (dateStr) {
  return Date.parse(dateStr.replace(/-/gi,"/"));
}

相对时间计算逻辑

接下来，将转换后的时间戳与当前系统时间戳进行差值计算，根据时间间隔的大小，将其格式化为几秒前、几分钟前、几小时前或几天前等相对时间形式。


function getDateDiff (dateStr) {
  var publishTime = getDateTimeStamp(dateStr)/1000,
    d_seconds,
    d_minutes,
    d_hours,
    d_days,
    timeNow = parseInt(new Date().getTime()/1000),
    d,
    date = new Date(publishTime*1000),
    Y = date.getFullYear(),
    M = date.getMonth() + 1,
    D = date.getDate(),
    H = date.getHours(),
    m = date.getMinutes(),
    s = date.getSeconds();
    //小于10的在前面补0
    if (M < 10) {
      M = '0' + M;
    }
    if (D < 10) {
      D = '0' + D;
    }
    if (H < 10) {
      H = '0' + H;
    }
    if (m < 10) {
      m = '0' + m;
    }
    if (s < 10) {
      s = '0' + s;
    }
  d = timeNow - publishTime;
  d_days = parseInt(d/86400);
  d_hours = parseInt(d/3600);
  d_minutes = parseInt(d/60);
  d_seconds = parseInt(d);
  if(d_days > 0 && d_days < 3){
    return d_days + '天前';
  }else if(d_days <= 0 && d_hours > 0){
    return d_hours + '小时前';
  }else if(d_hours <= 0 && d_minutes > 0){
    return d_minutes + '分钟前';
  }else if (d_seconds < 60) {
    if (d_seconds <= 0) {
      return '刚刚发表';
    }else {
      return d_seconds + '秒前';
    }
  }else if (d_days >= 3 && d_days < 30){
    return M + '-' + D + '&nbsp;' + H + ':' + m;
  }else if (d_days >= 30) {
    return Y + '-' + M + '-' + D + '&nbsp;' + H + ':' + m;
  }
}

函数使用示例

具体使用方式如下：

参数dateStr代表从后端获取的时间字符串，其标准格式示例为2015-07-30 09:36:10。


// 转换后的结果 
var str = getDateDiff(dateStr);
// 在控制台输出结果 
console.log(str);

总结

上述内容介绍了利用JavaScript将字符串格式的时间转换为相对时间显示的方法，希望能为读者提供帮助。如有任何疑问，欢迎留言交流，我们将及时回复。感谢对本站的支持！若觉得本文对您有帮助，欢迎转载，请注明出处，谢谢！

作者最新文章

JS 怎么使用 pako.js 解压 gzip 数据流

2026-11-05 15:54:33

零基础先学JavaScript还是Python？对比学习难度与上手曲线

2026-11-05 14:47:40

JS代码反混淆：主流在线工具与本地软件推荐

2026-11-04 19:28:41

浏览器控制台查看格式化JSON有哪些实用技巧

2026-11-04 16:56:53

JS控制台打印基础：console.log语法与多参数用法

2026-11-04 09:23:11