js数字千位分割的常用方法

系统管理员 2022-10-14 00:40 182阅读 0赞

### 文章目录 ###

*   *  方法一：遍历每3位添加 " , "
     *  方法二：toLocaleString
     *  方法三：正则匹配和replace

**把普通的数字转换为带千位分隔符格式的数字字符串是一个非常常见的问题，  
千位分隔符格式的规则是数字的整数部分每三位一组，以“，”分节。小数部分不分节 。  
示例：12,345,678.23456**  
`注：只针对number所以不做其他类型的校验`

## 方法一：遍历每3位添加 " , " ##

const numFormat1 = param => { 
    		const num = param + '';
    		const numGroup = num.includes('.') ? num.split('.') : [num];
    		const intFn = numStr =>
    			numStr
    				.split('')
    				.reverse()
    				.reduce((prev, next, index) => { 
    					return (index % 3 ? next : next + ',') + prev;
    				});
    		const intNum = intFn(numGroup[0]);
    		const floatNum = numGroup[1] ? '.' + numGroup[1] : '';
    		return intNum + floatNum;
    	};

## 方法二：toLocaleString ##

使用JS自带的函数 [toLocaleString][]

> numObj.toLocaleString(\[locales \[, options\]\]) `注:小数部分自动四舍五入了`

toLocaleString() 方法返回这个数字在特定语言环境下的表示字符串。

let num1 = 12345678912345;
    	let num2 = 987654.321056;
    	
    	console.log(num1.toLocaleString());  // "12,345,678,912,345"
    	console.log(num2.toLocaleString());  // "987,654.321" （小数部分四舍五入了）

## 方法三：正则匹配和replace ##

> str.replace(regexp|substr, newSubStr|function)

const numFormat = num => { 
    	  return num.toString().replace(/\d+/, function(n){  // 先提取整数部分
    	       return n.replace(/(\d)(?=(\d{3})+$)/g, function($1){ 
    	          return $1 + ",";
    	       });
    	  })
    	}

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