【又見JavaScript】面試準備必練的關于JS值的顯式類型轉換/隐式類型轉換

關于JS值的顯式類型轉換/隐式類型轉換

顯式類型轉換

Number()

當( )内需轉換的值不同時：

• 值是“123”或“3.14159”這種以數字組成的字元串時，傳回數字類型的123，3.14159
• 值是“abc”或“23a”，有字元組成的字元串，或 undefined 時，傳回數字類型的NaN
• 值是true、false、null（不是字元串）的關鍵字時，傳回1,0,0

parseInt()

： 隻能轉換成整型，從第一位開始判斷是否為數字

parseInt(value,radix)

：

• radix 是進制，可以是按不同進制轉換，ES5規定如果省略就代表用十進制解析

  當( )内需轉換的值不同時：

  • 值是“123”/“3.14159”這種以數字組成的字元串時，傳回小數點前面的數字，不會四舍五入；
  • 值是true、false、null、undefined、NaN（不是字元串）的關鍵字時，傳回NaN；
  • 值是數字開頭的，且有字元組成的字元串如“123ab11”時，傳回字元前的數字；
  • 值是以字元開頭，且有數字組成的字元串如“fff88”時，傳回NaN；

parseFloat()

隻接受一個參數，隻能使用十進制去解析

• 會把有小數點的數字字元串轉換出來
• 若想保留幾位小數，使用

  .toFixed()

  方法，( )裡填需要保留幾位，此方法傳回的值會四舍五入

String()

轉換為字元串

• 平時更多使用 值+“” （引号）去進行字元串的轉換

• toString(value,radix)

  也可以填radix 幾進制的轉換

Boolean()

• undefined | null | NaN | “” | 0 轉換的值都為 false
• 其餘都是true

隐式類型轉換

• 自增/自減

  var a = '123'; 
  a++; // 先将a隐式轉換了，Number(a)再進行自增； 
  console.log(a);
             

• “+” 号拼接

  var a = 'a' + 1; 
   // 先将數字1隐式轉換了，Number(1)，再進行拼接； 
  console.log(a); // a1
             

• “*  /  -” 号 數學運算：有對象時，對象先轉換為字元串再轉換為數字進行計算

  var a = "3" * 2; // 先把string隐式轉換為number Number(3)
  console.log(a); // 6
  
  // 在字元串前面加上正負号，也會使得字元串轉換為Number
  var num = "123";
  console.log(typeof(+ num)) // number 負号也是如此 不過是負的
  var n = "abc";
  console.log(typeof(+ n)+":" + + n ); // number:NaN 負号也是如此
             

• “>  <  >=  <=” 的使用

  var a = '1' > 2; // 先Number(1) -> 再與數字2作比較
  console.log(a); // false
  // 補充： 兩個字元串的比較
  var b = 'a' > 'c'; // 根據ascii碼值進行比較
  console.log(b); 
  
  var a1 = 2 > 1 > 3; // 注意，這裡有中間有一次轉換！！
  //1) 2>1 -> true 
  //2) true->1 先隐式轉換為數字1，Number(true)再比較
  //3) 1>3 -> false
  var a2 = 2 > 1 == 1; // 2>1 -> true true == 1 -> true
  console.log(a1,a1); // false true
             

一些浏覽器的運算 | 比較 | 轉換規律

“ == ” 相等 and “ === ” 絕對相等的區分 🤷‍♀️

1. == 相等的比較規律/轉換規則（含隐式轉換）：

   1. 對象 == 字元串：其中的對象會先轉換為字元串（aka：執行了對象.toString()），再比較

      eg.  [10] == ‘10’;// true

   2. null == undefined：結果為 true（===時不等）

      0 == null：結果為 false（與底層機制的轉換不同有關）

      ❗注意：他們倆兄弟(null和undefined)，既不大于0，也不小于0，更不等于0

      且 null & undefined 和其它值都不相等 （0 是有自己的記憶體空間的值，而null是沒有自己的記憶體空間的）

   3. NaN 和任何類型的值相比較都不相等（包括它自己）
   4. 剩下的兩邊不同時都是轉換為數字進行比較【對象轉數字：

      Number(對象.toString())

      】
   練習題1：

   [] == false;
   // [] -> [].toString() -> '' -> Number('') -> 0
   // false -> 0
   // true
              

   練習題2：

   ![] == false;
   // 涉及運算符優先級：
   // 		先進行![]，再進行 == 比較
   
   // ![] -> !true -> false
   // false == false 
   
   // 結果 true
   !![] //true
   
   !!NaN //false
              

2. === 絕對相等的比較規律/轉換規則：

   兩邊的類型、值都一緻才相等，類型不同時，直接不對等，不會進行隐式轉換；項目中用它更好👏

以上兩個相等的差別，隻要掌握了隐式轉換就不難了解和區分啦~

isNaN()的判斷規則

• 先把其它類型值進行

  Number()

  的轉換為數字再檢測是否為非數NaN，傳回true 或 false
• 檢測步驟總結：

  Number(值)

  --> 判斷是否為NaN --> 傳回Boolean值
• 也就是說，我們能根據

  Number()

  的轉換規律即可自行判斷其傳回值：

代碼輸出一下來驗證：

console.log(isNaN(123)); // false 本身就不是非數
console.log(isNaN("123")); // false 在Number("123")轉換後 不是非數
console.log(isNaN("a")); // true Number("a")後，是NaN
console.log(isNaN(null));// false Number(null)後，是0
console.log(isNaN(undefined)); // true Number(undefined)後，是NaN
           

typeof 😎

• 可能傳回的值

  object(null)

  /

  boolean

  /

  number

  /

  string

  /

  undefined

  /

  function

• 檢測特點
  • 傳回的結果都是字元串

  • 因為傳回的都是字元串

    ，是以兩個及以上的typeof一起使用時得出的結果都是"string"!!!

• 局限性

  （所有的值在記憶體中都是按照二進制存儲的，當檢測的資料類型為

  null

  時，對應的二進制編碼是000，

  typeof

  會把所有二進制碼為0的資料顯示為

  object

  ，是以其對null的檢測結果是

  object

  ）

  • typeof null => "object"

  • typeof 不能細分對象類型(檢測普通對象或者數組對象等都是"object")

  

在 Chrome 浏覽器中，可以通過控制台顯示的字型與顔色直覺判斷出資料類型