数值千分位,6种方法和性能对比,值得一看

简介: 前端嘛,经常处理数值和时间。 所以数值和时间的格式化少不了。最近一直在面试前端, 就出了一个如何给数值添加千分位的面试题。至于答案,, 一是基于你现有的知识实现, 二是知识面。有人说, 不就一个千分位, 分分钟解决你, 正则万岁。 没错, 正则很帅, 那么性能呢? 好了, 进入正文。

1.JPG


前提



前端嘛,经常处理数值和时间。 所以数值和时间的格式化少不了。


最近一直在面试前端, 就出了一个如何给数值添加千分位的面试题。

至于答案,, 一是基于你现有的知识实现, 二是知识面。 有人说, 不就一个千分位, 分分钟解决你, 正则万岁。 没错, 正则很帅, 那么性能呢?


我就喜欢一本正紧的瞎掰。 好了, 进入正文。


实现



如下有的方法,稍微改造,就可以变成更加通用的方法,比如不是添加,而是添加#等等。


数值转字符串遍历


function format_with_array(number) {
    var arr = (number + '').split('.');
    var int = arr[0].split('');
    var fraction = arr[1] || '';
    var r = "";
    var len = int.length;
    int.reverse().forEach(function (v, i) {
        if (i !== 0 && i % 3 === 0) {
            r = v + "," + r;
        } else {
            r = v + r;
        }
    })
    return r + (!!fraction ? "." + fraction : '');
}
复制代码


substring


function format_with_substring(number) {
    var arr = (number + '').split('.');
    var int = arr[0] + '';
    var fraction = arr[1] || '';
    var f = int.length % 3;
    var r = int.substring(0, f);
    for (var i = 0; i < Math.floor(int.length / 3); i++) {
        r += ',' + int.substring(f + i * 3, f + (i + 1) * 3)
    }
    if (f === 0) {
        r = r.substring(1);
    }
    return r + (!!fraction ? "." + fraction : '');
}
复制代码


除法+求模


function format_with_mod(number) {
    var n = number;
    var r = ""; 
    var temp;
    do {
        mod = n % 1000;
        n = n / 1000;
        temp = ~~mod;
        r =  (n >= 1 ?`${temp}`.padStart(3, "0"): temp) + (!!r ? "," + r : "")
    } while (n >= 1)
    var strNumber = number + "";
    var index = strNumber.indexOf(".");
    if (index > 0) {
        r += strNumber.substring(index);
    }
    return r;
}
复制代码


正则


function format_with_regex(number) {
    var reg = /\d{1,3}(?=(\d{3})+$)/g;
    return (number + '').replace(reg, '$&,');
}
function format_with_regex(number) {
    var reg = /(\d)(?=(?:\d{3})+$)/g   
    return (number + '').replace(reg, '$1,');
}
复制代码


toLocaleString


function format_with_toLocaleString(number, minimumFractionDigits, maximumFractionDigits) {
    minimumFractionDigits = minimumFractionDigits || 2;
    maximumFractionDigits = (maximumFractionDigits || 2);
    maximumFractionDigits = Math.max(minimumFractionDigits, maximumFractionDigits);
    return number.toLocaleString("en-us", {
        maximumFractionDigits: maximumFractionDigits || 2,
        minimumFractionDigits: minimumFractionDigits || 2
    })
}
复制代码


Intl.NumberFormat


function format_with_Intl(number, minimumFractionDigits, maximumFractionDigits) {
    minimumFractionDigits = minimumFractionDigits || 2;
    maximumFractionDigits = (maximumFractionDigits || 2);
    maximumFractionDigits = Math.max(minimumFractionDigits, maximumFractionDigits);
    return new Intl.NumberFormat('en-us', {
        maximumFractionDigits: maximumFractionDigits || 2,
        minimumFractionDigits: minimumFractionDigits || 2
    }).format(number)
}
复制代码


性能



测试地址: 千分位性能测试


准备性能测试的代码, 为了测试带小数位和不带小数位,在getData的时候,如果随机值大于0.5, 将去除小数位。


function getData(count) {
    var data = new Array(count).fill(0).map(function (i) {
        var rd = Math.random();
        var r = rd * Math.pow(10, 10);
        if (rd > 0.5) {
            r = ~~r;
        }
        return r
    })
    return data;
}
function test(data, fn, label) {
    var start = performance.now();
    for (var i = 0; i < data.length; i++) {
        fn(data[i]);
    }
    var time = performance.now() - start;
    message((fn.name || label) + ":" + time + "ms");
}
function executeTest() {
    var data = getData(+textCount.value);
    test(data, format_with_array);
    test(data, format_with_mod);
    test(data, format_with_substring);
    test(data, format_with_regex);
    test(data, format_with_toLocaleString);
    test(data, format_with_Intl);
}
function message(msg) {
    var el = document.createElement("p");
    el.innerHTML = msg;
    messageEl.appendChild(el);
}
复制代码


测试数据50000


1. chrome 版本 74.0.3729.131(正式版本) (32 位)


format_with_array:59.13ms

format_with_mod:23.96ms

format_with_substring:44.04ms

format_with_regex:53.54ms

format_with_toLocaleString:1813.61ms

format_with_Intl:1973.45ms


2. 360极速浏览器11.0.2052.0


极速模式


format_with_array:63.30ms

format_with_mod:37.80ms

format_with_substring:41.40ms

format_with_regex:51.20ms

format_with_toLocaleString:3334.30ms

format_with_Intl:3485.80ms


兼容模式不支持 Array.fill Pass


3. 搜狗高速浏览器 8.5.10.30358


format_with_array:75.29ms

format_with_mod:35.47ms

format_with_substring:40.79ms

format_with_regex:49.86ms

format_with_toLocaleString:2418.04ms

format_with_Intl:2474.30ms


4. firefox 66.0.3


format_with_array:41.00ms

format_with_mod:25.00ms

format_with_substring:28.00ms

format_with_regex:43.00ms

format_with_toLocaleString:1799.00ms

format_with_Intl:2239.00ms


基本的结果都是一致的, 因为随机数不一样,结果也会偶尔不一致。


format_with_mod > format_with_substring > format_with_regex > format_with_array > format_with_toLocaleString > format_with_Intl


其中Intl.NumberFormat是有很大提升空间的,可以把实例缓存之类的。


当然,测试可能不严谨,问题不大,知道有这么几种思路就行,还有哪些思路呢? 欢迎留言。



相关文章
|
11月前
|
算法 开发者 索引
二分算法详解
本文介绍了二分查找及其相关问题的解决方法,包括基本的二分查找、查找元素的第一个和最后一个位置、求平方根、搜索插入位置、寻找峰值和旋转数组中的最小值等问题。通过详细分析每种情况下的二分查找策略,如循环条件、区间划分及特殊情况处理,提供了清晰的代码实现。适用于算法初学者和需要巩固二分查找技巧的开发者。
393 18
二分算法详解
|
消息中间件 负载均衡 Kafka
MQ消息路由大揭秘!从菜鸟到高手,一文带你玩转消息传递的‘高速公路’,轻松实现订单秒级响应!
【8月更文挑战第24天】在现代分布式系统中,消息队列(MQ)作为系统间解耦的核心工具,支持异步处理、负载均衡及高可用性。消息路由是MQ中的关键环节,决定消息从生产者到消费者的路径。主流MQ产品如RabbitMQ、Kafka等采用相似的路由机制,涉及交换器、队列、路由键等概念。常见的路由模式包括直接交换、主题交换及发布/订阅模式。以RabbitMQ为例,通过直接交换模式,可以根据订单类型(如“普通订单”、“紧急订单”)将消息路由至相应的处理队列。这一过程展示了MQ系统如何基于路由键和队列绑定关系实现消息的有效传递。
321 2
|
API Android开发 容器
33. 【Android教程】悬浮窗:PopupWindow
33. 【Android教程】悬浮窗:PopupWindow
1886 2
|
10月前
|
JavaScript 索引
Vue 3.x 版本中双向数据绑定的底层实现有哪些变化
从Vue 2.x的`Object.defineProperty`到Vue 3.x的`Proxy`,实现了更高效的数据劫持与响应式处理。`Proxy`不仅能够代理整个对象,动态响应属性的增删,还优化了嵌套对象的处理和依赖追踪,减少了不必要的视图更新,提升了性能。同时,Vue 3.x对数组的响应式处理也更加灵活,简化了开发流程。
|
资源调度 运维 前端开发
超强开源全能日程助手—揭秘FullCalendar
超强开源全能日程助手—揭秘FullCalendar
590 3
|
SQL 分布式计算 并行计算
PostgreSQL 并行计算解说 之1 - parallel seq scan
标签 PostgreSQL , cpu 并行 , smp 并行 , 并行计算 , gpu 并行 , 并行过程支持 背景 PostgreSQL 11 优化器已经支持了非常多场合的并行。简单估计,已支持27余种场景的并行计算。 parallel seq scan parallel index scan parallel index only scan
5149 0
|
网络协议 算法 安全
【专栏】RIP是一种古老的内部网关协议,使用距离矢量算法,基于跳数更新路由表,最古老的距离矢量协议
【4月更文挑战第28天】RIP是一种古老的内部网关协议,使用距离矢量算法,基于跳数更新路由表。其工作原理包括周期性更新、度量标准、路由表更新和防止计数到无穷问题的技术。RIP简单易用,适合小规模网络,但在大规模网络中效率低且有限制。随着OSPF和EIGRP等协议的发展,RIP在大型网络中的应用减少,但在中小型网络和遗留系统中仍有其地位。RIPv2的改进提高了安全性与灵活性。尽管逐渐被替代,RIP在理解路由协议基本概念和历史中仍具价值。
415 1
|
Docker 容器
如何修改docker容器的端口映射
如何修改docker容器的端口映射
|
JSON 搜索推荐 API
盒马 iOS Live Activity &“灵动岛”配送场景实践
盒马 iOS Live Activity &“灵动岛”配送场景实践
2958 0
盒马 iOS Live Activity &“灵动岛”配送场景实践
|
运维 前端开发 JavaScript
qiankun vue 子应用页面刷新白屏
微前端框架qiankun在vue项目中使用遇到的子应用白屏问题,通过主应用挂载子应用的方式进行子应用的页面功能开发,排查问题是 webpack资源路径配置导致,修改 publicPath 配置解决问题
2081 0
qiankun vue 子应用页面刷新白屏