今天写代码的时候遇到一个问题,获取了一个span元素的值,但是+1的时候却出现了25+1=251的情况。原来是获取的值为字符串,所以对字符串进行了拼接。
我又翻了翻js高程,仔细看了看关于字符串,数字,布尔值的互相转换问题,这里先介绍字符串转数字。
js里有三种方法可以完成字符串转数字,分别是
Number()
parseInt()
parseFloat()
那么它们有什么区别呢?
Number()
- 如果字符串只包含数字,则将其转换为十进制数值,即
"123"
会变成123
- 如果字符串包含十六进制格式,例如
"0xf"
,则将其转换为相同大小的十进制整数值 - 如果字符串为空,转换为
0
- 如果是上述格式之外的字符,转换为
NaN
例如123var num1 = Number("Hello world!"); //NaNvar num2 = Number(""); //0var num3 = Number("000011"); //NaN
- 如果字符串只包含数字,则将其转换为十进制数值,即
parseInt()
由于Number()
处理字符串比较复杂且不够合理,所以处理整数常用parseInt()
parseInt()
转换字符的时候,会识别字符是否符合数值模式,它会忽略字符串前面的空格,从第一个非空格字符开始解析,如果是非数字符号或正负号,则返回NaN
。如果第一个非空字符是数字符号或正负号,那么会继续解析,直到解析完或遇到非数字符号,比如1234blue
会被转换成1234
, 但是需要注意的是,小数点并不算是数字符号,所以22.5
会被解析为22
。同时也能解析八进制或十六进制的数。
例如12345var num1 = parseInt("1234blue"); //1234var num2 = parseInt(""); //NaNvar num3 = parseInt("22.5"); //22var num4 = parseInt("070"); //56(八进制数)var num5 = parseInt("0xf"); //15(十六进制数)
另外一点,由于 parseInt()
在解析八进制数字的时候,ECMAScript3和5存在分歧,所以 parseInt()
可以制定两个参数,即转换的进制,比如
parseFloat()
与parseInt()
类似,也是从第一个字符开始解析,但是小数点是有效的,因为parseFloat()
解析的不是数字符号,而是浮点数字字符,但第二个小数点就无效了。比如"22.34.5"
会背转换为22.34
需要注意的是parseFloat()
只能解析十进制的数字。
例如1234var num1 = parseFloat("1234blue"); //1234var num2 = parseFloat("22.5"); //22.5var num3 = parseFloat("22.34.5"); //22.34var num4 = parseFloat("0xA"); //0