parseInt parseFloat isNaN Number 区别和具体的转换规则及用法

原文链接：https://blog.csdn.net/wulove52/article/details/84953998

在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