你不知道的parseInt

DesGemini 发布于2019-08-20 18:33 / 2899人阅读

摘要：前言原由偶然看到一个略微奇妙的代码初看之时，瞬间得出答案虽然心底有些许疑问的声音因此追溯根源，没想到答案让我惊呼这里黑人问号，手动滑稽查询了等文档，因此得出下文结论，由于英语渣渣，所以有不恰当的地方希望各位帮忙斧正函数是核心的一个全局函数

前言

原由：
偶然看到一个略微奇妙的代码["1", "2", "3"].map(parseInt)
初看之时，瞬间得出答案[1, 2, 3]（虽然心底有些许疑问的声音~）
因此追溯根源，没想到答案让我惊呼WTF?（这里黑人问号，手动滑稽）
查询了MDN、Standard ECMA-262等文档，因此得出下文结论，由于英语渣渣，所以有不恰当的地方希望各位帮忙斧正~

parseInt函数

parseInt是ECMAScript核心的一个全局函数，可以在实现了ECMAScript的宿主环境全局调用

废话不多说，下面就是探讨parseInt函数的正文：
MDN查询得知 -> parseInt(string, [int radix])
是的,parseInt函数其实有两个形式参数,正是因为我记得这一点才催生了我前文提到的疑问和导致这篇科普文的诞生

一个形式参数

相信，很多人都使用过parseInt函数传递一个形式参数的时候,这很简单嘛，不就是把字符串转换成Int32类型的整数？
没毛病，老铁双击666~

    console.log(parseInt("12"));
    console.log(parseInt("08"));
    console.log(parseInt("0x16"));
    console.log(parseInt("-12"));
    console.log(parseInt("   -12"));
    console.log(parseInt("   -  12"));
    console.log(parseInt("124ref"));
    console.log(parseInt("ref"));

以上几乎就是parseInt函数一个形式参数时的所有情况，那么结果都是啥呢？希望大家手动执行下代码:)手动滑稽

其中，要特殊注意的就08、0x16、   -  12

首先呢，有人看到我说要特殊注意的第一个字符串的时候，可能心里会暗想（up主4不4傻），这么简单有需要注意的？

其实呢，我也是google了一下关于parseInt函数的中文博文（嗯，是的没错(/▽＼)）,发现了一个奇怪的事情 -> 传送门
这篇博文的up主说parseInt("08")的结果得不到8，我默默地打开Chrome的devTool，一跑发现没毛病啊！！！看了一下博文的时间是2010年，因此推断是ECMAScript标准作祟，如果不是那我也就...（摊手~）

ox16这个特殊注意点呢，也很平常其实，就是16进制前缀嘛，看过Javascript权威指南的都懂，没了解过的呢看我看我来说FreeStyle...parseInt传递的第一个形式参数是字符串类型的，底层实现会先识别该字符串时候是否有0x或者0X前缀，如果有呢，第二个形式参数（radix）就会被赋值为16，也就是十六进制，然后parseInt再把这个十六进制转换为十进制Number类型

- 12,这个就更为简单点啦，就是识别有没有负号前缀，有的话会转换成负整数。但是有一点注意的是空格，空格出现在parseInt函数的string形参最前面和最后面都会被忽略，然而出现在特殊前缀（英文翻译为code unit）0x或0X和-就会有问题，parseInt无法进行转换返回NaN

两个形式参数

那么重头戏来了，这篇科普文的精髓部分，不要睡着啊~老铁

parseInt(string, [int radix])第二个形参是可以忽略的，忽略时默认赋值为10也就是十进制

radix就是指定第一个形参的进制类型，然后根据这个进制类型再转换为十进制整数（敲黑板~）

radix形参没指定的时候是10，其次他是具有有效范围滴：[2, 36]和特殊值0
下面是英语渣渣的我翻译后，简化的parseInt执行步骤：（ECMAScript原解析->传送门）

将第一个形参转换为字符串

识别string转换是否有code unit，如果有 -> -标记为负数，0x或0X则把radix赋值为16

radix形参（int类型）是否存在，存在则重新赋值（会对实参进行Int32转化，无法转换成int类型则不会重新赋值radix）

radix为0，则设置radix为默认值10

如果radix为1，或者大于等于37，parseInt直接返回NaN

如果radix为[2, 36]时则代表，string参数分别是二进制，三进制（如果有得话~）...三十六进制类型

然后对string进行的radix进制 -> 十进制转换

以上就是parseInt转换时的步骤，那么我们来开始解释["1", "2", "3"].map(parseInt)
at first, 答案是[1, NaN, NaN]

    (function (){
        var ret = ["1", "2", "3"].map((value, index)=>{
            console.log(value, index);
            return parseInt(value, index);
        });
        console.log(ret);
    })();

这是["1", "2", "3"].map(parseInt)内部执行的剖析，value和index相信大家都懂，不懂请自行MDN,执行步骤为：
value="1",index=0 -> parseInt(value, index)
value="2",index=1 -> parseInt(value, index)
value="3",index=2 -> parseInt(value, index)
抽离出来，其实就是

    parseInt("1", 0);
    parseInt("2", 1);
    parseInt("3", 2);

按照我前面分析的parseInt转换步骤，可以很轻易的得出前面两个的答案，那么第三个呢？手动滑稽、黑人问号...哈哈
其实，也很简单啦，parseInt("3", 2)这是根据二进制对字符串3进行十进制转换对吧！！！
exm???有毛病?没毛病，老铁，就是......你家二进制有3?二进制不就是0和1啊
就是0和1啊
是0和1啊
0和1啊
和1啊
1啊
啊
因此返回NaN，666

佐证如下：

parseInt("13", 2)，这个结果是......1，因为string参数如果最开始的code符合radix进制的话是可以进行解析转换的，正如这里"1"是符合二进制的，"3"是不符合二进制的，但1处于优先位置，所以可以进行转换解析，而3被无情地忽略~

Lastly,我们来动手一下吧:)

    parseInt("9", 8);
    parseInt("0x16", 10);
    parseInt("-10", 16);
    parseInt("5/8/2017", "javascript is such funny");

后记

这只是一篇科普文，大家relaxed一下，毕竟世界竟如此好玩~最后不喜勿喷，欢迎大家指出不足和错误的地方，感谢阅读

参考文献

MDN

Standard ECMA-262

图解进制转换

云服务器 GPU云服务器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84680.html

你不知道的取数值整数部分的冷知识

摘要：我们可以用测一下具体实现原理，请参考文档注意因为操作将操作数转为，所以它不能处理超过位的数值取整，而有效整数的范围是位。综上所以如果要考虑压缩代码的大小，且明确知道数值范围不会超过位整数的时候，可以考虑使用取整。在处理数值的时候，获取浮点数的整数和小数部分，是一种常见的操作，在JavaScript中有许多方法可以达到目的，但也正因为方法众多，所以哪种方法更好，也值得我们仔细研究一番。...

calx 2019-08-26 10:31 评论0 收藏0
JavaScript字符串转数字的5种方法及其陷阱

摘要：例如注意字符串中的负十六进制数字是一个特殊情况，如果你用解析，结果是不正确的。转换十六进制数时要小心，如果你不知道要转换对象的类型，不要使用。字符串转换为数字的方式总结负十六进制数字符串转换为数字时。摘要：JavaScript 是一个神奇的语言，字符串转数字有 5 种方法，各有各的坑法! 原文: Converting Strings to Number in Javascript...

shengguo 2019-08-23 16:44 评论0 收藏0
JS字符串转数字方法总结

摘要：字符串中的负十六进制数字是一个特殊情况，如果你用解析，结果是不正确的。按位非可以把字符串转换成整数，但他不是浮点数。如果是一个字符串转换，它将返回这是什么原理通过翻转每个位，也称为数字的补码。 String转换为Number有很多种方式，我可以想到的有5种！但总有一些情况让人猝不及防，总结到这里供自己日后查找方便 parseInt 根据JsPerf.com的基准测试，大多数浏览器对pa...

call_me_R 2019-08-22 18:35 评论0 收藏0
Javascript基础之-强制类型转换（一）

摘要：转换为字符串规则如下图代码大致就是普通其他基本类型转为字符串的话，就直接转为其值的字符串表达形式，如果是基本类型的封装对象，会先拆封，然后再转为字符串，如果是普通对象，则会调用其内部的值，如果是极大数和级小数，将会进行一些转化，具体规转换为字符串规则如下图代码： console.log(String(undefined)); // undefined console.log(Str...

leon 2019-08-23 14:24 评论0 收藏0
前端资源系列（5）-JavaScript奇味探索

摘要：中有很多奇妙的东西，归咎归功于设计时候的迅速。缺陷有，但是的强大确实体现的淋漓尽致。它是如此的灵活，当然随之而来的便是开发的代价，它不像强类型语言那样规规矩矩。难得周末晚上清闲，回味这些看起来有点怪怪却又在发生着的问题。 JavaScript中有很多奇妙的东西，归咎or归功于设计时候的迅速。缺陷有，但是JavaScript的强大确实体现的淋漓尽致。它是如此的灵活，当然随之而来的便是开...

kyanag 2019-08-22 12:46 评论0 收藏0