React应用中如何将时间戳转为HH:mm格式的相对时长？

你可以通过计算时间差并格式化的方式实现需求，以下是两种基于date-fns或原生JS的可行方案：

方案一：原生计算+格式化 #

无需额外依赖date-fns的复杂函数，直接通过时间戳计算并格式化：

export const formatTimeToNow = (timestamp: number) => {
  // 转换秒级时间戳为Date对象
  const postTime = new Date(timestamp * 1000);
  const now = new Date();
  
  // 计算时间差（秒）
  const diffSeconds = Math.floor((now.getTime() - postTime.getTime()) / 1000);
  
  // 拆分小时和分钟
  const hours = Math.floor(diffSeconds / 3600);
  const minutes = Math.floor((diffSeconds % 3600) / 60);
  
  // 格式化两位数字，不足补0
  const formattedHours = hours.toString().padStart(2, '0');
  const formattedMinutes = minutes.toString().padStart(2, '0');
  
  return `${formattedHours}:${formattedMinutes}`;
};

方案二：借助date-fns的intervalToDuration #

利用date-fns的intervalToDuration获取结构化时长数据，再处理成目标格式：

import { intervalToDuration } from 'date-fns';

export const formatTimeToNow = (timestamp: number) => {
  const postTime = new Date(timestamp * 1000);
  const duration = intervalToDuration({ start: postTime, end: new Date() });
  
  // 计算总小时数（包含天数转换的小时）
  const totalHours = (duration.days || 0) * 24 + (duration.hours || 0);
  const minutes = duration.minutes || 0;
  
  const formattedHours = totalHours.toString().padStart(2, '0');
  const formattedMinutes = minutes.toString().padStart(2, '0');
  
  return `${formattedHours}:${formattedMinutes}`;
};

两种方案都能输出HH:mm格式的时间差，比如10:04、09:38这类结果。如果时间差不会超过24小时，方案一足够简洁；如果需要将天数转换为小时累计显示，方案二更适配。

内容的提问来源于stack exchange，提问作者meez