04-JavaScript基礎(chǔ)-數(shù)據(jù)類型轉(zhuǎn)換

什么是數(shù)據(jù)類型轉(zhuǎn)換

  • 將一個數(shù)據(jù)類型轉(zhuǎn)換為其他的數(shù)據(jù)類型
    • 例如: 將Number類型轉(zhuǎn)換為Boolean類型
    • 例如: 將Number類型轉(zhuǎn)換為字符串類型
    • ... ...

將其它類型轉(zhuǎn)換為字符串

調(diào)用被轉(zhuǎn)換數(shù)據(jù)類型的toString()方法

        var num1 = 10;
        var res1 = num1.toString(); // 重點
        console.log(res1); // 10
        console.log(typeof res1); // string

        var num2 = true;
        var res2 = num2.toString(); // 重點
        console.log(res2); // true
        console.log(typeof res2); // string
  • null和undefined這兩個值沒有toString()方法，如果調(diào)用他們的方法，會報錯
        var num3 = undefined;
        var res3 = num3.toString(); // 報錯
        console.log(res3);

        var num4 = null;
        var res4 = num4.toString(); // 報錯
        console.log(res4);

        var num5 = NaN;
        var res5 = num5.toString();
        console.log(res5); // NaN
        console.log(typeof res5); // String
  • 該方法不會影響到原變量，它會將轉(zhuǎn)換的結(jié)果返回
        var num6 = 10;
        var res6 = num6.toString();
        console.log(typeof num6); // number
        console.log(typeof res6); // string
  • 數(shù)值類型的toString()，可以攜帶一個參數(shù)，輸出對應(yīng)進制的值(暫時不用了解, 講到進制轉(zhuǎn)換再回來看)
        var num7 = 20;
        var res7 = num7.toString(2);
        var res8 = num7.toString(8);
        var res9 = num7.toString(10);
        var res10 = num7.toString(16);
        console.log(res7); // 10100
        console.log(res8); // 24
        console.log(res9); // 20
        console.log(res10); // 14

將被轉(zhuǎn)換的數(shù)據(jù)傳入String()函數(shù)中

  • String()函數(shù)存在的意義：
    • 有些值沒有toString()，這個時候可以使用String()。比如：undefined和null
  • 對于Number和Boolean實際上就是調(diào)用的toString()方法
        var num1 = 10;
        var res1 = String(num1); // 重點
        console.log(res1); // 10
        console.log(typeof res1); // string

        var num2 = true;
        var res2 = String(num2); // 重點
        console.log(res2); // true
        console.log(typeof res2); // string
  • 對于null和undefined，就不會調(diào)用toString()方法(因為這兩個哥們沒有這個方法).而是在內(nèi)部生成一個新的字符串
        var num3 = undefined;
        var res3 = String(num3);
        console.log(res3); // undefined
        console.log(typeof res3); // string

        var num4 = null;
        var res4 = String(num4);
        console.log(res4); // null
        console.log(typeof res4); // string

將被轉(zhuǎn)換的數(shù)據(jù)和+""連接到一起

  • 任何數(shù)據(jù)和 +"" 連接到一起都會轉(zhuǎn)換為字符串
  • 內(nèi)部實現(xiàn)原理和String()函數(shù)一樣
        var num1 = 10;
        var res1 = num1 + "";
        console.log(res1); // 10
        console.log(typeof res1); // string

        var num2 = true;
        var res2 = num2 + "";
        console.log(res2); // true
        console.log(typeof res2); // string

        var num3 = undefined;
        var res3 = num3 + "";
        console.log(res3); // undefined
        console.log(typeof res3); // string

        var num4 = null;
        var res4 = num4 + "";
        console.log(res4); // null
        console.log(typeof res4); // string

將其它類型轉(zhuǎn)換為Number類型

將被轉(zhuǎn)換的數(shù)據(jù)傳入Number()函數(shù)中

  • 字符串 --> 數(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
    • 如果字符串是一個空串或者是一個全是空格的字符串，則轉(zhuǎn)換為0 
          var str3 = "";
    var res3 = Number(str3);
    console.log(res3); // 0

    var str4 = "    ";
    var res4 = Number(str4);
    console.log(res4); // 0
  • 布爾 --> 數(shù)字
    • true 轉(zhuǎn)成 1
    • false 轉(zhuǎn)成 0 
          var bool1 = true;
    var res5 = Number(bool1);
    console.log(res5); // 1

    var bool2 = false;
    var res6 = Number(bool2);
    console.log(res6); // 0
  • null --> 數(shù)字 --> 0 
        var str5 = null;
    var res7 = Number(str5);
    console.log(res7); // 0
  • undefined --> 數(shù)字 --> NaN 
       var str6 = undefined;
   var res8 = Number(str6);
   console.log(res8); // NaN

將被轉(zhuǎn)換的數(shù)據(jù)傳入parseInt()函數(shù)中/parseFloat()函數(shù)中

  • Number()函數(shù)中無論混合字符串是否存在有效整數(shù)都會返回NaN

  • 利用parseInt()/parseFloat()可以提取字符串中的有效整數(shù)

  • 兩者之前的區(qū)別是前者只能提取整數(shù),后者可以提取小數(shù)

  • parseInt()提取字符串中的整數(shù)

    • 從第一位有效數(shù)字開始, 直到遇到無效數(shù)字
    • 如果第一位不是有效數(shù)字, 什么都提取不到, 會返回NaN
    • 第一個參數(shù)是要轉(zhuǎn)換的字符串，第二個參數(shù)是要轉(zhuǎn)換的進制 
          var str7 = "300px";
    var res9 = parseInt(str7);
    console.log(res9); // 300

    var str8 = "300px250";
    var res10 = parseInt(str8);
    console.log(res10); // 300

    console.log(parseInt("abc123"));  //返回NaN，如果第一個字符不是數(shù)字或者符號就返回NaN
    console.log(parseInt(""));        //空字符串返回NaN，Number("")返回0

  • parseFloat提取字符串中的小數(shù)

    • 會解析第一個. 遇到第二個.或者非數(shù)字結(jié)束
    • 如果第一位不是有效數(shù)字, 什么都提取不到
    • 不支持第二個參數(shù)，只能解析10進制數(shù)
    • 如果解析的內(nèi)容里只有整數(shù)，解析成整數(shù) 
          var str9 = "20.5px";
    var res11 = parseInt(str9);
    console.log(res11); // 20

    var str10 = "20.5.5.5px";
    var res12 = parseFloat(str10);
    console.log(res12); // 20.5

  • 對非String使用parseInt()或parseFloat(), 會先將其轉(zhuǎn)換為String然后在操作

        var str11 = true;
        var res13 = parseInt(str11); // 這里相當(dāng)于parseInt("true");
        console.log(res13); // NaN
        var res14 = Number(str11);
        console.log(res14); // 1

進制轉(zhuǎn)換

  • 什么是進制?

    • 是一種計數(shù)的方式,數(shù)值的表示形式

  • 常見的進制

    • 十進制、二進制、八進制、十六進制

  • 進制數(shù)字進位方法

    • 十進制 0、1、2、3、4、5、6、7、8、9 逢十進一
    • 二進制 0、1 逢二進一
      • 書寫形式:需要以0b或者0B開頭,比如0b101
    • 八進制 0、1、2、3、4、5、6、7 逢八進一
      • 書寫形式:在前面加個0,比如045
    • 十六進制 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F 逢十六進一
      • 16進制就是逢16進1,但我們只有0~9這十個數(shù)字,所以我們用A,B,C,D,E,F這五個字母來分 別表示10,11,12,13,14,15。字母不區(qū)分大小寫。
      • 書寫形式:在前面加個0x或者0X,比如0x45

  • 數(shù)一下方塊的個數(shù), 并用十進制,二進制,八進制,十六進制表示


  • 練習(xí)判斷下列數(shù)字是否合理

00011  0x001  0x7h4  10.98  0986  .089-109
+178  0b325  0b0010  0xffdc  -.003
  • 十進制轉(zhuǎn)換二進制
    • 規(guī)律: 用需要轉(zhuǎn)換的十進制/2取余然后倒敘 
          9 / 2 = 4 = 1
    4 / 2 = 2 = 0
    2 / 2 = 1 = 0
    1 / 2 = 0 = 1
    結(jié)果1001

    var num = 0b1001;
    console.log(num);
    console.log(parseInt("1001", 2));
  • 二進制轉(zhuǎn)換十進制
    • 規(guī)律: 從低位數(shù)開始, 用低位 * 2的多少次冪, 冪數(shù)從0開始遞增 
          1001
    1 * 2(0) = 1
    0 * 2(1) = 0
    0 * 2(2) = 0
    1 * 2(3) = 8
    結(jié)果: 1 + 0 + 0 +8 = 9
  • 二進制轉(zhuǎn)換八進制
    • 因為八進制逢八進一
    • 規(guī)律: 三個二進制位代表一個八進制位, 只需要從低位開始將三個二進制位轉(zhuǎn)換為十進制再鏈接起來 
                 00 001 001
 結(jié)果:    0     1     1 = 011
 console.log(parseInt("011", 8)); // 9
  • 二進制轉(zhuǎn)換十六進制
    • 因為十六進制逢十六進一
    • 規(guī)律: 四個二進制位代表一個十六進制位, 只需要從低位開始將事個二進制位轉(zhuǎn)換為十進制再鏈接起來 
              0001 1011
  結(jié)果:    1      b = 0x1b
  console.log(parseInt("0x1b", 16));// 27

學(xué)習(xí)交流方式:
1.微信公眾賬號搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學(xué)習(xí)交流群:
302942894 / 289964053 / 11550038

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容