简介
在开发前端项目的过程中，处理数字及非数字的格式化是一项比较常见的任务。在 JavaScript 中，格式化数字通常使用的是 Intl.NumberFormat 对象，这个对象提供了多种格式化数字的方式，但是在实际使用中，我们可能还有一些更复杂的需求，这时候我们就需要使用第三方库来帮助我们完成这些需求。本文将要介绍的是一个轻量级的前端工具库 ———— @ldinho/number-formatter。
安装
使用 npm 进行安装：
npm install @ldinho/number-formatter
使用方法
基本用法
在模块化的项目中，通过以下方式引入：
import { format } from '@ldinho/number-formatter';format 方法接收两个参数：
- 需要格式化的数字
- 格式化字符串
例如：
format(123456789, '#,##0.00'); // '123,456,789.00'
在上面这个例子中，传入的字符串 #,##0.00 是一个必需参数，它规定了格式化的方式。其中：
#表示数字，如果该位置上没有数字，则会用空格来填充。,表示输出货币符号，例如“$”。.表示小数点。0表示在该位置上填充“0”。
在使用的过程中，将 format 方法和格式化字符串结合起来，即可将数字按照指定的格式进行格式化。
更多用法
除了基本的格式化方式之外，@ldinho/number-formatter 还支持更多高级的用法。
1. 国际化
@ldinho/number-formatter 支持使用不同的语言对数字进行格式化。例如，使用 de 语言格式化一个德语语境下的数字：
format(123456789, '#,##0.00', 'de'); // '123.456.789,00'
2. 自定义货币符号
有些情况下，我们可能需要自定义货币符号，这时候我们可以在格式化字符串中使用 $ 或 ¤ 来表示货币符号，并在第三个参数中传入所需的符号。例如，要将数字格式化为使用人民币符号的字符串：
format(123456789, '$#,##0.00', 'zh-CN'); // '￥123,456,789.00'
3. 自定义填充符号
我们可以在格式化字符串中使用任何自定义的字符来代替默认的填充符号（即空格）。例如，要将数字格式化为使用横杠 - 作为空格填充符号的字符串：
format(123456789, '#,##0.00', '', '-'); // '123-456-789.00'
4. 自定义小数点
我们也可以使用自定义的小数点字符。例如，要将数字格式化为使用半角句号 . 作为小数点的字符串：
format(123456789, '#,##0.00', '', '', '.'); // '123,456,789.00'
示例代码
以下是一些示例代码，让你更好地理解 @ldinho/number-formatter 的使用方法：
-- -------------------- ---- ------- ------ - ------ - ---- --------------------------- -- ---- ----------------- ------------ -- ---------------- -- --- ----------------- ----------- ------ -- ---------------- -- ------- ----------------- ------------ --------- -- ----------------- -- ------- ----------------- ----------- --- ----- -- ---------------- -- ------ ----------------- ----------- --- --- ----- -- ----------------
总结
@ldinho/number-formatter 是一个简单易用的数字格式化工具库，它提供了多种格式化数字的方式，帮助我们在前端开发中完成各种复杂的格式化需求。上面我们介绍了这个库的基本用法和一些高级用法，并提供了示例代码，希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc7967216659e24451c