js实现千位分隔符

更新日期: 2021-11-11 阅读: 2.8k 标签: 数字

在项目开发中需要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'
注意的是这个函数在没有指定区域的基本使用时,返回使用默认的语言环境和默认选项格式化的字符串,所以不同地区数字格式可能会有一定的差异。最好确保使用 locales 参数指定了使用的语言。
注:我测试的环境下小数部分会根据四舍五入只留下三位。比如:
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 位数字的倍数。替换表达式在那里放置一个逗号。
注意:这个函数如果小数点后有超过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"


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/10751

相关推荐

JS判断值是否是数字

isNaN()的缺点就在于 null、空格以及空串会被按照0来处理;对于空数组和只有一个数值成员的数组,isNaN返回false。校验只要是数字(包含正负整数,0以及正负浮点数)就返回true

JS实现数字金额转大写金额

由于js的弱精度,在计算小数相加时总是会丢失精度,JS将金额数字转大写的方法封装,数字大写对照表;下面为大家整理些常用的实现方法。

Js将负数转换为正数?

这是一种通用方法,我们首先检查数字是已经是正数还是负数,如果数字是负数,那么我们将数字乘以-1以使其为正数。使用Math.abs()方法将负数转换为正数。

Js中的无穷数(Infinity)

Infinity(无穷大)在 JS 中是一个特殊的数字,它的特性是:它比任何有限的数字都大,如果不知道 Infinity, 我们在一些运算操作遇到时,就会觉得很有意思。现在我们来看看 JS 中的Infinity 属性,了解用例并解决一些常见的陷阱。

Js如何从字符串中提取数字?

如果想要将一个字符串中的数字给提取出来,这要怎么做? 在JavaScript中可以使用match()方法将字符串中的数字提取到数字数组中。此方法将正则表达式作为参数,并从字符串中提取数字。使用match()方法提取数字分两种情况:

javascript如何判断两个数是否整除?

JavaScript判断两个整数(a,b,a>b)的整除时,可以用Number.isInteger(a/b)或者a%b==0来进行判断,但是如果其中涉及到小数就会导致计算过程中精度丢失。

javaScript保留三位有效数字

在之前的文章中有讲过保留两位小数的实现,最近在开发在开发活动页面时,依旧是展示参赛作品的点赞数。当点赞数过万时,显示三位有效数字来展示点赞数,例如:1.56万、23.1万等

vue限制文本框输入数字的正确姿势

最近遇到一个需求,需要限制文本框输入数字,而number类型的输入框有箭头,个人不是很喜欢,因此想要寻求其它途径实现。本想通过网上找个现成的插件,然而百度,谷歌一番都没有找到满意的答案,至于随手一搜出来的方案或多或少都有点缺陷。因此自己动手,丰衣足食。

JS中 Number()方法的两种用法

JS中,调用Number()主要有两种方式,一是作为一个 function 将任意类型的数据转换成数值,二是作为一个类,通过new 生成一个数值对象。其中第一种方式更常用。

你可能会错过的ES6数字和数学功能

ES6引入了各种数学和数字方法以及属性。在本文中,我们将介绍一些我们可能错过的有用的 Number 和 Math 属性。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!