在前端开发中，日期格式是一个很关键的问题，不同浏览器在处理日期格式时可能存在兼容性问题，这就需要我们了解并掌握 ES12 中的 Intl.DateTimeFormat。
ES12 中的 Intl.DateTimeFormat
在 ES12 中，Intl 实例提供了一个日期格式化 API，通过该 API 可以将日期对象格式化为符合不同国家或地区标准的字符串。这个 API 可以解决日期格式兼容性问题，提升了代码的可读性和可移植性。
创建一个 Intl.DateTimeFormat 实例
我们可以通过 new Intl.DateTimeFormat() 来创建一个日期格式化实例，创建实例的时候可以传入一些配置参数。
const formatter = new Intl.DateTimeFormat('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
});上面的代码创建了一个日期格式化实例 formatter，格式化的样式为：中文格式，年月日时分秒都显示，例如：2022年2月2日 下午3:18:00。
格式化一个 Date 对象
可以通过 formatter.format() 方法来格式化一个 Date 对象，将其转换为符合指定格式的字符串。
const formattedDate = formatter.format(new Date()); console.log(formattedDate); // 2022年2月2日 下午3:18:00
上面的代码即可将当前时间格式化并输出。
示例代码
下面是一个简单的例子，通过选择不同的语言和选项来显示不同的日期格式。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------- -----------------
-------
------
-------- --------------
-----
------- --------------- --------------
------- --------------------- -------------
------- --------------------- -------------
------- ------------- --------------------
------- -------------------------------
------- ------------------------------
---------
--- --
------ --------------- ------------- ------- -- ---- ----
------
--- --
---- -------------------------
--------
----- -------------- - ------------------------------------
----- ---------------- - ------------------------------------
----- ---------------- - -----------------------------------------
-------- ------------ -
----- -------- - ---------------------
----- ------- - -
----- ----------
------ -------
---- ----------
--
-- -------------------------- -
------------ - ----------
-------------- - ----------
-------------- - ----------
-
----- --------- - --- ----------------------------- ---------
----- ------------- - -------------------- --------
----- ------------- - ------------------------ - - -- ----------------------- ------- - ---
-------------------------- - ------ -- ----------------------- -------------------------
-
----------------------------------------- ------------
------------------------------------------- ------------
-------------
---------
-------
-------上面的代码展示了一个带有语言选择和显示时间复选框的页面，用户可以选择不同的选项来显示不同语言和日期格式：
总结
通过本文的介绍，我们了解了 ES12 中的 Intl.DateTimeFormat，以及如何使用它来避免日期格式兼容性问题。我们可以使用不同的选项来灵活地格式化日期，从而提高代码的可读性和可移植性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647dad7f968c7c53b087c0e1