JavaScript将数字格式化为千分位字符串

问题描述就是,将数字格式化为千分位字符串,同时保留两位小数。

比如:
123456->123,456.00
123456.7890-> 123,456.78

这类问题可以使用三种方法,不只是针对以上问题。
先从简单的入手,如果不考虑保留小数位数。
【方法一】可以使用num.toLocaleString('en-US')方法,不过该方法的弊端就是只能用于数字。

var num = 12345.6789;
var str = num.toLocaleString('en-US');
console.log(str);   // '12,345.679'

该方法返回的是一个字符串。


接下来,考虑没有小数点的情况。
【方法二】正则替换
var str = '12345678';
var str_new = str.replace(/\d{1,3}(?=(\d{3})+$)/g, function(s){
	return s+',';
});
console.log(str_new);  // '12,345,678'

这里使用replace正则替换方法,replace中的第一个参数是一个正则表达式。

  • /g就表示全局进行搜索替换。
  • (?=exp)是利用零宽度正预测先行断言,可以理解为正则表达式需要先行满足的条件。(?=(\d{3})+$)先行满足的条件就是有一组或多组三个数字。
  • (\d{3})表示分组,也就是replace中第二个参数function中的参数s,将s替换为s+’,’。

接下来考虑带上小数点的情况。
【方法三】转成数组,翻转,替换
首先需要将数字型的变量格式化为固定小数位数的字符串,使用到的方法是`toFixed(位数)`。
var num = 12345678;
var str = num.toFixed(2);
console.log(str);  // '12345678.00'

该方法返回的也是一个字符串,所以想用方法一直接转化为千分位字符串是行不通的了,而且目前也已经带有小数点,所以方法二也不行。

var s = str.split(".")[0].split("").reverse().join("").replace(/(\d{3})+?/g, function(s){
	return s+',';
}).split("").reverse().join("")+'.'+str.split(".")[1];
console.log(s);   // '12,345,678.00'

代码看起来稍微有点长,我们来分析一下

  • 首先利用split(".")将字符串拆分成整数和小数部分,构成一个数组。
  • 然后将整数部分的字符串取出,也就是str.split(".")[0],进行逆序【由于字符串无内置的逆序方法,所以需要先拆分为数组,再逆序,然后再合并】,也就是接下来的一串代码split("").reverse().join("")
  • 将逆序后的整数部分利用正则替换,3个为一组将s替换为s+’,’。
  • 将替换后的字符串逆序。
  • 最后将小数部分拼接起来+'.'+str.split(".")[1]

这道题其实是我昨天面试的时候碰上的题,本菜狗当时觉得怎么会有这么难的题,面试完也很难过,今天再静下心来仔细看,发现也没什么难的,只是之前并没有见过而已。总之,加油就好啦,努力才会变得很厉害。与大家共勉。

你可能感兴趣的:(前端,javascript,正则表达式,前端)