轉換數字時有三種較常見的方法，分別為 parseInt、parseFloat 與 Number，今天就來簡單認識一下這三種方法及其差異吧。
Outline
* parseInt()
* parseFloat()
* Number()
* 結論
* 參考資料➤ parseInt()
語法：
parseInt(string, radix)
parseInt() 將字串轉換為以十進位表示的整數。parseInt() 接受兩個參數。
- string
欲轉換的值。若第一個參數值的類型不是 String，會先使用 ToString 轉換成字串。 - radix
代表進位系統。依照實作不同可能有不同的預設值，因此建議設定該值，避免造成錯誤。
parseInt() 會忽略前後空白，並根據 radix 解析第一個參數，當遇到無法解析的字元，會忽略該字元及其後的所有字元，停止解析於此字元，並回傳目前為止的結果。
若第一個字元就無法被解析，會回傳 NaN。
範例：
parseInt("5A34",10) //5，字元 A 無法被解析為數字，因此停止解析，回傳 5
parseInt("5A34",16) //23092，依照 16 進制解析並計算為 10 進位
parseInt("") // NaN
parseInt("16px",10) //16
parseInt(" 332",10) //332，空白會被忽略➤ parseFloat()
語法：
parseFloat(string)
parseFloat() 將字串轉換為以十進位表示的浮點數。parseFloat() 僅接受一個參數。
- string
欲轉換的值。若第一個參數值的類型不是 String，會先使用 ToString 轉換成字串。
與 parseInt() 相同，會忽略前後空白。當遇到無法解析的字元，會忽略該字元及其後的所有字元，停止解析於此字元，並回傳目前為止的結果。若第一個字元就無法被解析，會回傳 NaN。
與 parseInt() 不同的是，parseFloat() 用以解析浮點數，因此會接受第一個小數點。且僅能分析 10 進位制。
範例：
parseFloat("55.44") // 55.44
parseFloat("33.44.55") // 33.44➤ Number()
語法：
Number(value)
Number()在不使用 new 運算子的狀況下，可以被用來轉換型別。
規則如下：
- 若值為 undefined，回傳 NaN
- 若值為 null，回傳 0
- 若值為 Boolean，true 回傳 1；false 回傳 0
- 若值為 Number，直接回傳該值
- 若值為 String，則根據以下規則判斷
- 僅包含數字與浮點數，則忽略前後空白，回傳該值
- 若包含有效的進位系統，例如十六進位的 0x；八進位的 0o；二進制 0b，則依照進位系統轉換為十進制。
- 空值，回傳 0
- 其他，回傳 NaN - 若值為 Object，使用 valueOf() 得到該值，再根據前述規則進行轉換
Number(undefined) // NaN
Number(null) // 0
Number(true) // 1
Number(false) // 0
Number(33) // 33
Number(33.66) // 33.66
Number("0x11") // 17
Number("0b11") // 3
Number("0o11") // 9
Number("") // 0
Number("33") //33
Number("16px") // 轉換值中包含無法轉換的內容➤ 結論
parseInt()與 parseFloat() 都是專門將 String 轉換為數字的方法。一個是整數，另一個是浮點數。Number() 則是針對各類型進行數字的轉換。
相較於 parseInt()與 parseFloat()，Number() 較為嚴格，當轉換值中包含無法轉換的內容時，會直接回傳 NaN。若對於內容較為嚴謹的情境，可以考慮使用 Number()。
另外一點較為不同的是 parseInt()與 parseFloat() 視空值為 NaN，Number()視空值為 0，兩者有意義上的不同，也可以依照情境選用。
以上是今天的小筆記分享，有任何問題都歡迎留言指教，謝謝 😊
