实现数字千分位分隔

简介: 实现数字千分位分隔

方法一:Number.prototype.toLocaleString()


返回这个数字在特定语言环境下的表示字符串。


该方法的详细介绍请看mdn developer.mozilla.org/zh-CN/docs/…


let num = 123456789;
num.toLocaleString()// "123,456,789"


该方法的很方便,但是兼容性不是很好


网络异常,图片无法展示
|


方法二: 通过正则匹配


let num = '12345678'
    let reg = /(?=\B(\d{3})+$)/g
    console.log(num.replace(reg,",")) //12,345,678


方法三: 自定义方法分隔


实现思路:


  • 将用户传入的数字转为字符串。


  • 使用字符串的split方法将其分隔成数组,然后在使用reverse方法进行反转数组。


  • 通过用户传入的分割位数来确定需要将数值分为几组。


  • 定义一个新数组用来存放添加分隔符的数组。


  • 通过分组数来循环确定分隔符的位置。


  • 传入的分割位数刚好将数组分组,可能分割符出现在第一位,这时我们需要删除该分隔符,然后反转该添加完分隔符的数组,最后通过join方法转为字符串。


function fn(num, sep, size) {
      num += "";
      let numArr = num.split("").reverse();
      let group = parseInt(numArr.length / size);
      let resArr = []
      // 设置一个变量来控制数组分割的起始和终止
      let i = 0;
      while (group) {
        // 确定分隔符的位置
        resArr = [...resArr, ...numArr.slice(size * i, size * (i + 1)), sep]
        group--;
        i++;
      }
      // 表示参与分割的数组元素个数
      const restIndex = resArr.length - parseInt(numArr.length / size);
      // 将没参与分组的元素添加到已经添加分隔符的数组中
      resArr = [...resArr, ...numArr.slice(restIndex)]
      // 将分隔好的数组反转,并转为字符串。
      let strNum = resArr.reverse().join('')
      if (strNum[0] === sep) {
        strNum = strNum.slice(1)
      }
      return strNum;
    }
    console.log(fn(12345678, ',', 3)) //12,345,678


相关文章
|
前端开发 JavaScript 算法
轻松实现数字格式化:JavaScript 中的千分位分隔技巧大揭秘
轻松实现数字格式化:JavaScript 中的千分位分隔技巧大揭秘
967 0
|
数据采集 编解码 运维
PMU
PMU
822 1
|
SQL 网络协议 程序员
计算机网络体系结构图解
计算机网络体系结构图解
1299 0
|
3月前
|
Windows
windows错误0x80070057?各种安装软件时出现参数错误0x80070057解决办法
本文介绍了Windows系统中常见的错误代码0x80070057的解决方法。该错误通常出现在安装IIS、Edge浏览器、系统更新或文件复制等操作中。文章推荐使用FixWin 11这款修复工具,帮助用户快速解决此类问题。工具支持多种Windows系统问题修复,操作简单,适合普通用户使用。
521 0
|
4月前
|
Web App开发 前端开发 JavaScript
CSS :has() 选择器:改变游戏规则的父选择器
CSS :has() 选择器:改变游戏规则的父选择器
658 95
|
9月前
|
前端开发 JavaScript
如何使用CSS过渡实现页面元素的淡入淡出效果?
如何使用CSS过渡实现页面元素的淡入淡出效果?
426 79
|
JavaScript 前端开发 索引
JavaScript获取url网址中域名后面的部分
如何截取 url 中网站域名之后的部分,需要用到以下几个方法:
326 3
|
JavaScript
如何在Vue页面中引入img下的图片作为背景图。../的使用
这篇文章介绍了在Vue页面中如何引入`img`目录下的图片作为背景图,提供了两种使用相对路径的方法。第一种是使用`../assets/img/`作为路径引入图片,第二种是使用`../../assets/img/`作为路径。文章还展示了使用这些方法的代码实现和效果展示,并鼓励读者学无止境。
如何在Vue页面中引入img下的图片作为背景图。../的使用
|
数据采集 JSON 监控
高效爬取Reddit:C#与RestSharp的完美结合
本文介绍了如何使用C#和RestSharp库,结合代理IP与多线程技术爬取Reddit数据。在数据驱动时代,Reddit作为宝贵的资料来源,其频繁更新带来了爬取挑战。通过代理服务器隐藏真实IP防止封禁,利用多线程提高并发性,文章提供代码示例展示如何实现高效爬取。关键点包括代理配置、请求头设置和数据解析统计。同时强调遵守网站条款和法律道德边界。
370 6
高效爬取Reddit:C#与RestSharp的完美结合
|
网络协议
阿里云服务器搭建DNS解析服务步骤
在阿里云搭建DNS解析服务,首先注册阿里云账号并购买适合的云服务器。获取服务器公网IP后,配置服务器并安装DNS软件如Bind9。接着设置DNS解析,包括定义顶级和子域名的指向。最后,通过ping测试或浏览器访问验证DNS解析功能是否正常。
1378 19

热门文章

最新文章