JavaScript 时间戳友好格式化需先归一化为毫秒,再根据时间远近动态生成“刚刚”“2分钟前”等中文提示,兼顾语义清晰与用户体验。

JavaScript 对后端返回的时间戳做友好格式化,核心是把数字时间戳(通常是毫秒或秒级)转成可读的中文日期时间,比如“刚刚”“2分钟前”“今天 14:30”“昨天 09:15”“2024-05-20”等。关键不在于写死格式,而要根据时间远近动态适配,兼顾用户体验和语义清晰。
识别时间戳单位,统一转为毫秒
后端返回的时间戳可能是秒级(10位)或毫秒级(13位),直接 new Date() 会出错。先判断并归一化:
- 若时间戳是数字且
length === 10(字符串)或(数值),大概率是秒级 → 乘以 1000 - 若已是 13 位或 > 1e12,按毫秒处理
- 推荐写法:
const ms = timestamp * 1000 || timestamp;(简洁但需确保传入是数字)或更稳妥:const ms = typeof timestamp === 'number' ? (timestamp
按时间距离分层处理,提升可读性
用户对“多久以前”的感知是分段的:刚发生、今天内、最近几天、更早。逐级判断比固定格式更友好:
- 2 分钟内 → 显示“刚刚”
- 2 分钟 ~ 1 小时 → 显示“X 分钟前”
- 1 小时 ~ 24 小时 → 显示“X 小时前”
- 今天 → 显示“今天 HH:mm”
- 昨天 → 显示“昨天 HH:mm”
- 前天 ~ 6 天内 → 显示“X 天前”(如“3 天前”)
- 7 天以上 → 显示“YYYY-MM-DD HH:mm”或“YYYY-MM-DD”(根据场景精简)
用 Intl.DateTimeFormat 实现本地化格式(推荐)
避免手动拼接年月日时分,用浏览器原生 API 更可靠、支持多语言:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记(深入)”;
- 显示完整时间:
new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }).format(new Date(ms))→ “2024-05-20 14:30” - 只显示日期:
{ year: 'numeric', month: 'short', day: 'numeric' }→ “2024年5月20日” - 兼容性注意:IE 不支持,如需兼容可 fallback 到 moment.js 或自行格式化函数
封装一个实用的 formatTime 工具函数
把上述逻辑整合成可复用函数,支持传入时间戳和选项:
function formatTime(timestamp, options = {}) {
const { relative = true, locale = 'zh-CN' } = options;
const now = Date.now();
const ms = typeof timestamp === 'number'
? (timestamp < 1e12 ? timestamp * 1000 : timestamp)
: Number(timestamp) * 1000;
<p>if (!ms || isNaN(ms)) return '--';</p><p>const diff = now - ms;
const minute = 60 <em> 1000;
const hour = 60 </em> minute;
const day = 24 * hour;</p><p>if (relative && diff < 2 <em> minute) return '刚刚';
if (relative && diff < hour) return <code>${Math.floor(diff / minute)} 分钟前</code>;
if (relative && diff < 2 </em> hour) return <code>${Math.floor(diff / hour)} 小时前</code>;</p><p>const date = new Date(ms);
const today = new Date(now);
const yesterday = new Date(now - day);
const isToday = date.toDateString() === today.toDateString();
const isYesterday = date.toDateString() === yesterday.toDateString();</p><p>if (relative && isToday) return <code>今天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}</code>;
if (relative && isYesterday) return <code>昨天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}</code>;
if (relative && diff < 7 * day) return <code>${Math.floor(diff / day)} 天前</code>;</p><p>return new Intl.DateTimeFormat(locale, {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: false
}).format(date);
}
// 使用示例:formatTime(1716214200) // 后端秒级时间戳</p>不复杂但容易忽略的是时间戳单位和相对时间的边界处理。只要统一毫秒、分层判断、善用 Intl,就能让时间显示既准确又有人味。

















