在前端开发中，我们经常需要展示日期和时间。然而，不同地区、语言和文化习惯对日期和时间的表示方式有所不同，因此在设计和开发应用程序时，需要考虑到这些差异。
为了让用户在他们熟悉的日期和时间格式下浏览信息，我们可以使用 JavaScript 的 Intl API 来处理这些情况。Intl API 是一个国际化（i18n）库，它提供了一组工具来处理数字、日期、货币等等格式化的需求。
显示日期
要在用户的区域设置格式下显示日期，我们可以使用 Intl.DateTimeFormat 对象。以下是一个例子：
----- ---- - --- ---------------------------- ----- ------- - - ----- ---------- ------ ------- ---- ---------- -------- ------- -- ----- --------- - --- ---------------------------- --------- ------------------------------------ -- -------------
在上面的代码中，我们首先创建了一个日期对象。然后，我们定义了一个选项对象，其中包含了要显示的日期元素，如年份、月份、日期、星期几等。最后，我们创建了一个 Intl.DateTimeFormat 对象，并将选项和区域设置作为参数传递给它。调用 format 方法，将日期对象作为参数传递进去即可得到格式化后的日期字符串。
显示时间
类似于显示日期，使用 Intl.DateTimeFormat 对象也可以显示用户的区域设置下的时间。以下是一个例子：
----- ---- - --- ---------------------------- ----- ------- - - ----- ---------- ------- ---------- ------- ---------- -- ----- --------- - --- ---------------------------- --------- ------------------------------------ -- ----------
与显示日期不同，我们在选项对象中只需要指定要显示的小时、分钟和秒即可。然后，我们创建了一个 Intl.DateTimeFormat 对象，并将选项和区域设置作为参数传递给它。最后，调用 format 方法并将日期对象作为参数传递进去即可得到格式化后的时间字符串。
显示相对时间
除了显示特定的日期和时间，还有一种常见的需求是显示相对时间，例如“5 分钟前”、“2 天前”等等。使用 Intl.RelativeTimeFormat 对象可以很容易地实现这个功能。以下是一个例子：
----- --- - --- ------- ----- --------- - --- ------------------ - - - -- - ------ -- - --- ----- --------- - --- -------------------------------- - ------ -------- --- -------------------------------------------- - ---------- - ------ ----------- -- - ---
在上面的代码中，我们首先创建了一个当前时间的日期对象。然后，我们创建了一个时间戳，该时间戳比当前时间早两分钟。接着，我们创建了一个 Intl.RelativeTimeFormat 对象，并将选项和区域设置作为参数传递给它。最后，调用 format 方法并将相对时间的数量和单位作为参数传递进去即可得到格式化后的相对时间字符串。
总结
在本文中，我们介绍了如何使用 JavaScript 的 Intl API 来处理不同语言和地区下的日期和时间格式。我们分别演示了如何显示日期、时间和相对时间，并提供了示例代码。通过这些技术，您可以更好地满足用户的需求，提高应用程序的易用性和可访问性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10101