你不知道的parseInt

DesGemini 發(fā)布于2019-08-20 18:33 / 2908人閱讀

摘要：前言原由偶然看到一個略微奇妙的代碼初看之時，瞬間得出答案雖然心底有些許疑問的聲音因此追溯根源，沒想到答案讓我驚呼這里黑人問號，手動滑稽查詢了等文檔，因此得出下文結論，由于英語渣渣，所以有不恰當的地方希望各位幫忙斧正函數是核心的一個全局函數

前言

原由：
偶然看到一個略微奇妙的代碼["1", "2", "3"].map(parseInt)
初看之時，瞬間得出答案[1, 2, 3]（雖然心底有些許疑問的聲音~）
因此追溯根源，沒想到答案讓我驚呼WTF?（這里黑人問號，手動滑稽）
查詢了MDN、Standard ECMA-262等文檔，因此得出下文結論，由于英語渣渣，所以有不恰當的地方希望各位幫忙斧正~

parseInt函數

parseInt是ECMAScript核心的一個全局函數，可以在實現(xiàn)了ECMAScript的宿主環(huán)境全局調用

廢話不多說，下面就是探討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函數一個形式參數時的所有情況，那么結果都是啥呢？希望大家手動執(zhí)行下代碼:)手動滑稽

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

首先呢，有人看到我說要特殊注意的第一個字符串的時候，可能心里會暗想（up主4不4傻），這么簡單有需要注意的？

其實呢，我也是google了一下關于parseInt函數的中文博文（嗯，是的沒錯(/▽＼)）,發(fā)現(xiàn)了一個奇怪的事情 -> 傳送門
這篇博文的up主說parseInt("08")的結果得不到8，我默默地打開Chrome的devTool，一跑發(fā)現(xiàn)沒毛病?。。?！看了一下博文的時間是2010年，因此推斷是ECMAScript標準作祟，如果不是那我也就...（攤手~）

ox16這個特殊注意點呢，也很平常其實，就是16進制前綴嘛，看過Javascript權威指南的都懂，沒了解過的呢看我看我來說FreeStyle...parseInt傳遞的第一個形式參數是字符串類型的，底層實現(xiàn)會先識別該字符串時候是否有0x或者0X前綴，如果有呢，第二個形式參數（radix）就會被賦值為16，也就是十六進制，然后parseInt再把這個十六進制轉換為十進制Number類型

- 12,這個就更為簡單點啦，就是識別有沒有負號前綴，有的話會轉換成負整數。但是有一點注意的是空格，空格出現(xiàn)在parseInt函數的string形參最前面和最后面都會被忽略，然而出現(xiàn)在特殊前綴（英文翻譯為code unit）0x或0X和-就會有問題，parseInt無法進行轉換返回NaN

兩個形式參數

那么重頭戲來了，這篇科普文的精髓部分，不要睡著啊~老鐵

parseInt(string, [int radix])第二個形參是可以忽略的，忽略時默認賦值為10也就是十進制

radix就是指定第一個形參的進制類型，然后根據這個進制類型再轉換為十進制整數（敲黑板~）

radix形參沒指定的時候是10，其次他是具有有效范圍滴：[2, 36]和特殊值0
下面是英語渣渣的我翻譯后，簡化的parseInt執(zhí)行步驟：（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)內部執(zhí)行的剖析，value和index相信大家都懂，不懂請自行MDN,執(zhí)行步驟為：
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處于優(yōu)先位置，所以可以進行轉換解析，而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上卷你不知道

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/84680.html

你不知道的取數值整數部分的冷知識

摘要：我們可以用測一下具體實現(xiàn)原理，請參考文檔注意因為操作將操作數轉為，所以它不能處理超過位的數值取整，而有效整數的范圍是位。綜上所以如果要考慮壓縮代碼的大小，且明確知道數值范圍不會超過位整數的時候，可以考慮使用取整。在處理數值的時候，獲取浮點數的整數和小數部分，是一種常見的操作，在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基礎之-強制類型轉換（一）

摘要：轉換為字符串規(guī)則如下圖代碼大致就是普通其他基本類型轉為字符串的話，就直接轉為其值的字符串表達形式，如果是基本類型的封裝對象，會先拆封，然后再轉為字符串，如果是普通對象，則會調用其內部的值，如果是極大數和級小數，將會進行一些轉化，具體規(guī) 轉換為字符串規(guī)則如下圖代碼： console.log(String(undefined)); // undefined console.log(Str...

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

摘要：中有很多奇妙的東西，歸咎歸功于設計時候的迅速。缺陷有，但是的強大確實體現(xiàn)的淋漓盡致。它是如此的靈活，當然隨之而來的便是開發(fā)的代價，它不像強類型語言那樣規(guī)規(guī)矩矩。難得周末晚上清閑，回味這些看起來有點怪怪卻又在發(fā)生著的問題。 JavaScript中有很多奇妙的東西，歸咎or歸功于設計時候的迅速。缺陷有，但是JavaScript的強大確實體現(xiàn)的淋漓盡致。它是如此的靈活，當然隨之而來的便是開...

kyanag 2019-08-22 12:46 評論0 收藏0