首页 > 网页制作 >Intl.RelativeTimeFormat：自动生成'3分钟前'或'昨天'等本地化语义时间

Intl.RelativeTimeFormat：自动生成'3分钟前'或'昨天'等本地化语义时间

来源：互联网 2026-07-31 16:28:09

要实现“3 分钟前”或“昨天”这样的本地化语义时间，无需手动编写多语言词典，浏览器原生提供的 Intl.RelativeTimeFormat API 即可自动完成。该 API 能够根据用户语言和地区，将时间差转换为自然、地道的相对时间表达，例如中文“3 分钟前”、英文“3 minutes ago”、

要实现“3 分钟前”或“昨天”这样的本地化语义时间，无需手动编写多语言词典，浏览器原生提供的 Intl.RelativeTimeFormat API 即可自动完成。该 API 能够根据用户语言和地区，将时间差转换为自然、地道的相对时间表达，例如中文“3 分钟前”、英文“3 minutes ago”、日文“3分前”。使用此 API 不仅省时省力，而且可靠性高，现代浏览器支持广泛（IE 例外，需注意兼容性）。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

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

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

首先通过 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 = na vigator.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" 多数语言差异不大，"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 不支持复合单位，需自行拼接，或改用 date-fns 的 formatDistanceToNow 等工具库。