字符串转数字测试--知识备忘

Posted 2020-10-04 马斯塔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了字符串转数字测试--知识备忘相关的知识，希望对你有一定的参考价值。

闲来无事，看了不少js的奇淫技巧，其实很多只是卖弄知识真正用上的并不多，为了满足好奇心做了一个实验。

这个实验是关于将字符串转成数字的，因为前端处理小数会出很多问题，所以一般都是后台的同学把数据处理好了给前端，但是后端传过来的是字符串，而这些字符串有些是带小数点的，有些是整数，传过来有时候要做一些操作，字符串做不了所以要做类型转换，即String --> Number。

对于类型转换有常用的几种方法，现在一起看看这几种方法的速度如何？

字符串转数字的方法有，Number，parseInt,parseFloat,还有隐式转换加号（+）和算式表达（- 0）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <p id="content"></p>
    <script src="../lib/jquery.js"></script>
    
    <script>
        $(function(){

            var str = ‘3.222‘;
            var res = [];
            //19.06ms
            console.time(‘test‘);

            for(var i = 0;i < 100000; i++){
                 res.push(+str);
            }
            console.timeEnd(‘test‘);

            // 9.35ms
            console.time(‘Number‘);

            for(var i = 0;i < 100000; i++){
                 res.push(Number(str));
            }
            console.timeEnd(‘Number‘);
            // 6.22ms
            console.time(‘parseInt‘);

            for(var i = 0;i < 100000; i++){
                 res.push(parseInt(str));
            }
            console.timeEnd(‘parseInt‘);

            //8.84ms
            console.time(‘parseFloat‘);

            for(var i = 0;i < 100000; i++){
                 res.push(parseFloat(str));
            }
            console.timeEnd(‘parseFloat‘);
        });
    </script>
</body>
</html>

结论就是：parseInt > parseFloat > Number > 隐式类型，这里是加号(+)

测试的浏览器用的是firefox，chrome，发现firefox的差异性较大，chrome下Number和隐式转换差不多，parseInt和parseFloat差不多。

虽然代码写起来很方便少了字符却没有带来性能上的提升，所以说有些奇淫技巧不能乱用啊

其实这个实验的起源于+new Date()，看到这个技巧很鸡冻，很风骚，做了实验后才看清事物的本质。

以上是关于字符串转数字测试--知识备忘的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript笔试题（js高级代码片段）

常用python日期日志获取内容循环的代码片段