JavaScript Intl.RelativeTimeFormat 相对时间格式化详解

作者：百宝袋时间：2026-10-31 15:56:01浏览：656

本文介绍 JavaScript 内置的 Intl.RelativeTimeFormat API，用于轻松格式化相对时间。内容涵盖构造函数用法、format 方法、支持的时间单位（如 second、year）以及 numeric 和 style 配置选项。通过社交媒体时间戳和未来事件提醒的实际代码示例，展示如何生成“3天前”或“in 2 days”等本地化字符串。

JavaScript 内置了多种国际化工具，其中 Intl.RelativeTimeFormat 便是其中之一，它使开发者能够便捷地处理相对时间的格式化。借助该 API，可以生成如“3天前”或“2年后”这类表达。下文将深入解析 Intl.RelativeTimeFormat 的具体用法及其在各类场景中的应用。

什么是 Intl.RelativeTimeFormat？

Intl.RelativeTimeFormat 属于 ECMAScript 国际化 API 的构造函数，专门用于处理相对于当前时刻的时间段格式化。它兼容多种语言与区域设置，从而简化了国际化和本地化的开发工作。

基本用法

创建一个 Intl.RelativeTimeFormat 实例

生成 Intl.RelativeTimeFormat 实例时，可传入可选的语言代码及配置对象。具体示例如下：

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

格式化相对时间

Intl.RelativeTimeFormat 提供了 format 方法，用于执行时间段格式化。参考以下代码：

console.log(rtf.format(-1, 'day')); // 输出: "yesterday"
console.log(rtf.format(2, 'day'));  // 输出: "in 2 days"

支持的时间单位

Intl.RelativeTimeFormat 支持多种时间单位，具体包括：

second
minute
hour
day
week
month
quarter
year

使用示例

下面展示一个完整示例，演示如何利用 Intl.RelativeTimeFormat 对不同时间单位进行格式化：

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
console.log(rtf.format(-1, 'second')); // 输出: "1 second ago"
console.log(rtf.format(5, 'minute'));  // 输出: "in 5 minutes"
console.log(rtf.format(-3, 'hour'));   // 输出: "3 hours ago"
console.log(rtf.format(1, 'day'));     // 输出: "tomorrow"
console.log(rtf.format(-1, 'week'));   // 输出: "last week"
console.log(rtf.format(2, 'month'));   // 输出: "in 2 months"
console.log(rtf.format(-1, 'year'));   // 输出: "last year"

自定义选项

Intl.RelativeTimeFormat 构造函数接收一个可选的配置对象，用于定制格式化行为。主要配置项如下：

numeric: 用于指定输出是数字形式（例如“1 day ago”）还是文字形式（例如“yesterday”）。可选值包括 'always' 和 'auto'。
style: 用于指定格式化风格。可选值包括 'long'、'short' 和 'narrow'。

示例

const rtf1 = new Intl.RelativeTimeFormat('en', { numeric: 'always', style: 'long' });
console.log(rtf1.format(-1, 'day')); // 输出: "1 day ago"
const rtf2 = new Intl.RelativeTimeFormat('en', { numeric: 'auto', style: 'short' });
console.log(rtf2.format(-1, 'day')); // 输出: "yesterday"

实际应用

社交媒体时间戳

在社交媒体应用中，常需展示“刚刚”、“几分钟前”或“几小时前”等时间信息。利用 Intl.RelativeTimeFormat 可轻松实现此类功能。

function timeAgo(date) {
    const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
    const now = new Date();
    const diffInSeconds = (now - date) / 1000;
    if (diffInSeconds < 60) return rtf.format(-Math.floor(diffInSeconds), 'second');
    if (diffInSeconds < 3600) return rtf.format(-Math.floor(diffInSeconds / 60), 'minute');
    if (diffInSeconds < 86400) return rtf.format(-Math.floor(diffInSeconds / 3600), 'hour');
    if (diffInSeconds < 604800) return rtf.format(-Math.floor(diffInSeconds / 86400), 'day');
    if (diffInSeconds < 2419200) return rtf.format(-Math.floor(diffInSeconds / 604800), 'week');
    if (diffInSeconds < 29030400) return rtf.format(-Math.floor(diffInSeconds / 2419200), 'month');
    return rtf.format(-Math.floor(diffInSeconds / 29030400), 'year');
}
console.log(timeAgo(new Date(Date.now() - 5 * 60 * 1000))); // 输出: "5 minutes ago"

事件提醒

在事件提醒场景中，展示相对于当前时间的未来事件信息至关重要。可通过 Intl.RelativeTimeFormat 来实现这一需求。

function timeUntil(date) {
    const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
    const now = new Date();
    const diffInSeconds = (date - now) / 1000;
    if (diffInSeconds < 60) return rtf.format(Math.floor(diffInSeconds), 'second');
    if (diffInSeconds < 3600) return rtf.format(Math.floor(diffInSeconds / 60), 'minute');
    if (diffInSeconds < 86400) return rtf.format(Math.floor(diffInSeconds / 3600), 'hour');
    if (diffInSeconds < 604800) return rtf.format(Math.floor(diffInSeconds / 86400), 'day');
    if (diffInSeconds < 2419200) return rtf.format(Math.floor(diffInSeconds / 604800), 'week');
    if (diffInSeconds < 29030400) return rtf.format(Math.floor(diffInSeconds / 2419200), 'month');
    return rtf.format(Math.floor(diffInSeconds / 29030400), 'year');
}
console.log(timeUntil(new Date(Date.now() + 3 * 24 * 60 * 60 * 1000))); // 输出: "in 3 days"

结论

Intl.RelativeTimeFormat 是一个功能强大的工具，能显著简化相对时间格式化的工作。无论是用于社交媒体应用的时间戳显示，还是事件提醒中的未来时间展示，它都能提供灵活且易用的解决方案。希望本文能协助您更深入地理解并应用 Intl.RelativeTimeFormat。

至此，关于在 JavaScript 中使用 Intl.RelativeTimeFormat 进行相对时间格式化的介绍已结束。如需了解更多 Intl.RelativeTimeFormat 相关内容，请查阅本站过往文章或继续浏览后续文章，感谢您的支持！

作者最新文章

定制 Quill.js 主题样式：修改默认 CSS 与添加自定义类名

2026-11-04 11:21:35

混淆JS代码怎么在线反混淆并格式化阅读

2026-11-03 21:46:39

JS在线编辑器代码报错怎么调试？控制台使用技巧

2026-11-03 21:24:56

从 marked.js 旧版本升级到最新版：API 变更与迁移指南

2026-11-03 17:38:17

JS富文本编辑器Quill与代码编辑器CodeMirror的区别及应用场景

2026-11-03 16:52:09