HTML中如何使用Intl.RelativeTimeFormat显示相对时间-html教程-PHP中文网

intl.relativetimeformat 是浏览器原生相对时间格式化 api，需指定 locale（如 'zh-cn'）和 options（numeric: 'auto' 才支持“昨天”），单位必须为合法单数字符串（如 'day'），不支持毫秒；date 需手动转为数值差；safari 12 及以下不支持 numeric: 'auto'，ssr 环境需 node.js 14+ 且启用 icu。

html中如何使用intl.relativetimeformat显示相对时间

Intl.RelativeTimeFormat 基础用法与初始化要点

Intl.RelativeTimeFormat 是浏览器原生支持的相对时间格式化 API，不需要额外引入库。它能将“-1 day”、“2 hours”这类数值 + 单位的组合，转成本地化字符串（如 “昨天”、“2小时前”）。关键在于：必须传入 locale 和 options，否则可能返回英文或报错。

初始化时至少指定 locale（如 'zh-CN'），否则在某些旧版 Safari 中 fallback 为 'en-US'，且不报错，容易误判
style 可选 'long'（“3天前”）、'short'（“3天前” → “3天前” 在中文里表现一致，但英文下是 “3 days ago” vs “3 days ago”；实际差异更明显于 'narrow'，如 “3d ago”）
numeric 设为 'auto' 才能触发“昨天”“明天”这类词，设为 'always' 则永远输出数字形式（如 “1 day ago”）

const rtf = new Intl.RelativeTimeFormat('zh-CN', {
  style: 'long',
  numeric: 'auto'
});
rtf.format(-1, 'day'); // → "昨天"
rtf.format(2, 'hour'); // → "2小时后"

单位参数必须是合法字符串，不能写错或用复数

format() 的第二个参数是时间单位，只接受特定单数字符串：如 'second'、'minute'、'hour'、'day'、'week'、'month'、'quarter'、'year'。写成 'hours' 或 'days' 会静默失败（返回类似 "NaN hour ago" 的错误字符串），且不抛异常。

不支持毫秒（'millisecond'）——没有这个单位
'quarter' 在中文里显示为 “一季度”，但多数场景用不到；'week' 是常用但易被忽略的单位（比如“上周三”无法直接生成，需配合日期计算）
单位大小写敏感，'Day' 或 'DAY' 都无效

常见错误现象：rtf.format(-3, 'days') → 输出 "-3 days ago"（英文）或乱码，因单位非法导致内部 fallback 到默认行为

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

如何把 Date 转成 relative 数值 + 单位（避免手动算错）

Intl.RelativeTimeFormat 不接收 Date 对象，只认数值 + 单位。所以得自己算差值。直接用 date.getTime() 相减再除以毫秒基数，是最稳妥的方式，避免时区和夏令时干扰（因为 Intl.RelativeTimeFormat 本身不处理时区，它只格式化你给的数值）。

错误做法：用 date.getDate() - now.getDate() —— 忽略月份天数不同、跨月、时区偏移
正确做法：统一转毫秒再换算，优先用 Math.round() 而非 Math.floor()，避免 -0.9 → -1（本意是“不到1小时”，却显示“1小时前”）

function getRelativeParts(targetDate, baseDate = new Date()) {
  const diffMs = targetDate - baseDate;
  const diffSec = diffMs / 1000;
  const diffMin = diffSec / 60;
  const diffHour = diffMin / 60;
  const diffDay = diffHour / 24;
<p>if (Math.abs(diffDay) >= 1) return { value: Math.round(diffDay), unit: 'day' };
if (Math.abs(diffHour) >= 1) return { value: Math.round(diffHour), unit: 'hour' };
if (Math.abs(diffMin) >= 1) return { value: Math.round(diffMin), unit: 'minute' };
return { value: Math.round(diffSec), unit: 'second' };
}</p><p>const rtf = new Intl.RelativeTimeFormat('zh-CN', { numeric: 'auto' });
const parts = getRelativeParts(new Date(Date.now() - 5 <em> 60 </em> 1000));
rtf.format(parts.value, parts.unit); // → "5分钟前"</p>

兼容性与降级方案（别只信 caniuse）

Chrome 71+、Firefox 70+、Safari 13+ 支持完整功能，但 Safari 12 及更早版本不支持 numeric: 'auto'，会无视该选项并始终输出数字形式。Edge Legacy（≤18）完全不支持。

检测方式不是看 typeof Intl.RelativeTimeFormat，而是执行 new Intl.RelativeTimeFormat('zh-CN', { numeric: 'auto' }).format(1, 'day') 并检查是否返回“明天”而非“1 day later”
真实项目中建议封装一层，失败时 fallback 到轻量库如 dayjs 的 .fromNow()，或手写简版逻辑（仅处理 day/hour/minute 三级）

容易被忽略的一点：服务端渲染（SSR）环境（如 Next.js、Nuxt）中，Intl.RelativeTimeFormat 在 Node.js 14+ 才稳定支持，且需启用 icu-data；若用低版本 Node 或无 ICU，会静默退化为英文，且无警告