5种JavaScript实现千位分隔符的方法

敲代码的TKP

已于 2023-05-16 11:40:17 修改

阅读量5.8k

点赞数 5

分类专栏： javaScript html 文章标签： javascript 开发语言 ecmascript

于 2023-04-24 11:03:47 首次发布

TKP

本文链接：https://blog.csdn.net/TKP666/article/details/130338258

版权

javaScript 同时被 2 个专栏收录

48 篇文章 4 订阅

订阅专栏

html

16 篇文章 0 订阅

订阅专栏

本文介绍了在JavaScript中实现数字添加千位分隔符的五种方法，包括使用toLocaleString方法、循环处理、正则表达式、Intl.NumberFormat以及自定义函数。这些方法分别适用于不同场景和兼容性需求。

摘要由CSDN通过智能技术生成

在项目开发中需要js实现千位分隔符来分割一个整数，比如我想将数字 1234567 显示为“1,234,567”。我该怎么实现呢？

方法一、toLocaleString

Number.prototype.toLocaleString。它是在 JavaScript 1.5（于 1999 年推出）中实现的，因此基本上所有主要浏览器都支持它。

var num = 12345.1234
num.toLocaleString();//'12,345.123'

方法二、利用循环

实现思路是将数字转换为字符数组，再循环整个数组，每三位添加一个分隔逗号，最后再合并成字符串。

function numberWithCommas(x) {
    x = x.toString();
    var pattern = /(-?\d+)(\d{3})/;
    while (pattern.test(x))
        x = x.replace(pattern, "$1,$2");
    return x;
}
numberWithCommas(12312124545);//'12,312,124,545'
numberWithCommas(123121245.45);//'123,121,245.45'

方法三、正则表达式和replace函数

使用正则表达式和replace函数，相对前两种我更喜欢这种方法，虽然正则有点难以理解。

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

方法四：Intl.NumberFormat

原生js功能。支持 IE11、Edge、最新的 Safari、Chrome、Firefox、Opera、iOS 上的 Safari 和 Android 上的 Chrome。
可以把普通的数字，转换成不同的货币和格式样式字符串。

let number = 1234567890;
let nf = new Intl.NumberFormat('en-US');
nf.format(number); // "1,234,567,890"

方法五：js实现

function paddingNum(inputNum) {
    let flag = inputNum > 0 ? true : false;
    let numArr = Math.abs(inputNum).toString().split('.');
    let right = numArr[1] ? '.' + numArr[1] : '';   // 小数点右边的数字
    let left = numArr[0];  // 小数点左边的数字
    let temp = '';
    while (left.length > 3) {
        // str.slice(start, end); 截取字符串，返回截取的字符串，end取不到
        temp = ',' + left.slice(-3) + temp;
        left = left.slice(0, left.length - 3);
    }
    return flag ? left + temp + right : '-' + left + temp + right;
}
console.log(paddingNum(2, 3));        // return '33'
console.log(paddingNum(1234.56));     // return '1,234.56'
console.log(paddingNum(123456789));   // return '123,456,789'
console.log(paddingNum(-987654.3));   // return '-987,654.3'