前端 - 三种方式给数字加上千分位分隔符

点击打开视频讲解

使用toLocaleString方法

 let num = 1234567num = num.toLocaleString() console.log(num)// 1,234,567

使用正则表达式

 // 千分位标注const setThousandsMark = (num) => {if(num){num = num + ''let reg = /(?!^)(?=(\d{3})+$)/g;return num.replace(reg, ",")}return num;}

使用js分隔符（可从小数点前添加分隔符）

 // 千分位标注const setThousandsMark = (num) => {if(!num) return num;let str = num.toString() // 数字转字符串let str2 = null// 如果带小数点if (str.indexOf('.') !== -1) { // 带小数点只须要解决小数点右边的const strArr = str.split('.') // 依据小数点切割字符串str = strArr[0]// 小数点右边str2 = strArr[1]// 小数点左边//如12345.678  str=12345，str2=678}let result = ''// 后果while (str.length > 3) { // while循环 字符串长度大于3就得增加千分位// 切割法 ，从后往前切割字符串 ⬇️result = ',' + str.slice(str.length - 3, str.length) + result // 切割str最初三位，用逗号拼接 比方12345 切割为 ,345// 用result接管，并拼接上一次循环失去的resultstr = str.slice(0, str.length - 3) // str字符串剥离下面切割的后三位，比方 12345 剥离成 12}if (str.length <= 3 && str.length > 0) {// 长度小于等于3 且长度大于0，间接拼接到result// 为什么能够等于3 因为下面result 拼接时候在后面带上了‘,’// 相当于123456 上一步解决完之后 result=',456' str='123'result = str + result}// 最初判断是否带小数点（str2是小数点左边的数字）// 如果带了小数点就拼接小数点左边的str2 ⬇️str2 ? result = result + '.' + str2 : ''return result}

前端 - 三种方式给数字加上千分位分隔符相关推荐

返回参数数字的千分位分隔符字符串
返回参数数字的千分位分隔符,每千位划一个分隔符,因为位数不确定,所以选用递归的方式 <!DOCTYPE html> <html><head><meta cha ...
返回参数数字的千分位分隔符字符串+按指定长度切割数组
刷题的时候刷到了返回参数数字的千分位分隔符字符串的题目题目:返回参数数字的千分位分隔符字符串输入:12345 输出:12,345输入:1234567 输出:1,234,567 (很抓马,我的脑袋空 ...
word文档怎么给数字加千分符_如何给word文档中的数字添加千分位分隔符
展开全部准备工具/材料:windows10Build10158版本,Excel 2013版本. 1.此演示操作中使用的办公软件是Excel 2013版本. 2.windows10Build10158 ...
数字加千分位分隔符，加货币符号，数字转百分数
想必大家在做前端开发的过程中或多或少都会需要显示数字或是金钱,或是百分数,或是小数位取有效数字.Number.parseFloat(x).toFixed(2)或许可以解决取有效数字的问题,但是其他的就 ...
数字实现千分位分隔符
方法一(被处理的必须为 Number 类型) let str = 123456789; y.toLocaleString() //123,456,789 方法二(被处理的为String类型的数字) l ...
js 数字的千分位分隔符函数
function _comma(number) {// 补全代码let string = number.toString();let arr = string.split(""). ...
数字滚动原生js的三种方式
数字滚动原生js的三种方式让数字滚动的效果简单用计时器setInterval就能轻易的实现,例如 <!DOCTYPE html> <html><head>< ...
BootstrapTable之千分位分隔符设置
BootstrapTable之千分位分隔符设置前言在最近的工作中遇到了数字数据显示千分位分隔符的需求,这是数字显示中常见的需求,好在BootstrapTable中可以很容易的实现,具体思路为:写一 ...
前端请求后端数据的三种方式！
在前后端分离的开发项目中,前后端联调的时候会出现这样那样的问题,尤其是在调取数据的程序上面,有时候前端给的前端给到后端的明明是正确的但就是无法拿到正确的数据,下面小千就来给大家详解一下常见的三种数据传 ...

前端 - 三种方式给数字加上千分位分隔符

前端 - 三种方式给数字加上千分位分隔符相关推荐

最新文章

热门文章