一：使用Number()函數(shù)

字符串轉(zhuǎn)數(shù)字

• 如果是純數(shù)字的字符串，則直接將其轉(zhuǎn)換為數(shù)字

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

• 如果字符串中有非數(shù)字的內(nèi)容，則轉(zhuǎn)換為NaN

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

• 注意點(diǎn)：挖坑，數(shù)字字符串內(nèi)有 + - 是正負(fù)號(hào)，會(huì)正常轉(zhuǎn)換，而不是NaN（詳情見運(yùn)算符章節(jié)）

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

• 如果字符串是一個(gè)空串或者是一個(gè)全是空格的字符串，則轉(zhuǎn)換為0

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

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

布爾轉(zhuǎn)數(shù)字

• true轉(zhuǎn)換為1, false轉(zhuǎn)換為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轉(zhuǎn)數(shù)字

• null轉(zhuǎn)換為0

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

undefined轉(zhuǎn)數(shù)字

• undefined轉(zhuǎn)換為NaN

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

• 總結(jié):
  • 空字符串/false/null --> 0
  • 不僅僅包含數(shù)字的字符串和undefined --> 轉(zhuǎn)換為NaN
  • 其它的正常轉(zhuǎn)換

二：利用 + - 算數(shù)運(yùn)算符來轉(zhuǎn)換

• 在需要轉(zhuǎn)換的類型前面加上+加號(hào)或者-減號(hào)即可
• 注意點(diǎn):
  +加號(hào)不會(huì)改變數(shù)據(jù)的正負(fù)性
  -減號(hào)會(huì)改變數(shù)據(jù)的正負(fù)性

    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()函數(shù)轉(zhuǎn)換

• 通過Number函數(shù)或者通過+-運(yùn)算符轉(zhuǎn)換, 都不能轉(zhuǎn)換復(fù)雜的字符串，如"12px"

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

• 所以就有第三種轉(zhuǎn)換的方式, 通過parseInt()/parseFloat()函數(shù)提取數(shù)字
  • parseInt: 只能提取整數(shù)
  • 如果第一位不是有效數(shù)字, 什么都提取不到, 會(huì)返回NaN
  • 第一個(gè)參數(shù)是要轉(zhuǎn)換的字符串，第二個(gè)參數(shù)是要轉(zhuǎn)換的進(jìn)制

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

  • parseFloat:可以提取小數(shù)
  • 如果第一位不是有效數(shù)字, 什么都提取不到
  • 不支持第二個(gè)參數(shù)，只能解析10進(jìn)制數(shù)
  • 如果解析的內(nèi)容里只有整數(shù)，解析成整數(shù)

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

• parseInt/parseFloat , 會(huì)從左至右的提取, 一旦被中斷后續(xù)的就提取不到了

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

• 對(duì)于parseFloat來說, 只能提取一個(gè).遇到第二個(gè).或者非數(shù)字結(jié)束

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