JS 实现千分位分隔符
方法一:最简单的实现(API)
parseFloat(1000000.88).toLocaleString()
// 整数型
parseInt(1000000.88).toLocaleString()
缺点:兼容性不是很好
你可能还不知道 JavaScript 的 toLocaleString 还可以这么玩。
123456789..toLocaleString('zh-hans-cn-u-nu-hanidec',{useGrouping: false}); //"一二三四五六七八九"
123456789..toLocaleString('zh-hans-cn-u-nu-hanidec',{useGrouping: true}); //"一二三,四五六,七八九"
new Date().toLocaleString('zh-hans-cn-u-nu-hanidec'); //"二〇一九/五/二九 下午三:一五:四〇"
方法二:除法+求模(性能最好)
function format_with_mod(number) {
let n = number;
let r = '';
let temp = '';
do {
// 求模的值, 用于获取高三位,这里可能有小数
mod = n % 1000;
// 值是不是大于1,是继续的条件
n = n / 1000;
// 高三位
temp = ~~mod;
// 1.填充: n > 1 循环未结束, 就要填充为比如 1 => 001
// 不然temp = ~~mod的时候, 1 001, 就会变成 "11"
// 2.拼接“,”
r = (n >= 1 ? `${temp}`.padStart(3, '0') : temp) + (!!r ? ',' + r : '');
} while (n >= 1);
const strNumber = number + '';
let index = strNumber.indexOf('.');
// 拼接小数部分
if (index >= 0) {
r += strNumber.substring(index);
}
return r;
}
console.log(format_with_mod(1234567893.99));
方法三:正则匹配
function format_with_regex(number) {
var reg = /\d{1,3}(?=(\d{3})+$)/g;
return (number + '').replace(reg, '$&,');
}
function format_with_regex(number) {
var reg = /(\d)(?=(?:\d{3})+$)/g
return (number + '').replace(reg, '$1,');
}
方法四:数组分割
function format_with_array(number) {
// 转为字符串,并按照.拆分
const arr = (number + '').split('.');
// 整数部分再拆分
const int = arr[0].split('');
// 小数部分
const fraction = arr[1] || '';
// 返回的变量
let r = '';
int.reverse().forEach(function (v, i) {
// 非第一位并且是位值是3的倍数,添加“,”
if (i !== 0 && i % 3 === 0) {
r = v + ',' + r;
} else {
// 正常添加字符(这是好写法)
r = v + r;
}
});
// 整数部分和小数部分拼接
return r + (!!fraction ? '.' + fraction : '');
}
// 测试用例
console.log(format_with_array(1234567893.99));
进阶版:
function formatNumber(str){
return str.split("").reverse().reduce((prev,next,index) => {
return ((index%3)? next: (next+',')) + prev;
})
}
formatNumber("1234567890");
方法五:字符截取
function format_with_substring(number) {
// 数字转为字符串,并按照 .分割
let arr = (number + '').split('.');
let int = arr[0] + '';
let fraction = arr[1] || '';
// 多余的位数
let f = int.length % 3;
// 获取多余的位数,f可能是0, 即r可能是空字符串
let r = int.substring(0, f);
// 每三位添加','金额对应的字符
for (let i = 0; i < Math.floor(int.length / 3); i++) {
r += ',' + int.substring(f + i * 3, f + (i + 1) * 3);
}
// 多余的位数,上面
if (f === 0) {
r = r.substring(1);
}
// 调整部分和小数部分拼接
return r + (!!fraction ? '.' + fraction : '');
}
console.log(format_with_substring(12112123313.78));
方法六:普通版
// 数字格式化 1234567890 --> 1,234,567,890
function formatNumber(str){
var arr = [];
var count = str.length;
while(count>=3){
arr.unshift(str.slice(count - 3, count));
count -= 3;
}
// 如果是不是3的倍数就另外追加到上去
str.length % 3 && arr.unshift(str.slice(0, str.length % 3));
return arr.toString();
}
formatNumber('1234567890')
方法七:自定义
function fn(num, sep, size) {
// 将用户传入的数字转为字符串
num += "";
// 使用字符串的split方法将其分隔成数组,然后在使用reverse方法进行反转数组
let numArr = num.split("").reverse();
// 通过用户传入的分割位数来确定需要将数值分为几组
let group = parseInt(numArr.length / size);
// 定义一个新数组用来存放添加分隔符的数组
let resArr = []
// 设置一个变量来控制数组分割的起始和终止
let i = 0;
while (group) {
// 确定分隔符的位置
resArr = [...resArr, ...numArr.slice(size * i, size * (i + 1)), sep]
group--;
i++;
}
// 表示参与分割的数组元素个数
const restIndex = resArr.length - parseInt(numArr.length / size);
// 将没参与分组的元素添加到已经添加分隔符的数组中
resArr = [...resArr, ...numArr.slice(restIndex)]
// 将分隔好的数组反转,并转为字符串。
let strNum = resArr.reverse().join('')
if (strNum[0] === sep) {
strNum = strNum.slice(1)
}
return strNum;
}
console.log(fn(12345678, ',', 3)) //12,345,678