做手机端页面我们常常遇到数字,而在Safari浏览器下这些数字会默认显示电话号码,于是我们就用到了补坑的方法加入<meta>标签:

<meta name="format-detection" content="telephone=no">
这个标签的意义在于将数字不被看成电话号码,于是就万事大吉了O(∩_∩)O,但是如果是一个订餐电话,那么在加入这个标签之后,订餐电话就变成了数字,就不能直接拨号了于是乎我们想到了用千位符老表示数字从而区分电话号码和数字 千位符

在西方,在表示很大的数字的时候,会以每3位为一个间隔进行分隔,分隔的符号就是英文逗号,由于中文里面,第3位是“千”,因此,数字中的这个“逗号”也被称为“千位分隔符”。

之所以会以每3位进行分隔,是英文的读数有关的,举个例子:英语的987,654,321读法是: nine hundred and eighty-seven billion six hundred and fifty-four thousand three hundred and twenty-one。

其关键的数值单位,如billionthousand正好就是千分分隔符的位置。可见这种分隔是和西方数值阅读方法相辅相成的。

但是对于中文用户而言,这种风格反而是一种尴尬。我们的大数值单位主要就是“万”和“亿”,如果按照这种标准进行分割的话,应该是每4位进行分隔。所以,当我们一开始看到3位分隔的数字的时候,一定会奇怪这分隔的方式有些不按套路。

那有没有解决的办法呢;

办法一:

方法一:使用正则表达式


语法如下:


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

举例:


String(123456789).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
办法二:

方法二:使用toLocaleString()方法


语法如下:


Number.toLocaleString('en-US');

举例:


(123456789).toLocaleString('en-US');

结果是:123,456,789


对于中文场景下,toLocaleString('en-US')中的'en-US'理论上是可以缺省的,也就是直接(123456789).toLocaleString()也是可以得到123,456,789。但是如果你的产品可能海外用户使用,则保险起见,还是保留'en-US'


另外,对于IE edge之前的版本,Number.toLocaleString()会自动补上两位小数,如果是不需要的,需要自己额外过滤掉。


使用千位分隔符(逗号)表示web网页中的大数字的更多相关文章

  1. 请使用千位分隔符(逗号)表示web网页中的大数字

    方法一:使用正则表达式 语法如下: String(Number).replace(/(\d)(?=(\d{3})+$)/g, "$1,"); 举例: String(12345678 ...

  2. 千位分隔符在web开发中的作用

    有千位分隔符会被认为是数字,否则在移动端会被直接识别成手机号 在开发实战中主流实现方式是添加meta标签 <meta name="format-detection" cont ...

  3. JS给数字加千位分隔符

    本文原链接:https://www.jianshu.com/p/928c68f92c0c JavaScript实现千位分隔符 将普通的数字转换为带千位分隔符格式的数字字符串是一个非常常见的问题,千位分 ...

  4. js千位符 | js 千位分隔符 | js 金额格式化

    js 千位分隔符 千位分隔符,其实就是数字中的逗号.依西方的习惯,人们在数字中加进一个符号,以免因数字位数太多而难以看出它的值.所以人们在数字中,每隔三位数加进一个逗号,也就是千位分隔符,以便更加容易 ...

  5. 千位分隔符(js 实现)

    最近被同事问到js如何实现给长数字添加千位分隔符,即 1344444 ---> 13,444,444 这是一个很常见的前端面试题.看起来简单,刚开始我都懒得写. 仔细一想,挺考逻辑的,实现方法有 ...

  6. golang 千位分隔符

    项目需求将统计出的数字以千位分隔符分隔的形式展示(如将 1234567.89 格式化为 1,234,567.89),而 golang 的标准库中并无这样的函数. 万能的 google 找到解决办法,可 ...

  7. web网页中使用vlc插件播放相机rtsp流视频

    可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 使用vlc进行二次开发做自己的播放器 vlc功能还是很强大的,有很多的现成的二次开发接口,不需配置太多即可轻松做客户端播放 ...

  8. Web网页中动态数据区域的识别与抽取 Dynamical Data Regions Identification and Extraction in Web Pages

    Web网页中动态数据区域的识别与抽取 Dynamical Data Regions Identification and Extraction in Web Pages Web网页中动态数据区域的识别 ...

  9. C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸

    BIMFACE二次开发系列目录     [已更新最新开发文章,点击查看详细] 在前一篇博客<C#开发BIMFACE系列49 Web网页集成BIMFACE应用的技术方案>中介绍了目前市场主流 ...

随机推荐

  1. shell 之解释器、变量、字符串、数组

    1.Shell简介 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言.Shell 是指一种应用程序,这个应用程序提供了一个 ...

  2. python基础教程(十一)

    迭代器 本节进行迭代器的讨论.只讨论一个特殊方法---- __iter__  ,这个方法是迭代器规则的基础. 迭代器规则 迭代的意思是重复做一些事很多次---就像在循环中做的那样.__iter__ 方 ...

  3. sqlplus命令历史解决方案

    在Linux上使用sqlplus比较痛苦,因为不能使用上下方向键来调出命令历史,也不能使用左右键移动光标对输入的命令进行修改,甚至连Backspace键都不能用(不过我发现大部分Backspace不能 ...

  4. poj 1330 LCA最近公共祖先

    今天学LCA,先照一个模板学习代码,给一个离线算法,主要方法是并查集加上递归思想. 再搞,第一个离线算法是比较常用了,基本离线都用这种方法了,复杂度O(n+q).通过递归思想和并查集来寻找最近公共祖先 ...

  5. AppiumDesktop用法介绍

    转自:http://www.jianshu.com/p/bf1ca3d4ac76 写这篇文章的心情 真的很开心,我看着官网介绍竟然对AppiumDesktop略懂皮毛了.今天特意写出来,希望可以帮助一 ...

  6. Swing-布局管理器之BorderLayout(边界布局)-入门

    注:本文内容基本源于Java图形化界面设计——布局管理器之BorderLayout(边界布局),笔者学习过程中根据自身理解进行少量编辑. 边界布局管理器(BorderLayout)把容器的的布局分为五 ...

  7. 201521123101 《Java程序设计》第5周学习总结

    1. 本周学习总结 2. 书面作业 1. 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 不能 ...

  8. #黑客社会工程学攻防演练#[Chapter 1]

    1.1 什么是社会工程学 社会工程学(Social Engineering)是关于建立理论通过自然的.社会的和制度上的途径并特别强调根据现实的双向计划和设计经验来一步一步地解决各种社会问题.社会工程学 ...

  9. 201521123060 《Java程序设计》第14周学习总结

    1.本周学习总结 1.1以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2.书面作业 1.MySQL数据库基本操作 1.1建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己 ...

  10. ajax中的suceess函数使用this

    今天在写ajax的时候,后台返回数据给前台,可是总是不能把数据正常显示在页面上... 明明已经进入了success函数了,并且在该代码的前后都能够正常执行.. success: function (r ...