JS格式化金钱（千分位加逗号、保留两位小数）

深碍√TFBOYSˉ_ 2022-11-14 14:49 513阅读 0赞

> 我们日常开发中经常会遇到比较大的数值，需要对其进行格式化，既方便了阅读又使页面更加的优雅。

`比如说 999999999，直接阅读很不直观，格式化后 999,999,999或者999,999,999.00`

*  第一种方式：我们可以使用正则来处理

function formatPrice(price) { 
      return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }

*  第二种方式：也可以不使用正则，进行优雅的处理

function formatPrice(price) { 
      return String(price)
        .split('')
        .reverse()
        .reduce((prev, next, index) => { 
          return (index % 3 ? next : next + ',') + prev;
        });
    }

*  第三种方式：直接使用JS内置 API （`toLocaleString`），实现金额的格式化

(999999999).toLocaleString(); // 999,999,999
    
    // 还可以加参数，进行更优雅的做法
    const options = { 
      style: 'currency',
      currency: 'CNY',
    };
    (999999).toLocaleString('zh-CN', options); // ¥999,999.00

const options = { 
      style: 'percent',
      currency: 'CNY',
    };
    (1).toLocaleString('zh-CN', options); // 100%

> `toLocaleString` 可以接收两个可选参数：locales 和 options，而且这个 api在各大浏览器通用不存在兼容问题并且这个 api 不止存在 Number 的原型上，Array、Object、Date 原型上都有这个 api，并且格式化出来的值可以根据我们传入的参数出现各种结果，关于`toLocaleString`的参数及用法在[MDN（Number.prototype.toLocaleString()）][MDN_Number.prototype.toLocaleString]中有详细的用法，感兴趣的小伙伴可以深入了解一下。

[MDN_Number.prototype.toLocaleString]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString