在javascript 我經常用到，parseInt、parseFloat、Number、isNaN，但是轉規則不一，常常搞不清楚區別。記憶起來非常吃力。

今天我們來扯一扯他們的區別和用法，和記憶技巧

首先，javacript的資料型別number 包含 整數 小數 0 NaN

判斷一個值是不是數字可以使用 typeof

<script>
    console.log(typeof 100);//"number"
    console.log(typeof 199.99);// "number"
    console.log(typeof NaN);// "number"
    console.log(typeof 1 + 1); // "number"
    console.log(typeof 1 + undefined); // "number"
    console.log(typeof 1 + null); // "number"
    console.log(typeof 1 + ""); // "string"
</script>
 

 1. Number : 把其他資料型別的值強制轉換成number型別；返回number

      用法：

//通過下面的轉換我們來尋找規則
//string 字串
console.log(Number("100")); //100
console.log(Number("100px")); //NaN
console.log(Number("p100")); //NaN
console.log(Number("p100p")); //NaN
console.log(Number("")); //0 
console.log(Number("0")); //0
console.log(Number(" ")); //0
//總結只要是純number字元或者空字串（""或" "）會轉成 0
//boolean 布林
console.log(Number(true)); //1
console.log(Number(false)); //0
//null undefined 
console.log(Number(null)); //0 
console.log(Number(undefined)); //NaN
// 物件
console.log(Number([]));             //0 先呼叫[].toString() 方法得出 ""  "" 轉換會為0
console.log(Number([1,3,56]));           //NaN 先呼叫[].toString() 方法得出"1,3,56"
//NaN 先呼叫[].toString() 方法得出"[object Object]"
console.log(Number({}));                   
console.log(Number({name:"vilin", age:18})); //NaN
 

2.isNaN : 用來判斷是否是一個非有效數字的方法；如果是有效數字返回false，不是返回true； 返回boolean值

規則：執行前，先把要判斷的值 執行Number() 所有規則參照Number 轉換規則

//string 字串
console.log(isNaN("100")); //false
console.log(isNaN("100px")); //true
console.log(isNaN("p100")); //true
console.log(isNaN("px100p")); //true
console.log(isNaN(""));  //false
console.log(isNaN("0")); //false
console.log(isNaN(" ")); //false
//boolean 布林型
console.log(isNaN(true)); //false
console.log(isNaN(false)); //false
//null undefined
console.log(isNaN(null)); //false
console.log(isNaN(undefined)); //true
//物件
console.log(isNaN([])); //false
console.log(isNaN([2,3])); //true
console.log(isNaN({})); //true
console.log(isNaN({name:"vilin",age:19})); //true
 

3.parseInt: 把字串轉成整數數字 ;返回number

分析： parse： 解析分析 Int：integer（整數）

規則：從左到右依次識別，直到遇到一個非有效數字為止

總結;處理字串轉換、從左到右非有效數字停止 、只轉換整數

console.log(parseInt("100")); //100
console.log(parseInt("100px")); //100
console.log(parseInt("156.444px")); //156
console.log(parseInt("p100")); //NaN
console.log(parseInt("p100p")); //NaN
console.log(parseInt("")); //NaN
console.log(parseInt("0")); //0
console.log(parseInt(" ")); //NaN

4.parseFloat ：把字串轉換成number,支援小數 返回number

分析： parse: 解析分析  Float: 程式設計界 代表浮點數 即是小數

規則：從左到右依次識別，直到遇到一個非有效數字為止

總結：處理字串轉換、從左到右非有效數字停止、支援小數

console.log(parseFloat("100")); //100
console.log(parseFloat("100px")); //100
console.log(parseFloat("156.444px")); //156.444
console.log(parseFloat("p100")); //NaN
console.log(parseFloat("p100p")); //NaN
console.log(parseFloat("")); //NaN
console.log(parseFloat("0")); //0
console.log(parseFloat(" ")); //NaN

5. toFixed: 保留小數點位數，並進行四捨五入；返回字串

用法：

var num = 1300;
var num1 = 1456.897;
console.log(num.toFixed(2)); //1300.00
console.log(100.toFixed(1)) //報錯 無法識別該點的是指的小數點還是...
console.log(num1.toFixed(2));  //1456.90

以上就是個人理解；希望對大家有所幫助