js数字转金额类型

iblackboy

已于 2023-04-19 16:22:11 修改

阅读量2.3k

点赞数

文章标签： css javascript

于 2020-06-02 00:20:11 首次发布

本文链接：https://blog.csdn.net/iblackboy/article/details/106484536

版权

本文介绍了一种将数字转换为带有千位分隔符和固定两位小数的金额格式的方法，适用于网页显示。通过使用JavaScript的toFixed(), parseFloat(), 和 toLocaleString()函数，实现了对数字的有效格式化，并通过额外的条件判断确保了小数点后两位的完整性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目上有个需求，要把接口中的金额这个字段(数字)，转换成金额的格式呈现在页面上。

金额的格式就例如：

100,000,000.00

123,456.78

整数位从低位往高位每三位用逗号隔开，并且保留两位小数。

网上最简单的方式

toMoney(num) {
  num = num.toFixed(2);
  num = parseFloat(num);
  num = num.toLocaleString();
  return num;
}

用到了3个js原生方法

1.toFixed()

将数字四舍五入为指定小数位的数字，要注意的是返回的值是个字符串类型。

2.parseFloat()

解析字符串，并返回一个浮点数，要注意的是输入的值如果是'10.00',返回值是10。

3.toLocaleString()

toLocaleString的使用还是很多的，这里我们使用的是Number.prototype.toLocaleString()，简单讲就是从个位开始，向高位每三位就来个'，'隔开。返回值是个字符串类型

这种处理方式近乎完美，但是有个问题，如果我硬要在页面中显示出像上图中的以00为结尾的两位小数呢，这种就不可以了

解决方法也很简单，既然最后返回值是个字符串，加个判断就好了，最终代码如下。

 toMoney(num) {
    num = num.toFixed(2);
    num = parseFloat(num);
    num = num.toLocaleString();
    // 数字为整数时  100 => 100.00
    if (num.indexOf('.') < 0) {
      num += '.00';
    }
    // 数字只有一位小数时 100.3 => 100.30
    if (num.split('.')[1].length === 1){
        num += '0';
    } 
    return num;
  }