js实现千位分隔符
在项目开发中需要Js实现千位分隔符来分割一个整数,比如我想将数字 1234567 显示为“1,234,567”。我该怎么实现呢?
方法一、利用循环
实现思路是将数字转换为字符数组,再循环整个数组, 每三位添加一个分隔逗号,最后再合并成字符串。
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'方法二、toLocaleString
Number.prototype.toLocaleString。它是在 JavaScript 1.5(于 1999 年推出)中实现的,因此基本上所有主要浏览器都支持它。
var num = 12345.1234
num.toLocaleString();//'12,345.123'注:我测试的环境下小数部分会根据四舍五入只留下三位。比如:
var b=1234.4542;
b.toLocaleString();//'1,234.454'方法三、正则表达式和replace函数
使用正则表达式和replace函数,相对前两种我更喜欢这种方法,虽然正则有点难以理解。
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}正则表达式使用 2 个前瞻断言:
- 一个正数,用于在字符串中查找其后连续 3 位数字的任何点,
- 一个否定断言,以确保该点只有 3 位数字的倍数。替换表达式在那里放置一个逗号。
function numberWithCommas(x) {
var parts = x.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return parts.join(".");
}更简洁,最终代码:
function numberWithCommas(x) {
return x.toString().replace(/\B(?<!\.\d*)(?=(\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"更多实例:
var number = 123456.789;
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"
// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// expected output: "¥123,457"
// limit to three significant digits
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
// expected output: "1,23,000"本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!