四两拨千斤,一招搞定数字格式化问题

2023-11-10 21:50

本文主要是介绍四两拨千斤,一招搞定数字格式化问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

问题描述

今天在处理一个数字的格式显示问题时,遇到下面的一些需求:

  • 可以显示千分符
  • 可以显示百分比
  • 可以显示小数位数

如下图,如果勾选的话就使能该项设置。

百分比和小数位数比较好解决,百分比只需要在源数字后面加两个零再加上百分号;小数只需要在小数点后面加零即可。最主要的是千分符的处理,好,就来说千分符。

千分符问题

数字千分符的处理有很多处理方案,最主要的有下面几种。

方法一:循环遍历

思路:

将数字转换成字符串,然后倒序遍历取值,每取3个字符插入一个,逗号,直到遍历到第一个字符。

代码很简单,如下:

function numberFormat(num) {let result = '';let count = 1;let nums = num.toString();for (let i = nums.length - 1; i >= 0; i--) {result = nums.charAt(i) + result;if (!(count % 3) && i != 0) { result = ',' + result; }count++;}return result;
}numberFormat(12345678); // 12,345,678

方法二:正则

思路:

该正则的思路就是从数字的第一个字符开始找,找到满足该数字后面的数字个数为3的倍数的这个数字,然后在该数字替换成数字,的形式,然后继续往下找......

语法如下:

let regExp = /(\d)(?=(\d{3})+$)/g;

示例:

String(12345678).replace(/(\d)(?=(\d{3})+$)/g, "$1,");

解释:

首先\d 表示数字,然后以?=(\d{3})+ 结尾的即满足条件。所以最主要是这个 ?=(\d{3})+ 表达式。

正向预测 ?=n,表示匹配任何其后紧接指定字符串 n 的字符串。 再结合\d 表示,如果一个数字后面满足字符串n这个规则,那么就将匹配到的这个数字(假如是1)替换成1,

所以现在的问题是字符串n这个规则是什么,是(\d{3})+ 这个东西,这个表示数字的个数为3的倍数(倍数为1~n之间)。

所以整个表达式的意思就是:从第一个数字开始看起,看这个数字后面的数字个数是不是3的倍数,是的话将这个数字(假如是1)替换成1,的形式,然后继续下一个数字直到结尾。

说明:

  • g是表示全局匹配的修饰符,全局匹配指查找所有匹配而非在找到第一个匹配后停止。
  • $是表示结尾的量词,如n$,匹配的是任何以n为结尾的字符串。
  • \d是查找数字的元字符。
  • n{X}是匹配包含 X 个 n 的序列的字符串的量词。
  • + 匹配前面的子表达式一次或多次;* 匹配前面的子表达式0次或多次。?匹配前面的子表达式0次或1次,或指明一个非贪婪限定符。
  • ?=n正向预查,用于匹配任何其后紧接指定字符串 n 的字符串。
  • match() String对象的方法,作用是找到一个或多个正则表达式的匹配。
  • replace() String对象的方法,作用是替换与正则表达式匹配的子串。
  • \B是表示匹配非单词边界的元字符,与其互为补集的元字符是\b,表示匹配单词边界。

方法三(推荐👍):toLocaleString

根据 MDN 解释, number.toLocaleString() 方法返回这个数字number在特定语言环境下的表示字符串。

简单的使用:

var number = 3500;console.log(number.toLocaleString()); // 3,500

我们直接调用该函数就可以得到问题的结果。但其实,该函数的功能不止于此,这就需要分析它的参数了。

语法:

numObj.toLocaleString([locales [, options]])
  • locales : (可选)表示以哪国的数字表示形式。
  • options: (可选)表示数字的显示样式(比如要不要显示小数位数,显示几位?要不要显示百分比?等等)
locales

一般可以填下面几个数值:

  • en-US : 美国( 中文场景下默认值)
  • zh-CN : 中国
  • en-GB : 英国
  • ko-KR : 韩国
  • ar-EG : 阿拉伯
  • de-DE : 德国
  • en-IN : 印度
  • ja-JP : 日本
  • ...
  • (更多的国家参考链接: ISO Language Code Table )
options

options对象的属性就有很多了,下面列举一个常用的属性。

  • style : 默认为 decimal ,表示十进制格式, currency表示货币格式, percent表示百分比格式。
  • currency : 如果style设置为currency,则该属性设置货币符号(USD 表示美元, EUR 表示欧元, or CNY是人民币等等,更多符号参考链接: https://www.currency-iso.org/en/home/tables/table-a1.html )
  • useGrouping : 是否使用千分符,默认为true
  • minimumIntegerDigits :设置整数最小位数(当整数位数不足时,在前面加0)
  • minimumFractionDigits : 设置小数数最小位数。

而这些属性不仅可以满足文章开头提出的问题,也可以满足我们日常常用到的数字的格式表示。那么我们就来康康怎么使用吧!

示例:

  • 设置整数部分为5位,小数部分为2位,不使用千分符格式
Number(123).toLocaleString('zh-CN', {style: 'decimal',useGrouping: false,minimumIntegerDigits : 5,minimumFractionDigits: 2
}) // 00123.00
  • 设置两位小数的百分比显示
Number(123).toLocaleString('zh-CN', {style: 'percent',minimumFractionDigits: 2
}) // 12,300.00%
  • 设置欧元货币
Number(123).toLocaleString('zh-CN', {style: 'currency',currency: 'EUR',minimumFractionDigits: 2
}) // €123.00

toLocaleString扩展

除了数字本地化格式之外,还有日期,数组,对象等等一系列的本地化处理,由于篇幅有限,这里不再展开,可以自行去 MDN 查找相关内容,基本上用法都是类似的。


最后,如果看完有收获,就动动小手点个赞再走呗,笔芯。

这篇关于四两拨千斤,一招搞定数字格式化问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/385487

相关文章

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

全面解析MySQL索引长度限制问题与解决方案

《全面解析MySQL索引长度限制问题与解决方案》MySQL对索引长度设限是为了保持高效的数据检索性能,这个限制不是MySQL的缺陷,而是数据库设计中的权衡结果,下面我们就来看看如何解决这一问题吧... 目录引言:为什么会有索引键长度问题?一、问题根源深度解析mysql索引长度限制原理实际场景示例二、五大解决

Springboot如何正确使用AOP问题

《Springboot如何正确使用AOP问题》:本文主要介绍Springboot如何正确使用AOP问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录​一、AOP概念二、切点表达式​execution表达式案例三、AOP通知四、springboot中使用AOP导出

Python中Tensorflow无法调用GPU问题的解决方法

《Python中Tensorflow无法调用GPU问题的解决方法》文章详解如何解决TensorFlow在Windows无法识别GPU的问题,需降级至2.10版本,安装匹配CUDA11.2和cuDNN... 当用以下代码查看GPU数量时,gpuspython返回的是一个空列表,说明tensorflow没有找到

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》:本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM

IDEA Maven提示:未解析的依赖项的问题及解决

《IDEAMaven提示:未解析的依赖项的问题及解决》:本文主要介绍IDEAMaven提示:未解析的依赖项的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录IDEA Maven提示:未解析的依编程赖项例如总结IDEA Maven提示:未解析的依赖项例如

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具:gofmt 与 go fmt(一)

Redis分片集群、数据读写规则问题小结

《Redis分片集群、数据读写规则问题小结》本文介绍了Redis分片集群的原理,通过数据分片和哈希槽机制解决单机内存限制与写瓶颈问题,实现分布式存储和高并发处理,但存在通信开销大、维护复杂及对事务支持... 目录一、分片集群解android决的问题二、分片集群图解 分片集群特征如何解决的上述问题?(与哨兵模