JavaScript数据类型转换——转换成Number类型

一：使用Number()函数

字符串转数字

• 如果是纯数字的字符串，则直接将其转换为数字

    var str1 = "123";
    var res1 = Number(str1);
    console.log(res1); // 123
    console.log(typeof  res1); // number

• 如果字符串中有非数字的内容，则转换为NaN

    var str2 = "123ab";
    var res2 = Number(str2);
    console.log(res2); // NaN

• 注意点：挖坑，数字字符串内有 + - 是正负号，会正常转换，而不是NaN（详情见运算符章节）

  var nums = "+100";
  var reses = Number(nums);
  console.log(reses);  //100
  var nums2 = "-100";
  reses2 = Number(nums2);
  console.log(reses2);  //-100

• 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

    var str3 = "";
    var res3 = Number(str3);
    console.log(res3); // 0

    var str4 = "    ";
    var res4 = Number(str4);
    console.log(res4); // 0

---

布尔转数字

• true转换为1, false转换为0

    var flag1 = true;
    var flag2 = false;
    // true --> 1
    var res3 = Number(flag1);
    console.log(res3);

    // false --> 0
    var res4 = Number(flag2);
    console.log(res4);

null转数字

• null转换为0

   // null --> 0
    var n = null;
    var res5 = Number(n);
    console.log(res5);  //0
    var res05 = Number(null);
    console.log(res05);  //0

undefined转数字

• undefined转换为NaN

    // NaN -- > Not a Number
    var u = undefined;
    var res6 = Number(u);
    console.log(res6);

• 总结:
  • 空字符串/false/null --> 0
  • 不仅仅包含数字的字符串和undefined --> 转换为NaN
  • 其它的正常转换

---

二：利用 + - 算数运算符来转换

• 在需要转换的类型前面加上+加号或者-减号即可
• 注意点:
  +加号不会改变数据的正负性
  -减号会改变数据的正负性

    var str1 = "123";
    var str2 = "3.14";
    var flag1 = true;
    var flag2 = false;
    var n = null;
    var u = undefined;

    var res1 = +str1;
    console.log(res1);  //123
    console.log(typeof res1);

    var res2 = -str1;
    console.log(res2);  //-123
    console.log(typeof res2);

    var res3 = +str2;
    console.log(res3);  //3.14

    var res4 = +flag1;
    console.log(res4);  //1

    var res5 = +flag2;
    console.log(res5);  //0

    var res6 = +n;
    console.log(res6);  //0

    var res7 = +u;
    console.log(res7);  //NaN

---

三：通过parseInt()/parseFloat()函数转换

• 通过Number函数或者通过+-运算符转换, 都不能转换复杂的字符串，如"12px"

    var str1 = "12px";
    var res1 = Number(str1); // NaN
    console.log(res1);
    var res2 = +str1; // NaN
    console.log(res2);

• 所以就有第三种转换的方式, 通过parseInt()/parseFloat()函数提取数字
  • parseInt: 只能提取整数
  • 如果第一位不是有效数字, 什么都提取不到, 会返回NaN
  • 第一个参数是要转换的字符串，第二个参数是要转换的进制

   var str1 = "3.14px";
   var res1 = parseInt(str1);
   console.log(res1);  //3
   console.log(typeof res1); //number
  

  • parseFloat:可以提取小数
  • 如果第一位不是有效数字, 什么都提取不到
  • 不支持第二个参数，只能解析10进制数
  • 如果解析的内容里只有整数，解析成整数

  var res2 = parseFloat(str1);
  console.log(res2);  //3.14
  console.log(typeof res2); //number
  

• parseInt/parseFloat , 会从左至右的提取, 一旦被中断后续的就提取不到了

    var str = "12px666px";
    var res1 = parseInt(str);
    console.log(res1);  //12

• 对于parseFloat来说, 只能提取一个.遇到第二个.或者非数字结束

    var str = "3.14.15px";
    var res1 = parseFloat(str);
    console.log(res1);  //3.14