JS将其他类型值转为Number类型

最近在项目中，频繁的使用到了要将其他类型转成number类型的情况，方法有几种，转换的结果也有些区别，做为一个前端开发的基本功，本文测试了各种方法转换的结果。

但是，由于情况特别多，也不可能涉及所以场景，根据“二八原则”先掌握大部分常见的的吧～

本文其他类型主要指string、number、boolean、undefined 、null五种数据类型，以及一种引用类型object。

方法1：使用Number()函数 【推荐】

• 纯数字字符串可以直接转换为数字

  注意：

  • 正数—— 如果第一位是0，0会被去掉；

  • ​小数—— 如果最后一位是0会被去掉；如果小数点前没有数会补0；如果有多个小数点则转化为NaN。

• 字符串若为空，则转为0

• 字符串里有非数字，则转化为NaN

• 布尔值true转为1，false转为0

• null转为数字0，undefined和空对象{}都转为NaN

Number("");        // 0

Number("0");       // 0
Number("010");     // 10
Number("-0");      // -0
Number("-010");    // -10

Number(".1");      // 0.1
Number("0.1");     // 0.1
Number(".10");     // 0.1

Number("-0.1");    // -0.1
Number("-0.10");    // -0.1

Number("0.1.2");   // NaN
Number("-0.1.2");  // NaN
Number("string");  // NaN

Number(true);   // 1
Number(false);  // 0

Number(null);      // 0
Number(undefined); // NaN
Number({});        // NaN

方法2: parseInt() / parsetFloat

• parseInt()和parseFloat()是专门转换字符串的方法，可以将字符串中有效的整数或者浮点数取出来，从左往右，遇非数字，舍弃后边所有，故第一个若为非数字，则返回NaN
• parseFloat()如果遇到有两个点，则舍弃第二个点，以及后面内容
• parseInt()和parseFloat()对非string类型使用，会将其转换为string，然后再操作，会返回NaN
• 若字符串为一个点 “.”，则parseInt()和parseFloat()都会返回NaN
• 若字符串点后边有数字，parseInt()会返回NaN，parseFloat()会在第一个点的前边加一个0。

parseInt()方法 【推荐：转化成整数】

parseInt("");        // NaN（区别于Number）

parseInt("0");       // 0
parseInt("010");     // 10
parseInt("-0");      // -0
parseInt("-010");    // -0

parseInt(".1");      // NaN（区别于Number）
parseInt(".10");     // NaN（区别于Number）
parseInt(".1.2");    // NaN（区别于Number）

parseInt("0.1");     // 0  （区别于Number）
parseInt("0.10");    // 0  （区别于Number）
parseInt("-0.1");    // -0 （区别于Number）
parseInt("-0.10");   // -0 （区别于Number）

parseInt("0.1.2");   // 0  （区别于Number）
parseInt("-0.1.2");  // -0 （区别于Number）

parseInt("string");  // NaN

parseInt(true);    // NaN （区别于Number）
parseInt(false));  // NaN （区别于Number）

parseInt(null);      // NaN（区别于Number）
parseInt(undefined); // NaN
parseInt({});        // NaN

parseFloat方法 【推荐：转化成小数】

parseFloat("");        // NaN

parseFloat("0");       // 0
parseFloat("010");     // 10
parseFloat("-0");      // -0
parseFloat("-010");    // -10

parseFloat(".1");      // 0.1 （区别于parsetInt）
parseFloat(".10");     // 0.1 （区别于parsetInt）
parseFloat(".1.2");    // 0.1 （区别于parsetInt）

parseFloat("0.1");     // 0.1 （区别于parsetInt）
parseFloat("0.10");    // 0.1 （区别于parsetInt）
parseFloat("-0.1");    // -0.1（区别于parsetInt）
parseFloat("-0.10");   // -0.1（区别于parsetInt）

parseFloat("0.1.2");   // 0.1 （区别于parsetInt）
parseFloat("-0.1.2");  // -0.1（区别于parsetInt）

parseFloat("string");  // NaN

parseFloat(true);   // NaN
parseFloat(false);  // NaN

parseFloat(null);      // NaN
parseFloat(undefined); // NaN
parseFloat({});        // NaN

方法3： 隐式转换

第一种隐式转换：使用运算符减、乘、除的其中一种，在不改变原值的情况下，和number类型的值做运算

• 字符串是纯数字，直接返回该数值
• 字符串不是纯数字，转为NaN
• 字符串为空，转为0
• 布尔值true转为1，false转为0
• undefined，转为NaN

console.log("" - 1); // -1
console.log("" + 1); // "1"

console.log("0" - 1); // -1
console.log("0" + 1); // "01"

console.log("-0" - 1); // -1
console.log("-0" + 1); // "-01"

console.log(".1" - 1); // -0.9
console.log(".1" + 1); // ".11"

console.log("0.1" - 1); // -0.9
console.log("0.1" + 1); // "0.11"

console.log("-0.1" - 1); // -1.1
console.log("-0.1" + 1); // "-0.11"

console.log("0.1.2" - 1); // NaN
console.log("0.1.2" + 1); // "0.1.21"

console.log("-0.1.2" - 1); // NaN
console.log("-0.1.2" + 1); // "-0.1.21"

console.log("string" - 1); // NaN
console.log("string" + 1); // "string1"

console.log(true - 1); // 0
console.log(true + 1); // 2
console.log(false - 1); // -1
console.log(false + 1); // 1

console.log(null - 1); // -1
console.log(null + 1); // 1

console.log(undefined - 1); // NaN
console.log(undefined + 1); // NaN

console.log({} - 1); // NaN
console.log({} + 1); // "[object Object]1"

第二种隐式转换：直接在被转换的值前边，加入一个负号，或者正号，转换后的值，基本和第一种隐式转换差不多。

console.log(-"");  // -0
console.log(+"");  // 0 

console.log(-"1");  // -1
console.log(+"1");  // 1

console.log(-".1");  // -0.1
console.log(+".1");  // 0.1
console.log(-"0.1"); // -0.1
console.log(+"0.1"); // 0.1

console.log(-"0.1.2");  // NaN
console.log(+"0.1.2");  // NaN
console.log(-"-0.1.2"); // NaN
console.log(+"-0.1.2"); // NaN

console.log(-"string");  // NaN
console.log(+"string"); // NaN

console.log(-true); // -1
console.log(+true); // 1

console.log(-false); // -0
console.log(+false); // 0

console.log(-null); // -0
console.log(+null); // 0

console.log(-undefined); // NaN
console.log(+undefined); // NaN

console.log(-{}); // NaN
console.log(+{}); // NaN

不正之处，恳请不吝指教，一起学习～