我的JS筆記 -- 類型轉換


在JS中數據有七種內置類型:空值( null)、未定義( undefined)、布爾值( boolean)、數字( number)、字符串( string)、對象( object)、符號( symbol, ES6 中新增)

將值從一種類型轉換成另一種類型便是類型轉換,在JS中常常會自主或不經意間將值進行類型轉換。類型轉換通常有兩種情況一種是顯式強制類型轉換,這種情況是使用JS提供的類型轉換函數,將值轉換成特定的類型;另一種情況是隱式強制類型轉換,是在進行某些操作是JS隱式的將值的類型進行轉換后再進行操作。

顯式強制類型轉換

JS中提供了Number()、String()、Boolean()等函數將值轉換成特定的類型。這種使用函數方法顯式的將值的類型進行轉換就稱為顯式強制類型轉換。

  • Number(),將值的類型轉換成數字。Number()函數轉換規則:

    • 參數是布爾值,true和false分別轉換成1和1;

    • 參數是數字,返回參數本身;

    • 參數為null,返回0;

    • 參數是undefined,返回NaN;

    • 參數是字符串,有下面情況:

      • 參數字符串只包含數字,轉化成十進制數值;
      • 參數字符串包含有效浮點數,轉換成對應的浮點數值;
      • 參數字符串包含有效的十六進制格式,轉換成相應的十進制整數;
      • 參數字符串為空,轉換為0;
      • 參數字符串包含上述格式之外的字符,轉換為NaN;
    • 參數是對象,調用對象自身的valueOf()方法。如果返回原始類型的值,則直接對該值使用Number()函數,不再進行后續步驟。如果valueOf()方法返回的還是對象,則改為調用對象自身的toString()方法。如果toString()方法返回原始類型的值,則對該值使用Number()函數,不再進行后續步驟。如果toString()方法返回的是對象,就報錯。

        var a = {
            name: 'a',
        };
        Number(a); // NaN
        a.valueOf = function () {
                return 1;
        };
        Number(a); // 1
      
        var b = [2];
        b.valueof(); // [2]
        b.toString(); // '2'
        Number(b); // 2
      
  • JS中parseInt和parseFloat函數可以將字符串轉化為整數和浮點數,parseInt()可以傳遞第二個參數,代表解析的進制,parseFloat只能解析十進制值。這兩個方法允許字符串中含有非數字字符,解析按從左到右的順序,如果遇到非數字字符就停止,而Number()不允許參數含有非數字字符,如包含返回NaN。

      parseInt('10a') // 10
      parseInt('AF', 16) // 175
      parseInt('AF') // NaN 
      
      parseFloat('10.01a') // 10.01
    
  • toString()方法和String()函數,將值的類型轉換成字符串。

    • toString()方法,除null和undefined之外的所有值都有toString()方法,此方法可以接受一個參數,表示輸出數值的進制基數。

        var a = 10;     
        a.toString(); // '10'
        a.toString(2); // '1010',10的二進制字符串
      
        var b = null;
        b.toString(); // 報錯
      
        var c = {
            name: 'c'
        };
        c.toString(); // "[object Object]",默認的toString()方法可以用來判斷對象類型
        c.toString = function () {
            return 'c';
        };
        c.toString(); // 'c',改寫toString()方法,返回設定的值
      
    • String()函數,可以將任何類型的值轉換為字符串,轉換規則:

      • 參數有toString()方法,調用該方法返回結果;
      • 參數是null,返回'null';
      • 參數是undefined,返回'undefined';
  • Boolean()函數,將值轉換為布爾值,在JS中false、''、0、NaN、null、undefined為假,其余都為真值,所以使用Number()函數false、''、0、NaN、null、undefined會被轉換為false,其余轉換為true。

隱式強制類型轉換

在JS的某些操作中,JS會隱式將值進行類型轉換,例如使用'=='、'+'和'-'等操作,所以需要在不同情況下進行區分。

  • +運算符

    • +運算符單獨使用,類似于調用Number()函數;

        +'-1' // 1
        +{name: 'a'} // NaN
        +{name: 'b', toString: function () { return 2 }} // 2
      
    • +運算符作為加法運算符;

      • 如果兩個操作數都是數字,進行數學上的加法運算

      • 如果兩個操作數都是字符串,進行字符串拼接操作

      • 如果只有一個操作數是字符串,則將另一個操作數轉化為字符串,然后將兩個字符串拼接起來

          1 + 1 // 2
          'a' + 'b' // 'ab'
          1 + 'a' // '1a'
        
  • -*/運算符,會將兩邊操作數轉換為數字,轉換規則類似調用Number();

      1 - 'a' // NaN
      1 * 'a' // NaN
      1 / 'a' // NaN
    
      1 - '2' // -1
      1 * '2' // 2
      1 / '2' // 0.5
    
      1 - {name: 'b', toString: function () { return 2 }} // -1
      1 * {name: 'b', toString: function () { return 2 }} // 2
      1 / {name: 'b', toString: function () { return 2 }} // 0.5
    
  • ==運算符,在判定操作數是否相等時規則:

    • NaN不與任何數相等,包括NaN本身;

    • null與undefined寬松相等;

        null == undefined // true
        null === undefined // false
      
    • 操作數其中一個為數字,另一個為字符串,則將字符串轉換為數字;

        1 == '1' // true
        '1' == 1 // true
      
    • 操作數其中一個為布爾值,則將布爾值轉換為數字再進行比較;

        true == 1 // true
        true == '1' // true
        null == false // false
        true == { valueOf: function () {return 1;}} // true
      
    • 操作數一個為對象,另一個為數字或字符串,對象進行toPrimitive(obj)操作,等價于:先計算obj.valueOf(),如果結果為原始值,則返回此結果;否則,計算obj.toString();

        'a' == { valueOf: function () {return 'a';}} // true
        'a' == { toString: function () {return 'a';}} // true
        'a' == { valueOf: function () {return 'a';}, toString: function () {return 'b';}} // true
        'a' == { valueOf: function () {return 'b';}, toString: function () {return 'a';}} // false
      
  • 隱式轉換為布爾類型,在下面的情況下,值會被轉換為布爾類型,規則與調用Boolean()函數一致:

    • if (..) 語句中的條件判斷表達式;
    • for ( .. ; .. ; .. ) 語句中的條件判斷表達式(第二個);
    • while (..) 和 do..while(..) 循環中的條件判斷表達式;
    • ? : 中的條件判斷表達式;
    • 邏輯運算符 ||(邏輯或)和 &&(邏輯與)左邊的操作數(作為條件判斷表達式);

更多文章在 這里 ,覺得不錯希望點個 star

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容