详解Number()、parseInt()、parseFloat()的区别

Number:

Number 构造函数包含常量和处理数值的方法。其他类型的值可以使用 Number() 函数转换为数字

当作为一个函数使用时，Number(value) 将字符串或者其他值转换到 Number 类型。如果该值不能被转换，它会返回 NaN。

Number("123"); // 返回数字 123
Number("123") === 123; // true
 
Number("unicorn"); // NaN
Number(undefined); // NaN

Number 强制转换:

许多期望数值的内置操作首先将其参数转换为数字（这在很大程度上解释了为什么 Number 对象的行为类似于数字原始值）。该操作可以总结如下：

• Number 数值类型 将按原样返回
• undefined 转换为 NaN。
• null 转换为 0。
• true 转换为 1；false 转换为 0。
• 如果是字符串：

如果字符串中只包含数字时，将其转换为十进制数值，忽略前导0；

如果字符串中包含有效浮点格式，如“1.1”，将其转换为对应的浮点数字，忽略前导0；

如果字符串中包含有效的十六进制格式，如“0xf”，将其转换为相同大小的十进制数值；

如果字符串为空，将其转换为0；

如果字符串中包含除上述格式之外的字符，则将其转换为NaN；

• BigInt 抛出 TypeError，以防止意外的强制隐式转换导致精度损失。
• Symbol 抛出 TypeError。
• 对象首先通过按顺序调用它们的 [@@toPrimitive]()（使用 "number" 提示）、valueOf() 和 toString() 方法将其转换为原始值。然后将得到的原始值转换为数字。

• 如果是对象，则调用对象的valueOf()方法，然后依照前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString()方法，然后再依照前面的规则转换返回的字符串值。

Number.parseInt()和全局的 parseInt() 函数具有相同的功能

Number.parseInt === parseInt; // true

Number.parseInt() 静态方法解析一个字符串参数并返回一个指定基数的整数。

参数:

string
要被解析的值，会被强制转化为字符串。字符串开头的空白符将会被忽略。

radix 可选
2 到 36 之间的整数，表示 string 的基数（数学记数系统中的基）。

如果 radix 为 undefined 或 0，则 radix 将被默认设置为 10，除非该数字以码元对 0x 或 0X 开头，在这种情况下，radix 将被默认设置为 16。

返回值:  

从给定的 string 中解析出的一个整数。

如果 radix 小于 2 或大于 36，或第一个非空白字符不能转换为数字，则返回 NaN。

Number.parseInt(string)
Number.parseInt(string, radix)  

parseInt：

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数，radix 是 2-36 之间的整数，表示被解析字符串的基数。

console.log(parseInt('123')); // 123 (default base-10)
console.log(parseInt('123', 10)); // 123 (explicitly specify base-10)
console.log(parseInt('   123 ')); // 123 (whitespace is ignored)
console.log(parseInt('077')); // 77 (leading zeros are ignored)
console.log(parseInt('1.9')); // 1 (decimal part is truncated)
console.log(parseInt('ff', 16)); // 255 (lower-case hexadecimal)
console.log(parseInt('0xFF', 16)); // 255 (upper-case hexadecimal with "0x" prefix)
console.log(parseInt('xyz')); // NaN (input can't be converted to an integer)

parseFloat：

parseFloat(string) 函数解析一个参数（必要时先转换为字符串）并返回一个浮点数。

• 如果 parseFloat 在解析过程中遇到了正号（+）、负号-、数字（0-9）、小数点（.）、或者科学记数法中的指数（e 或 E）以外的字符，则它会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数。
• 第二个小数点的出现也会使解析停止（在这之前的字符都会被解析）。
• 参数首位和末位的空白符会被忽略。
• 如果参数字符串的第一个字符不能被解析成为数字，则 parseFloat 返回 NaN。
• parseFloat 也可以解析并返回 Infinity。
• parseFloat 解析 BigInt 为 Numbers, 丢失精度。因为末位 n 字符被丢弃。

parseFloat() 只解析十进制，因此它没有第二个参数指定基数的用法。

parseFloat("123AF");　　　 // 123
parseFloat("0xA");　　　　 // 0
parseFloat("3.14");　　　 // 3.14
parseFloat("3.14.15");　　// 3.14
parseFloat("03.14");　　　// 3.14

parseInt() 和parseFloat() 的区别在于：

parseFloat() 所解析的字符串中第一个小数点是有效的，而parseInt() 遇到小数点会停止解析，因为小数点并不是有效的数字字符。

parseFloat() 始终会忽略前导零，十六进制格式的字符串始终会被转换成0，而parseInt() 第二个参数可以设置基数，按照这个基数的进制来转换。