如何利用 Intl.RelativeTimeFormat 自动生成“3 分钟前”或“昨天”这些本地化语义时间

Intl.RelativeTimeFormat 是浏览器原生国际化 API，用于将时间差自动转为本地化相对时间表达，如“3 分钟前”；需传入数值差与单位，不支持 Date 对象直接输入，现代浏览器广泛支持但 IE 不兼容。

Intl.RelativeTimeFormat 是浏览器原生支持的国际化 API，能根据用户语言和地区，自动将时间差转为自然、本地化的相对时间表达，比如中文“3 分钟前”、英文“3 minutes ago”、日文“3分前”，无需手动维护多语言词典或复杂逻辑。

基础用法：创建格式器并格式化时间差

它不直接接收 Date 对象，而是接收一个**数值（时间差）和单位（如 "minute", "day"）**，再结合当前语言环境生成对应文本。

• 先用 new Intl.RelativeTimeFormat(locales, options) 创建实例，locales 如 "zh-CN"、"en-US"、"ja-JP"
• 调用 .format(value, unit)，其中 value 是带符号的整数（正数表示未来，负数表示过去），unit 是 "second"、"minute"、"hour"、"day"、"week"、"month" 或 "year"

例如：

const rtf = new Intl.RelativeTimeFormat("zh-CN");
rtf.format(-3, "minute"); // → "3 分钟前"
rtf.format(1, "day"); // → "明天"

自动计算时间差：封装成易用函数

实际使用中，需先算出目标时间与当前时间的差值（单位秒/分/小时/天等），再传给 format()。推荐按粒度分级判断，提升语义准确性：

• ±59 秒 → 用 "second"
• ±59 分钟 → 用 "minute"
• ±23 小时 → 用 "hour"
• ±6 天 → 用 "day"（此时可得“昨天”“前天”“明天”“后天”）
• 更久则按周/月/年处理（注意：月份天数不固定，建议用 Intl.DateTimeFormat 配合绝对日期显示）

简单封装示例：

function formatRelativeTime(targetDate, locales = navigator.language) {
  const now = Date.now();
  const diffMs = targetDate - now;
  const diffSec = Math.round(diffMs / 1000);
  const diffMin = Math.round(diffMs / (1000 * 60));
  const diffHour = Math.round(diffMs / (1000 * 60 * 60));
  const diffDay = Math.round(diffMs / (1000 * 60 * 60 * 24));

  const rtf = new Intl.RelativeTimeFormat(locales, { numeric: "auto" });

  if (Math.abs(diffSec) < 60) return rtf.format(diffSec, "second");
  if (Math.abs(diffMin) < 60) return rtf.format(diffMin, "minute");
  if (Math.abs(diffHour) < 24) return rtf.format(diffHour, "hour");
  return rtf.format(diffDay, "day");
}

formatRelativeTime(new Date(Date.now() - 3 * 60 * 1000), "zh-CN"); // "3 分钟前"

关键选项：控制输出风格

Intl.RelativeTimeFormat 支持两个常用配置项：

• numeric: "always"（默认）→ 总是输出数字：“1 day ago”、“2 hours ago”
• numeric: "auto" → 对常见值自动转为文字：“yesterday”、“tomorrow”、“next week”（中文下表现为“昨天”“明天”“下周”）
• style: "long"（默认）、"short"、"narrow"：影响单位缩写程度，如英文中 "long" → “1 day ago”，"short" → “1 day ago”（多数语言差异不大），"narrow" 可能简化为 “1d ago”；中文基本无区别

注意事项与兼容性

该 API 在现代浏览器中已全面支持（Chrome 71+、Firefox 70+、Safari 14.1+、Edge 79+），但不支持 IE。服务端 Node.js 需 v13.0+ 且启用 ICU 数据（通常默认开启）。

注意点：

• 不要传入 Date 对象本身——必须自行计算差值后再调用 format()
• 时间差单位必须匹配实际语义：比如“2 天前”要传 -2 和 "day"，不能传 -48 和 "hour"（否则可能得到“48 小时前”，失去“两天前”的简洁语感）
• 若需更高精度（如“2 小时 15 分钟前”），RelativeTimeFormat 不支持复合单位，需自行拼接或改用其他方案（如 formatDistanceToNow 来自 date-fns）