js字符串转数字

今天写代码的时候遇到一个问题,获取了一个span元素的值,但是+1的时候却出现了25+1=251的情况。原来是获取的值为字符串,所以对字符串进行了拼接。

我又翻了翻js高程,仔细看了看关于字符串,数字,布尔值的互相转换问题,这里先介绍字符串转数字。

js里有三种方法可以完成字符串转数字,分别是

  • Number()
  • parseInt()
  • parseFloat()

那么它们有什么区别呢?

  1. Number()

    • 如果字符串只包含数字,则将其转换为十进制数值,即 "123" 会变成 123
    • 如果字符串包含十六进制格式,例如 "0xf" ,则将其转换为相同大小的十进制整数值
    • 如果字符串为空,转换为 0
    • 如果是上述格式之外的字符,转换为 NaN
      例如
      1
      2
      3
      var num1 = Number("Hello world!"); //NaN
      var num2 = Number(""); //0
      var num3 = Number("000011"); //NaN
  2. parseInt()
    由于Number()处理字符串比较复杂且不够合理,所以处理整数常用 parseInt()
    parseInt() 转换字符的时候,会识别字符是否符合数值模式,它会忽略字符串前面的空格,从第一个非空格字符开始解析,如果是非数字符号或正负号,则返回 NaN 。如果第一个非空字符是数字符号或正负号,那么会继续解析,直到解析完或遇到非数字符号,比如 1234blue 会被转换成 1234, 但是需要注意的是,小数点并不算是数字符号,所以 22.5 会被解析为 22。同时也能解析八进制或十六进制的数。
    例如

    1
    2
    3
    4
    5
    var num1 = parseInt("1234blue"); //1234
    var num2 = parseInt(""); //NaN
    var num3 = parseInt("22.5"); //22
    var num4 = parseInt("070"); //56(八进制数)
    var num5 = parseInt("0xf"); //15(十六进制数)

另外一点,由于 parseInt() 在解析八进制数字的时候,ECMAScript3和5存在分歧,所以 parseInt() 可以制定两个参数,即转换的进制,比如

1
2
3
4
5
6
var num1 = parseInt("AF", 16); //175
var num2 = parseInt("AF"); //NaN
var num3 = parseInt("10", 2); //2(按二进制解析)
var num4 = parseInt("10", 8); //8(按八进制解析)
var num5 = parseInt("10", 10); //10(按十进制解析)
var num6 = parseInt("10", 16); //16(按十六进制解析)

  1. parseFloat()
    parseInt() 类似,也是从第一个字符开始解析,但是小数点是有效的,因为 parseFloat() 解析的不是数字符号,而是浮点数字字符,但第二个小数点就无效了。比如 "22.34.5" 会背转换为 22.34
    需要注意的是 parseFloat() 只能解析十进制的数字。
    例如
    1
    2
    3
    4
    var num1 = parseFloat("1234blue"); //1234
    var num2 = parseFloat("22.5"); //22.5
    var num3 = parseFloat("22.34.5"); //22.34
    var num4 = parseFloat("0xA"); //0
努力<br><br>希望能成为一名前端工程师<br>加油