使用date-fns的formatDistance格式化时间差输出不符合预期如何解决

问题原因 #

你遇到的问题是date-fns的formatDistance方法入参顺序传反了。
该方法的语法为 formatDistance(targetDate, baseDate, options)，返回的是目标时间相对于基准时间的间隔描述：

• 当targetDate早于baseDate时，返回带ago后缀的过去式描述
• 当targetDate晚于baseDate时，返回带in前缀的未来式描述

你的代码中把当前时间Date.now()（晚于创建时间）作为第一个参数，服务端返回的历史创建时间作为第二个参数，相当于计算「当前时间到过去时间的间隔」，自然会输出in about X hours这类未来式结果。

修正方案 #

调换两个时间参数的位置，同时补充空值判断避免异常：

import { formatDistance} from 'date-fns';

const timestamp = createdAt ? new Date(createdAt) : null;
if (timestamp) {
  // 第一个参数为历史创建时间，第二个参数为基准当前时间
  console.log(formatDistance(timestamp, Date.now(), {addSuffix: true}));
}

修正后即可输出3 hours ago这类符合预期的结果。

其他适用的前端日期处理库 #

• Day.js：体积仅2KB左右，API与停止维护的Moment.js完全兼容，支持插件扩展和国际化，是轻量业务场景的首选
• Luxon：由Moment.js官方团队开发的新一代日期库，原生支持时区、国际化处理，API设计更现代，体积远小于Moment.js
• fecha：超轻量级日期处理库，压缩后仅1KB，仅保留核心的格式化、解析能力，适合对体积要求极高的简单场景
• Moment.js：功能最成熟全面的日期处理库，不过目前已停止维护、体积较大，不推荐新项目使用

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