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

仔细一想,挺考逻辑的,实现方法有很多种,可以用三位循环、字符串数组分隔,也可以使用正则。刚开自己用js实现了堆栈,代码太多,不够优雅,同时也暴露了自己原生js的生疏,事后也看到了同事们各样的实现方法,无非都是循环和字符串分隔,于是决心使用更优雅的正则装逼一下。

仔细思考:

输入:数字(考虑数字是否合法、正负号、小数点)、字符串

输出:考虑到使用场景,最好是字符串

测试用例:-1234567.9012

期待输出:-1,234,567.9012

千位分隔符貌似在《精通正则表达式》中讲环视的时候作为经典范例,然而写出来发现js不支持逆序环视,也就是 (?<=expression) (?<!expression) 这两种是不支持的。

再三考虑和尝试之后得出以下代码,只需一行!完美实现!

// 正则
function thousandBitSeparator(num) {
return num && num
.toString()
.replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
return $1 + ",";
});
}
console.log(thousandBitSeparator(-1234567.9012));
// -1,234,567.9012

todo

--- update 2015年07月03日 ---

经朋友提醒,当测试用例是1000的时候,此正则不能正确标注千位分隔符,现修改如下:


function thousandBitSeparator(num) {
return num && (num
.toString().indexOf('.') != -1 ? num.toString().replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
return $1 + ",";
}) : num.toString().replace(/(\d)(?=(\d{3}))/g, function($0, $1) {
return $1 + ",";
}));
}
console.log(thousandBitSeparator(1000));
//1,000

千位分隔符(js 实现)的更多相关文章

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

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

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

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

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

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

  4. golang 千位分隔符

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

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

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

  6. 千位分隔符的JS实现

    $.extend({ //千位分割符 MoneySeparator: function numFormat(num){ if(num==null){ return num; }else { num=n ...

  7. JS 实现四舍五入保留两位小数并且添加千位分隔符

    var a = "-123456789.078";a = (Math.round(a * 100) / 100).toFixed(2).toString().replace(/(\ ...

  8. js实现千位分隔符——str.replace()用法

    /*js*/function commafy(num){ return num && num.toString().replace(/(\d{1,3})(?=(\d{3})+(?:$| ...

  9. js ---- 实现千位分隔符

    第一种方法: var num = 1234567; var string = num.toString(); var arr = string.split('').reverse(); console ...

随机推荐

  1. webservice简单引用

    //1.创建网站//2.新建项=>添加web服务//运行texttweb.asmx可以通过访问http://域名/webservice/texttweb.asmx来验证了//3.添加服务引用=& ...

  2. [Android]Android系统启动流程源码分析

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5013863.html Android系统启动流程源码分析 首先 ...

  3. Android Contextual Menus之一:floating context menu

    Android Contextual Menus之一:floating context menu 上下文菜单 上下文相关的菜单(contextual menu)用来提供影响UI中特定item或者con ...

  4. NSPredicate

    NSPredicate 1. 正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串.通常被用来检索.替换那些符合某个模式的文本. 2. iOS中正则使用 有三种(NSPredicate, ...

  5. js 使某个页面不允许在子iframe中打开的解决办法

    在页面中添加如下js代码<script> if (window.parent !== window.self) { window.parent.location.reload(); }&l ...

  6. 1.4 基础知识——GP2.2 计划 与 GP2.8 计划跟踪

    摘要: CMMI有计划(PP)及计划跟踪(PMC)两个PA,而某一个PA又有GP2.2计划及GP2.8计划跟踪两个GP,看上去是挺“神奇”也挺让人“困惑”的事情. 正文: GP2.2 Establis ...

  7. 关于rails里集成测试assert_template的写法

    assert_template后面只能跟随模板文件名,不能跟随命名路径.比如routes.rb: get 'login' => 'sessions#new' 在集成测试用例里,只能写成asser ...

  8. 简述MVC框架模式以及在你(Android)项目中的应用

    标题是阿里电话面试的问题,一直以为自己很清楚MVC模式,结果被问到时,居然没法将MVC和Android中各个组件对应起来,所以,面试肯定挂了,不过面试也是学习的一种方式,可以知道大公司看中什么,以及自 ...

  9. informatica powercenter学习笔记(LookUp 使用)

    LOOKUP TRANSFORMATION的使用点评: LOOKUP基本用法不熟的话请参考下附属信息. 用法感受: 1 LOOKUP的作用跟我们以前在EXCEL的函数功能类似,就是隔表取值.优点就是用 ...

  10. Second glance in Go

    Github上的"the way to Go"翻譯有時候真讓人搞不懂,我經常會暈,比如 如果需要申明一个在外部定义的函数,你只需要给出函数名与函数签名,不需要给出函数体: func ...