当前位置:首页 > 知识分享 > 正文内容

今日知识分享js分割函数

2年前 (2023-05-27)知识分享48

在项目开发中需要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://www.longge2021.cn/zhideyikan/26314.html

分享给朋友:

“今日知识分享js分割函数” 的相关文章

晚安冻膜正确使用方法(晚安冻膜正确使用方法需要洗吗)

晚安冻膜正确使用方法(晚安冻膜正确使用方法需要洗吗)

冻膜怎么使用才是正确的  分步阅读 1 /3 1、面膜保养法 先涂上精华液再涂晚安冻膜,利用冻膜紧密贴服肌肤的压力,促进精华液的吸收。  粉刺型肌肤请在使用20~40分钟后,用清水洗去冻膜;一般性肌肤只需用卫生纸擦去多余部分,让冻膜仍在脸上留下薄。冻膜的正确用法  去黑头冻膜的正确使用方法:清洁 敷...

6款百元左右的纯粮白酒(百年牛栏山多少年一瓶)

6款百元左右的纯粮白酒(百年牛栏山多少年一瓶)

导语:6款百元左右,适合自饮的纯粮白酒,公认好喝,有您喝过的吗? 大家都知道,白酒就算是再便宜,喝的时候最好选择纯粮食酒,劣质的勾兑酒不仅喝的时候口感比较差,而且还很容易上头伤身体,而真正的纯粮好酒,喝完不仅不容易上头,对身体的伤害比较低,适量饮酒对身体也有一些好处。 平时生活...

如何建立淘宝网店(如何开网店淘宝步骤)

如何建立淘宝网店(如何开网店淘宝步骤)

想要成为淘宝店铺的商家,首先要做的就是拥有自己的淘宝店铺,这就需要进行店铺的注册,下面学得起课堂就详细的为大家介绍淘宝如何注册网店,淘宝注册网店的详细流程。1、淘宝账号申请还没有申 想要成为淘宝店铺的商家,首先要做的就是拥有自己的淘宝店铺,这就需要进行店铺的注册,下面学得起课堂就详细的为大家介绍淘...

有前景的专业(未来有发展前景的专业)

有前景的专业(未来有发展前景的专业)

对于很多考生和家长来说,选择专业一直是一个比较困难的事情,很多家长在报考志愿的时候,都会问专家,孩子学这个专业有没有前途。其实这是一个很笼统的问题,它包含了专业发展前景、对口行业的 对于很多考生和家长来说,选择专业一直是一个比较困难的事情,很多家长在报考志愿的时候,都会问专家,孩子学这个专业有没有...

可以赚钱的网站有哪些(分享6种可以赚钱的网站)

可以赚钱的网站有哪些(分享6种可以赚钱的网站)

每一个个人站长都具有相当大的执行力和爆发力,能够几天不睡觉,开发一套网站程序,构架一个大型的网站;更能够一夜之间让什么都没有的网站内容无数。这样的速度和执行力在公司是没有的,只有我 每一个个人站长都具有相当大的执行力和爆发力,能够几天不睡觉,开发一套网站程序,构架一个大型的网站;更能够一夜之间让什...

新品推广方案该怎么做(做新品推广方案从这3个方面入手)

新品推广方案该怎么做(做新品推广方案从这3个方面入手)

产品的更新和投入是保持企业活力和提高市场占有率竞争力的重要措施,如何有效的通过新品的市场投入和有效运作,更好的带动企业效益和利润的增加,是保证企业可持续发展的重要组成部分一、新品的 产品的更新和投入是保持企业活力和提高市场占有率竞争力的重要措施,如何有效的通过新品的市场投入和有效运作,更好的带动企...

手机照片怎么添加文字(手机怎样在图片上编辑文字)

手机照片怎么添加文字(手机怎样在图片上编辑文字)

如何给你的照片添加喜欢的文字,让照片变得更好看?赶快看过来,你可能会说用微信就可以,下面给你分享一种方法,效果会更好,操作还简单,更好的是还可以拼长图,赶快点赞关注收藏转发一下,和 如何给你的照片添加喜欢的文字,让照片变得更好看?赶快看过来,你可能会说用微信就可以,下面给你分享一种方法,效果会更好...

在家里的工作有哪些(正规长期在家可做的工作)

在家里的工作有哪些(正规长期在家可做的工作)

由于新冠肺炎,在家工作现在成为趋势。在家工作,也称为远程工作、远程办公、远程工作等,但远程工作并不是什么新鲜事。在家工作最早是在1979年发明的;作为一项实验,五名IBM员 由于新冠肺炎,在家工作现在成为趋势。在家工作,也称为远程工作、远程办公、远程工作等,但远程工作并不是什么新鲜事。在家工作最早...

共享单车多少寸轮胎(哈罗单车尺寸是24还是26)

共享单车多少寸轮胎(哈罗单车尺寸是24还是26)

如果有人告诉你他要送辆车给你,中置引擎后轮驱动,360度全景大天窗……妹子你可千万别天真的以为是这样的车:因为它也有可能是以下这几款:这几日的长沙城风和日丽,一些耐不住好天气的妹子和初春的梧桐树新芽一样蠢蠢欲动。正可谓— 如果有人告诉你他要送辆车给你,中置引擎后轮驱动,360度全景大天窗……妹子你...

五块钱的牛排是真的吗(五块钱的牛排能吃吗)

五块钱的牛排是真的吗(五块钱的牛排能吃吗)

五块钱的牛排肯定不是真的,超市比较便宜的牛排,或者网上卖的,都是属于合成牛排,这种是可以吃的,但肯定不是真牛排,吃起来的口感也不是很好,建议大家买原切牛排哦!五块钱的牛排是真的吗不是真的,很明显是合成牛排。就是牛身上的 五块钱的牛排肯定不是真的,超市比较便宜的牛排,或者网上卖的,都是属于合成牛排,...

2022年寒衣节允许十字路口烧纸吗(寒衣节十字路口烧纸晚上几点合适)

2022年寒衣节允许十字路口烧纸吗(寒衣节十字路口烧纸晚上几点合适)

寒衣节是很多北方地区都有的风俗习惯,但由于一些在外地上班的人无法回家为亲人烧纸,所以十字路口便成了很多友友都会去烧纸的地点,下面小编就和大家一起看看2022年寒衣节允许十字路口烧纸吗。2022年寒衣节允许十字路口烧纸吗看 寒衣节是很多北方地区都有的风俗习惯,但由于一些在外地上班的人无法回家为亲人烧...

2022双十一买苹果13还是14划算(2022双十一买iPhone最全攻略)

2022双十一买苹果13还是14划算(2022双十一买iPhone最全攻略)

对于想买新iPhone的朋友们来说,手上肯定是有预算的,究竟买iPhone13还是14完全看自己,如果预算不够首选iPhone13,毕竟性价比高,在双十一折扣肯定比去年618还要大,如果两款手机价格差距在双十一并不是很大 对于想买新iPhone的朋友们来说,手上肯定是有预算的,究竟买iPhone1...

红薯和螃蟹可以一起吃吗(吃了红薯可以吃螃蟹吗)

红薯和螃蟹可以一起吃吗(吃了红薯可以吃螃蟹吗)

板栗是生活中比较常见的一种食物,它吃起来粉粉糯糯的,含有多种营养成分,适量食用对身体有一定好处。板栗一般要吃熟的,不建议吃生的,半生半熟的板栗也可以吃,但是不容易消化,可能会引起肠胃不适。红薯和螃蟹可以一起吃吗红薯和螃蟹 板栗是生活中比较常见的一种食物,它吃起来粉粉糯糯的,含有多种营养成分,适量食...

轻颜相机xsmax原相机模式在哪(轻颜相机xsmax原相机模式为什么没有)

轻颜相机xsmax原相机模式在哪(轻颜相机xsmax原相机模式为什么没有)

很多网友表示iPhonexsmax原相机拍照模式可以吊打所以系列,很多人把xsmax留着也只是为了拍照。目前,轻颜相机更新了xsmax原相机模式,大家可以直接在里面寻找并进行拍照哦!轻颜相机xsmax原相机模式在哪1、当 很多网友表示iPhonexsmax原相机拍照模式可以吊打所以系列,很多人把x...

iPhone14双11买会便宜多少(iPhone14双十一有优惠吗)

iPhone14双11买会便宜多少(iPhone14双十一有优惠吗)

iPhone14双11肯定是有优惠的,毕竟在首发苹果14后,并没有什么抢购,因为苹果14和13差距不大,意义上没什么升级。那么,iPhone14双11买会便宜多少?iPhone14双十一有优惠吗?一起来看看久久派带来的详 iPhone14双11肯定是有优惠的,毕竟在首发苹果14后,并没有什么抢购,...