唯品秀博客
  • 温馨提示:唯品秀个人博客2016/11/16正式上线了!
  • 博客不定时更新、修复bug,若无法正常访问浏览,请稍后再试
  • 欢迎各位前端伙伴注册登录会员,共同分享前端技巧
  • 2018/04/24日最近更新:优化主导航高亮显示配置
首页 > 前端开发 > Javascript > 请使用千位分隔符(逗号)表示web网页中的大数字

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

2017年10月13日 作者: 管理员 1344次浏览 条评论

一、移动端大数值会默认当作电话号码

在手机等移动设备上,对于超过一定个数的数值,系统默认会当做电话号码处理,而不是一个数字

按照中文用户的使用习惯,有时候个数很多的连续数字其实真的就是一个数字,自动变成手机号码其实并不是我们想要的,尤其自动高亮的颜色我们使用CSS是无法重置的,所以我们总会想方设法干掉移动端数值变电话号码这一特性。

通常的做法都是使用标签:

1
<meta name="format-detection" content="telephone=no">

而且根据我的观察,只要是做移动端网页开发的,上面这段代码都会有的,而且很少看到有人对这种用法会有质疑,或者深入思考这样到底对不对?

实际上,在我看来,format-detection类型的使用本身就是一种牺牲特定用户体验为原本错误决策补坑的权宜之计,但却成为了标配代码,多少有点戏虐的味道在里面。

我仔细思考了一下,之所以会出现这种现象,主要在于我们的开发人员对于千位分隔符(逗号)数值表示法些许不适应以及理解不够深刻。

二、大数值千位分隔符(逗号)的作用

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

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

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

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

由于这种语言上的差异,我们大多数人对这种千位分隔并不感冒,这里的大多数人就包括产品经理以及前端开发,比方说一件商品,一万多块钱,直接就显示一个完整的数字12888,然后就发现变成手机号了,就加个,然后就没有然后了,看上去皆大欢喜,实际上牺牲了一定的用户体验以及带来了一定的语义化障碍。

1. 数值千位分隔与用户体验

如果我们在头部插入:

1
<meta name="format-detection" content="telephone=no">

就意味着原本应该可以被方便快捷呼叫的手机号码,现在变成一串普通的数字。比方说我们在网上订餐厅,餐厅详情页一定会有餐厅的订餐电话号码,如果我们强制页面不支持手机格式,而此时你要打这个电话进行预订,请问你会怎么操作和处理?是不是会使用我们胡萝卜粗的手指头,去点按和小心翼翼的框选这一段数字,然后复制到剪切板,然后再到我们的通讯录粘贴号码,然后再去拨打?

你看,原本可以一步完成的事情,现在要三四步才能完成,这用户体验啊显然大打折扣。

2. 数值千位分隔与语义化

无论是什么软件和设备,只要你的数字是以标准的千位分隔符表示,一定会是认为是数值,也就是明确了语义。

语义的明确不仅对搜索引擎友好,对于其他辅助阅读设备而言,也是非常有好处的。

拿屏幕阅读器的无障碍访问来说,如果我们网页上写的是123456789,则屏幕阅读器读的内容是“一二三四五六七八九”;但如果你写成123,456,789,则屏幕阅读器会读成:“一亿两千三百四十五万六千七百八十九”,也就是被当成一个数字来读了。乍一看好像前面的读法也能理解,那实际上会给用户带来很大的困扰,例如下面内容:“总共参加用户12288029人”,会被读成“总共参加用户一二二八八零二九人”,根本就没法get到到底多少人的。

因此综合来看,没有任何理由不使用千位分隔符表示web网页中的大数字。

唯一有可能反驳的是“用户看千位分隔的数字会不习惯”,这个大可必须担心,两点:首先,请问数字12288029怎么念?是不是要睁大了眼睛去找位数,然后才能读出来!在看数字12,288,029,虽然也要找位数,但要比前面的看得轻松些。也就是说,大数值你就算不分隔,照样有阅读障碍;其次,我们所有银行账户的钱数,工资明细上的钱全部都是用千位分隔的,请问你有没有把工资卡里全部的2,333.00元看成是二十三万呢?生活中有很多场景会教育用户熟悉千位数值表示法的。

三、连续数字数值转换成逗号分隔数值表示

假设经过学习,我们产品经理及开发人员已经意识到千位数值表示法的意义和重要性,但是,我们保存数据库的数值可能就是一个连续的数字,想要在页面上显示为逗号分隔的数值,则还需要进行进行一些转化和处理。

有没有什么简单的方法可以把连续数字转换成逗号分隔数值呢?

方法有很多,比较容易想到的就是进行字符分隔以及遍历处理,但这方法比较啰嗦,代码量比较大,并不推荐在实际项目中使用,嗯,我下面介绍两个我认为比较简单的方法。

方法一:使用正则表达式

语法如下:

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

举例:

1
2
String(123456789).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
结果是:123,456,789

方法二:使用toLocaleString()方法

语法如下:

1
Number.toLocaleString('en-US');

举例:

1
2
(123456789).toLocaleString('en-US');
结果是:123,456,789

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

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

「一年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 7 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
7

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

前端简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站, 愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,了解更多...

风云英雄

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,却获得了斯坦福、哈佛等许多常青藤名校课程的结业证……他们的同学不局限在一国一校,而是遍及全球……加入他们,成为一名互联网学习者!

站点统计

  • 文章: 128 篇
  • 分类: 13 个
  • 标签: 218 个
  • 运行: 554天
  • 访问:6,587,558次
  • 更新: 2018年6月22日
服务热线:
 182XXXX8470

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺客服