ECMAScript 2017 引入了一些新的国际化 API，包括 Intl.NumberFormat、Intl.DateTimeFormat 等用于格式化数字和日期的对象。这些 API 允许开发者以用户友好和标准化的方式格式化数字和日期，从而实现更强大的本地化支持。
FormattedNumber
Intl.NumberFormat 允许以不同的语言和国家/地区的方式呈现数字。下面是一些常见用法示例：
-- -------------------- ---- ------- ----- ------ - ----------- -- ---------------------- --------------- -------------------------- ----------------------- -------------------- -- --- ---------- -- ----------------------- --------------- -------------------------- ------- ------- ----- ---- ---------------------------- -- --- ----- -- ------ --------------- -------------------------- ------- ----------- --------- ------------------------ -- --- ---------- -
Intl.NumberFormat 的构造函数接受两个参数，第一个参数是 BCP 47 标准的语言标记符，第二个参数是一个对象，用于指定数字格式的详细配置。更多用法和配置项可以参见MDN 上的文档。
FormattedDate
Intl.DateTimeFormat 允许以指定语言和国家/地区的方式表示日期和时间。下面是一些示例：
-- -------------------- ---- ------- ----- ---- - --- ---------------------------- -- ---- --------------- ------------------------------------------- -- --- --------- -- -------- --------------- ----------------------------------------- ------ ---------- ------ ------- ---- -------------------------- -- --- ---------- -- ------------- --------------- ---------------------------- ---------- ------ ---------- -------- ---------- ------------------------- -- --- ------ -- --- ----
与 Intl.NumberFormat 类似，Intl.DateTimeFormat 的构造函数也接受两个参数，第一个参数是 BCP 47 标准的语言标记符，第二个参数是一个对象，用于指定日期格式的详细配置。更多用法和配置项可以参见MDN 上的文档。
指南
在使用 Intl.NumberFormat 和 Intl.DateTimeFormat 时，请注意以下事项：
1. 浏览器兼容性
请注意，这些 API 可能不在所有的浏览器中都得到支持。可以通过Can I Use等网站查看支持情况。
2. 动态文本和格式化
请注意，当应用动态文本和格式化时，特别是在 React、Vue 等框架中使用时，应将格式化的内容从组件渲染外移。这将有助于更好地利用浏览器的性能，并减少组件渲染时间。
以下示例演示了如何将动态文本和格式化分离：
-- -------------------- ---- -------
-- -----
-------- ------------------ -
------ -
-----
---------------------
------------ -------------------------- ------- ----------- --------- ---------------------------------
------
--
-
-- ----
-------- ------------------ ---------------- -
------ -
-----
---------------------
-------------------------------------------
------
--
-
-- ---
----- --------------- - ------ -- --- -------------------------- ------- ----------- --------- -----------------------
------------------ -----------------3. 本地化支持
使用 Intl.NumberFormat 和 Intl.DateTimeFormat 可以很容易地实现本地化支持。但请注意，这些 API 仅涵盖了数字和日期格式，还有一些其他的文本元素需要本地化。根据需要，可以使用其他第三方库或平台提供的本地化支持，例如 formatjs、i18next、React Intl 等。
结论
ECMAScript 2017 引入的 Intl.NumberFormat 和 Intl.DateTimeFormat API 可以为前端开发者提供更好的本地化支持。使用这些 API 可以轻松地为各种数字和日期格式提供本地化，并通过一些常见示例了解了它们的用法和配置。同时，需要注意浏览器兼容性、动态文本和格式化的组件设计以及文本本地化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670c54c266ef9cf37fb00ed5