flowers
【数值转换】将字符串等其他类型转换为数值时,Number(),parseInt(),parseFloat()到底用哪个?有啥区别?【JavaScript重嗑系列-Basic】

2021.07.095 min read

原创声明:未经允许,禁止转载

JavaScript中,当想把其他类型转换为数字时,大家都会用Number()的全局方法来。可是有时候这个方法并不能完全满足我们的需求,这时候,你应该知道还有另外两个有用的方法:parseInt()和parseFloat()。大多数时候如果你仅仅是想把一个字符串转换为整数的话,我会推荐你用parseInt()。看完本文你会知道原因~

在JavaScript中一共有三种方法可以把其他非数字类型转换为数字:

  1. Number(): 可以把任意类型转换为数字类型。
  2. parseInt(), parseFloat(): 只能用来把string类型转换为数字类型。

下面来具体看看它们的区别:


Number()

可以用来转换以下类型:

类型结果
Booleantrue → 1
false → 0
numbernumber
null0
undefinedNaN
strings仅仅是数字 → 数字(开始如果有0的话会被忽略,所以不会转换8进制数)
十六进制 → 整数(匹配十六进制值)
empty0
以上类型以外NaN
objects内部先用valueOf()看看是不是NaN,如果是就调用toString()方法转为字符串

以下是例子:

let num1 = Number("Hello world!");  // NaN
let num2 = Number("");  // 0

let num3 = Number("000011");   // 11
let num4 = Number(true);  // 1
parseInt ()

parseInt()方法会更仔细地检查字符串是否符合某一个数字模式。
因为Number()方法对应字符串转换的复杂性和奇异性(e.g.空字符串被转成0),大多时候如果是想把字符串转换为整数的话,我们还是会选用parseInt()方法。
如果第一个数不是一个数字,也不是负号或加号,parseInt()总是会返回NaN,因此也就意味着,空字符串也会被转成NaN。而如果字符串的第一个字符是数字或正负号,那么转换会继续直到字符串结束或者到达了一个非数字的字符后停止。

let num2 = parseInt(""); // NaN 
parseInt("1234blue567") => 1234
parseInt("-343apple") => -343
parseInt("+343apple") => 343
parseInt("22.5") => 22

parseInt()方法也可以识别不同的整数类型(十进制/八进制/十六进制)。这意味着如果string是以"0x"开头的,就会被作为16进制进行编译,如果是以“0”开头的,就是以8进制进行编译:

let num3 = parseInt("0xA"); // 10 - hexadecimal
let num5 = parseInt("70");  // 70 - decimal 
let num6 = parseInt("0xf"); // 15 - hexadecimal

这样的话形式就比较多了,有时候容易混乱。所以parseInt()提供了第二个参数:基数(位数)。如果你知道你要转的数是什么进制的,那你不如直接把进制写到第二个参数里,这样可以保证结果的准确性:

let num = parseInt("0xAF", 16); // 175
// 也可以省掉前面的0x
let num1 = parseInt("AF", 16); // 175
let num2 = parseInt("AF");  // NaN

更改基数很显然会改变转换的结果:

let num1 = parseInt("10", 2);  // 2 - 二进制
let num2 = parseInt("10", 8);  // 8 - 八进制
let num3 = parseInt("10", 10);  // 10 - 十进制
let num4 = parseInt("10", 16);  // 16 - 十六进制
parseFloat()

parseFloat()和parseInt()的工作方式类似:也是从位置0开始转换字符串直到到达了字符串末尾或者遇到了无效的浮点数。
这意味着当第一次遇到小数点的时候,它是有效的,但如果小数点出现了第二次,它和它之后出现的任何字符就都会被无视掉,比如“34.5.65ra”就会被转换为“34.5”。
初始的0总是会被无视掉。并且parseFloat()函数仅仅转换十进制数,如果是十六进制,结果总会是0。因为parseFloat()没有进制转换模式。另外,如果被转换的是一个整数(没有小数点或者小数点之后只有0),那么parseFloat()会返回整数。

let num1 = parseFloat("1234blue"); // 1234 - integer
let num2 = parseFloat("0xA");   // 0 
let num3 = parseFloat("22.5");  // 22.5
let num4 = parseFloat("22.34.5");  // 22.34
let num5 = parseFloat("0908.5");  // 908.5
let num6 = parseFloat("3.125e7"); // 31250000

综上,可见当转换字符串为整数(无论什么进制),用parseFloat()转换结果会比较准确。