js金额千分位的6种实现方法实例

一、js金额千分位的6种实现方法实例

在处理JavaScript中的金额千分位格式化时，可以采用多种方法。以下列举了六种常见的实现方式，每种方法都有其独特之处。

这种方法简单直接，通过数组分割实现金额的格式化。代码如下：

function format_with_array(number){

const arr=(number+'').split('.');

const int= arr[0].split('');

const fraction= arr[1]||'';

int.reverse().forEach(function(v, i){

return r+(!!fraction?'.'+ fraction:'');

console.log(format_with_array(1234567893.99));

这种方法通过字符截取来实现金额的格式化。代码如下：

function format_with_substring(number){

let arr=(number+'').split('.');

let fraction= arr[1]||'';

for(let i= 0; i< Math.floor(int.length/ 3); i++){

r+=','+ int.substring(f+ i* 3, f+(i+ 1)* 3);

return r+(!!fraction?'.'+ fraction:'');

console.log(format_with_substring(12112123313.78));

这种方法利用求模运算来实现金额的格式化。代码如下：

function format_with_mod(number){

r=(n=== 1? `${temp}`.padStart(3,'0'): temp)+(!!r?','+ r:'');

const strNumber= number+'';

let index= strNumber.indexOf('.');

r+= strNumber.substring(index);

console.log(format_with_mod(1234567893.99));

这种方法利用正则表达式来实现金额的格式化。代码如下：

function format_with_regex(number){

return!(number+'').includes('.')?

(number+'').replace(/\d{1,3}(?=(\d{3})+$)/g,(match)=> match+','):

(number+'').replace(/\d{1,3}(?=(\d{3})+(\.))/g,(match)=> match+',');

console.log(format_with_regex(1243250.99));

这种方法使用`Intl.NumberFormat`来实现金额的格式化，但存在性能问题。代码如下：

function format_with_Intl(number, minimumFractionDigits, maximumFractionDigits){

minimumFractionDigits= minimumFractionDigits|| 2;

maximumFractionDigits= maximumFractionDigits|| 2;

maximumFractionDigits= Math.max(minimumFractionDigits, maximumFractionDigits);

return new Intl.NumberFormat('en-us',{

maximumFractionDigits: maximumFractionDigits|| 2,

minimumFractionDigits: minimumFractionDigits|| 2

console.log(format_with_Intl(123456789.98));

方法六 number.toLocaleString方式

这种方法使用`toLocaleString`来实现金额的格式化，同样存在性能问题。代码如下：

function format_with_toLocalString(number, minimumFractionDigits, maximumFractionDigits){

minimumFractionDigits= minimumFractionDigits|| 2;

maximumFractionDigits= maximumFractionDigits|| 2;

maximumFractionDigits= Math.max(minimumFractionDigits, maximumFractionDigits);

return number.toLocaleString('en-us',{

maximumFractionDigits: maximumFractionDigits|| 2,

minimumFractionDigits: minimumFractionDigits|| 2

console.log(format_with_toLocalString(123456789.58));

以上六种方法各有千秋，可以根据实际需求选择合适的方式实现金额的千分位格式化。

二、添加数字千分位逗号正则分析

1、当数字比较长时，为了方便阅读和快速判断大小，会每隔三位添加一个逗号。

2、为了实现这个效果方法很多。其中之一就是使用正则表达式。

3、这个方法简介，优雅。但是正则表达式看上去有点复杂。下面就对这个正则来个细致分解；

4、有了上述规则就能理解这个表达式了么？很明显还是不行。就跟理解一句复杂的英语一样，每一个单词都认识，但是依旧不能理解一句话是什么意思。

5、我们的目的是找到插入逗号的位置。平时使用正则都是获得匹配的字符串，而匹配位置可能感觉有点陌生。什么样子的正则会返回匹配的位置呢？答案是断言，也就是上述语法的?=,?!。它匹配到的内容不会保存到匹配结果中去，最终匹配结果只是一个位置而已。

6、例如：(?=ar)匹配后面跟着 ar的位置，如下图所示。

7、现在再回头看(?=(?!\b)(\d{3})+$)，就可以确定它返回的是满足条件的位置。满足什么条件呢？

8、至于/(?=(?!\b)(\d{3})+$)/g中的(?!\b)，是处理最前面可能出现的逗号。如图

9、上述内容如有不正之处，希望各位能积极指出。

10、正则表达式——正则表达式的匹配过程

11、正则表达式零宽断言详解（?=,?<=,?!,?<!）