如何使用 Intl.RelativeTimeFormat 在 JavaScript 中进行相对时间格式化

更新时间：2024年09月25日 14:45:34 作者：xgq

Intl.RelativeTimeFormat是JavaScript提供的一个国际化API,用于格式化相对时间,如"3天前"或"2年后",支持多种语言和配置选项,适用于社交媒体时间戳和事件提醒等场景,它简化了国际化的相对时间显示,使开发者能够根据用户的语言和区域设置轻松实现时间格式化

JavaScript 提供了许多内置的国际化工具，其中之一是 Intl.RelativeTimeFormat，它允许开发者轻松地格式化相对时间。例如，可以用它来表示 "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。

到此这篇关于使用 Intl.RelativeTimeFormat 在 JavaScript 中进行相对时间格式化的文章就介绍到这了,更多相关Intl.RelativeTimeFormat 相对时间格式化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript中实现new的两种方式引发的探究
众所周知JS中new的作用是通过构造函数来创建一个实例对象，这篇文章主要给大家介绍了关于JavaScript中实现new的两种方式引发的相关资料，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
深入了解Javascript的事件循环机制
单线程的同步等待极大影响效率，任务不得不一个一个等待执行，对于网页应用是无法接受的。所以Javascript使用事件循环机制来解决异步任务的问题。本文就来讲讲Javascript的事件循环机制，希望对你有所帮助
2022-09-09
JavaScript实现邮箱地址自动匹配功能代码
这篇文章主要为大家详细介绍了JavaScript实现E-mail邮箱地址自动匹配功能代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
JS中video标签自动播放音视频并绘制波形图效果
html中的<video>标签可以用来播放常见的音视频格式，支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等，当然支持的格式也和浏览器和操作系统有关，这篇文章主要介绍了video标签自动播放音视频并绘制波形图,需要的朋友可以参考下
2023-09-09
JavaScript 自定义事件之我见
事件就是用户和浏览器交互的一种途径,在本例中我们的代码逻辑一般就是收集用户填写信息，验证信息合法性，利用AJAX与服务器交互,需要的朋友可以参考下
2017-09-09
javascript实现点击按钮让DIV层弹性移动的方法
这篇文章主要介绍了javascript实现点击按钮让DIV层弹性移动的方法,实例分析了javascript操作div层的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
浅谈webpack性能榨汁机(打包速度优化)
这篇文章主要介绍了浅谈webpack性能榨汁机(打包速度优化)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
微信小程序实现自动播放视频模仿gif动图效果实例
这篇文章主要给大家介绍了关于微信小程序实现自动播放视频模仿gif动图效果的相关资料,通过本文介绍的方法可以实现自动播放视频，视频无控制条无声音且自动循环播放,需要的朋友可以参考下
2021-07-07
js实现YouKu的漂亮搜索框效果
这篇文章主要介绍了js实现YouKu的漂亮搜索框效果的方法,通过javascript结合鼠标事件与页面样式实现漂亮的搜索框效果,非常具有实用价值,需要的朋友可以参考下
2015-08-08
基于Cesium实现绘制圆形,正方形,多边形,椭圆图形标注
这篇文章主要介绍了如何利用Cesium实现绘制圆形、正方形、多边形、椭圆等形状的图形标注，文中的示例代码讲解详细，需要的可以参考一下
2022-06-06