如何在JavaScript/React中将时间戳转换为天数格式

刚好之前做过类似的需求，给你分享两种可行的方案——原生JavaScript实现（轻量无依赖）和用Day.js简化开发（适合已经用了第三方库的项目）。

不需要任何外部依赖，用原生API就能搞定。核心思路是解析ISO时间戳、计算与当前时间的差值，再转换成对应的天数文本：

function formatTimeAgo(timestamp) {
  // 解析传入的ISO时间戳为Date对象
  const targetDate = new Date(timestamp);
  
  // 处理无效时间戳的情况
  if (isNaN(targetDate.getTime())) {
    return "无效时间";
  }

  const now = Date.now();
  const diffMs = now - targetDate.getTime(); // 时间差（毫秒），正数表示过去，负数表示未来
  const days = Math.floor(Math.abs(diffMs) / (1000 * 60 * 60 * 24)); // 转换为天数

  if (diffMs > 0) {
    // 处理过去的时间
    if (days === 0) {
      return "今天";
    } else if (days === 1) {
      return "1天前";
    } else {
      return `${days}天前`;
    }
  } else {
    // 处理未来的时间（可选，根据你的需求决定是否保留）
    if (days === 0) {
      return "今天";
    } else if (days === 1) {
      return "1天后";
    } else {
      return `${days}天后`;
    }
  }
}

在React组件中使用 #

可以封装成一个简单的组件，方便复用：

import React from 'react';

// 先把上面的formatTimeAgo函数引入进来

function TimeAgo({ timestamp }) {
  const timeText = formatTimeAgo(timestamp);
  return <span className="time-ago">{timeText}</span>;
}

// 调用示例
function PostCard() {
  // 假设这是从API获取的时间戳
  const postTime = "2022-01-12T13:05:16Z";
  
  return (
    <div className="post-card">
      <h3>文章标题</h3>
      <p>发布时间：<TimeAgo timestamp={postTime} /></p>
    </div>
  );
}

export default PostCard;

如果你的项目已经引入了Day.js（比Moment.js更轻量），可以用它的relativeTime插件快速实现，代码更简洁：

步骤1：安装依赖 #

npm install dayjs

步骤2：在React中使用 #

import React from 'react';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/zh-cn'; // 可选，引入中文语言包

// 注册插件和设置语言
dayjs.extend(relativeTime);
dayjs.locale('zh-cn');

function TimeAgo({ timestamp }) {
  // fromNow()方法会自动生成相对时间文本，比如"2年前"、"5天前"
  return <span className="time-ago">{dayjs(timestamp).fromNow()}</span>;
}

// 使用示例和上面的组件一样
function PostCard() {
  const postTime = "2022-01-12T13:05:16Z";
  return (
    <div className="post-card">
      <h3>文章标题</h3>
      <p>发布时间：<TimeAgo timestamp={postTime} /></p>
    </div>
  );
}

export default PostCard;

两种方案各有优劣：原生方案适合追求轻量、不想加依赖的场景；Day.js方案适合快速开发，且支持更多复杂的时间格式化需求。

内容的提问来源于stack exchange，提问作者Emmanuel O. Eboh