js中对数字,超大金额(千位符，小数点)格式化处理

最新推荐文章于 2024-05-09 09:53:48 发布

Э时间行者于我

最新推荐文章于 2024-05-09 09:53:48 发布

阅读量995

点赞数 8

分类专栏： js node.js 文章标签： javascript node.js

本文链接：https://blog.csdn.net/qq_45094682/article/details/135451860

版权

js 同时被 2 个专栏收录

48 篇文章 1 订阅

订阅专栏

node.js

5 篇文章 0 订阅

订阅专栏

前言

这个问题的灵感来自线上一个小bug，前两天刚看完同事写的代码，对数字类型处理的很好，之前一直都是用正则和toFixed(2)处理数字相关，后面发现使用numeral.js处理更完美。

对于下面这种数据的处理，你能想到几种方法，简单思考下

0.1+0.2=0.30000000000000004
0.14*100=14.000000000000002

9999999--->'9,999,999'
1234567890--->1,234,567,890

1.先说加减乘除法

0.1+0.2的精准算法，这里以加法举例了，换成减、乘、除法都是一样的

1).使用toFixed()方法：

const sum = 0.1 + 0.2; // 0.14 * 100; 乘法
const roundedSum = parseFloat(sum.toFixed(10));
console.log(roundedSum); // 输出 0.3

2).使用parseFloat()和toFixed()结合：

const sum = parseFloat((0.1 + 0.2).toFixed(10));
console.log(sum); // 输出 0.3

3).使用Math.round()：

const sum = Math.round((0.1 + 0.2) * 1e10) / 1e10;
console.log(sum); // 输出 0.3

4).使用numeral.EPSILON：

const sum = 0.1 + 0.2;
const roundedSum = Math.abs(sum - 0.3) < Number.EPSILON ? 0.3 : sum;
console.log(roundedSum); // 输出 0.3

5).使用Numeral.js：

// 安装
npm i numeral -S
// 挂原型链上
import numeral from 'numeral'
Vue.prototype.$numeral = numeral; // 数字金额

let num = this.$numeral(14*100).format('0,0.00')
console.log(num); // 输出 14.00

2.再说超大金额(千位符)格式化处理

1).利用字符串提供的toLocaleString()js内置的方法处理,这个方法最简单

var num = 9999999;
console.log(num.toLocaleString()) // 9,999,999

2).利用正则处理

function addThousandSeparator(number) {
  // 将数字转换为字符串
  const numberString = String(number);
  // 使用正则表达式添加千位符
  const formattedNumber = numberString.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return formattedNumber;
}

const result = addThousandSeparator(9999999);
console.log(result); // 输出 '9,999,999'

\B(?=(\d{3})+(?!\d)) 是一个正则表达式模式，它使用正向零宽断言来匹配不在数字之前的位置，但是在每三个数字之间。这样就可以在这些位置插入千位符

3).使用第三方库的Numeral.js处理

对整数的处理


<script src="https://cdn.bootcss.com/numeral.js/2.0.6/numeral.min.js"></script>
var formattedNumber = numeral(9999999).format('0,0'); // 输出：9,999,999
console.log('formattedNumber',formattedNumber);

对小数点的处理

这里注意括号里逗号与小数点的区别format('0,0.00')


<script src="https://cdn.bootcss.com/numeral.js/2.0.6/numeral.min.js"></script>
var formattedNumber = numeral(9999999.56841).format('0,0.00'); // 输出：9,999,999
console.log('formattedNumber',formattedNumber);

<script src="https://cdn.bootcss.com/numeral.js/2.0.6/numeral.min.js"></script>
 <script>
   
   var string = numeral(1634600).format('0,0');
   console.log(string)

   // 乘法运算
   var result = numeral(0.14).multiply(100).value(); // 输出：6
   console.log('result',result);
   var result1 = numeral(0.14*100).value(); 
   console.log('result1',result1,numeral(0.14*100).format('0,0.00'));
   // this.$numeral(0.14*100).format('0,0.00')
 </script>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>numeral.js</title>
</head>
<body>
  numeral.js
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/numeral.js/2.0.6/locales.min.js"></script> -->
  
  <script src="https://cdn.bootcss.com/numeral.js/2.0.6/numeral.min.js"></script>
  <script>
    
    var string = numeral(1634600).format('0,0');
    console.log(string)

    // 乘法运算
    var result = numeral(0.14).multiply(100).value(); // 输出：6
    console.log('result',result);
    var result1 = numeral(0.14*100).value(); 
    console.log('result1',result1,numeral(0.14*100).format('0,0.00'));
    // this.$numeral(0.14*100).format('0,0.00')
  </script>
</body>
</html>

Э时间行者于我

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
js中对数字,超大金额(千位符，小数点)格式化处理

这个问题的灵感来自线上一个小bug，前两天刚看完同事写的代码，对数字类型处理的很好，之前一直都是用正则和toFixed(2)处理数字相关，后面发现使用numeral.js处理更完美。1).使用toFixed()方法2).使用parseFloat()和toFixed()结合：3).使用Math.round()：5).使用Numeral.js
复制链接

扫一扫