前言
在前端开发中，数字的格式化是一个常见的需求。在 JavaScript 中，我们可以使用 Intl.NumberFormat 对象来格式化数字。在 ECMAScript 2021 中，新增了一个名为 formatToParts 的方法，它可以将格式化后的数字拆分为多个部分，方便我们自由地处理这些部分，比如根据需要添加样式或者翻译成不同语言。
本文将介绍 formatToParts 方法的用法，并通过实例代码演示如何使用它进行数字格式化。
语法
Intl.NumberFormat.formatToParts() 方法的语法如下：
Intl.NumberFormat.prototype.formatToParts(number);
其中，number 参数是需要格式化的数字。
返回值
formatToParts 方法返回一个数组，数组中的每个元素都是一个对象，包含以下属性：
- type：表示该部分的类型，可能的取值有：'currency'、'decimal'、'fraction'、'group'、'infinity'、'integer'、'literal'、'minusSign'、'nan'、'percent'、'plusSign'、'unit'。
- value：表示该部分的值，是一个字符串。
实例
下面是一个使用 formatToParts 方法进行数字格式化的实例：
-- -------------------- ---- ------- ----- ------ - ----------- ----- --------- - --- -------------------------- - ------ ----------- --------- ------ ---------------------- -- ---------------------- -- --- ----- ----- - -------------------------------- ------------------- -- ----- -- - -- - ----- ----------- ------ --- -- -- - ----- ---------- ------ ----- -- -- - ----- -------- ------ --- -- -- - ----- ---------- ------ ----- -- -- - ----- ---------- ------ --- -- -- - ----- ----------- ------ ---- - -- -
在这个例子中，我们创建了一个格式化器 formatter，并将其应用于数字 number 上。formatter 的样式为货币格式，货币类型为美元，小数点后最少保留两位，最多保留两位。
然后，我们调用 formatter 的 formatToParts 方法，将数字拆分为多个部分。最后，我们将拆分后的结果输出到控制台，可以看到它是一个数组，每个元素都包含了该部分的类型和值。
深入理解
formatToParts 方法的实现原理其实很简单，它只是在格式化数字的过程中，记录下每个部分的类型和值，并将它们保存到一个数组中。因此，我们可以通过这个数组来自由地处理每个部分，比如添加样式、翻译成不同语言等。
下面是一个使用 formatToParts 方法实现自定义数字格式化的实例：
-- -------------------- ---- -------
----- ------ - -----------
----- --------- - --- -------------------------- -
------ ----------
---
----- ----- - --------------------------------
----- --------- - -----
--------- -- -
------ ----------- -
---- ----------
------ ------ --------------------------------------
---- ----------
------ ------ --------------------------------------
--------
------ -----------
-
--
----------
-----------------------
-- ---------- ------------------------------- --------------------------- ------------------------------- ----------------------------- ---------------------------在这个例子中，我们创建了一个格式化器 formatter，并将其应用于数字 number 上。formatter 的样式为十进制格式。
然后，我们调用 formatter 的 formatToParts 方法，将数字拆分为多个部分。接下来，我们遍历拆分后的结果，根据每个部分的类型来添加样式。最后，我们将添加样式后的结果拼接成一个字符串，并输出到控制台。
总结
formatToParts 方法是 ECMAScript 2021 中新增的一个方法，它可以将数字格式化后的结果拆分为多个部分，方便我们自由地处理这些部分。通过本文的介绍和实例，相信大家已经掌握了 formatToParts 方法的用法，并可以灵活地运用它来进行数字格式化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ddbd761886fbafa4b0e699