CodeGym /Adesua ahorow /Frontend SELF TW /JavaScript中的類型轉換

JavaScript中的類型轉換

Frontend SELF TW
等級 35 , 課堂 0
開放

1.1 顯式類型轉換

在 JavaScript 中的類型轉換是將一個值從一種數據類型轉換為另一種數據類型的過程。有兩種類型的轉換:顯式(手動)和隱式(自動)。理解這些過程對於防止錯誤和創建可預測的代碼非常重要。

顯式轉換,也稱為手動轉換,是使用 JavaScript 的內建函數和方法來執行的轉換。在這種轉換中,程序員明確指示哪種類型的數據應轉換為另一種數據類型。

主要的顯式轉換方法:

1. 轉換為字符串

  • 方法 String(value): 將值轉換為字符串
JavaScript
    
      let num = 123;
      let str = String(num);
      console.log(typeof str); // "string"
    
  

  • value.toString(): 將值轉換為字符串的對象方法
JavaScript
    
      let bool = true;
      let str = bool.toString();
      console.log(typeof str); // "string"
    
  

2. 轉換為數字

  • Number(value): 將值轉換為數字
JavaScript
    
      let str = "456";
      let num = Number(str);
      console.log(typeof num); // "number"
    
  

  • parseInt(value, base): 將字符串轉換為整數。參數 base 指定進位制
JavaScript
    
      let str = "123";
      let num = parseInt(str, 10);
      console.log(typeof num); // "number"
    
  

  • parseFloat(value): 將字符串轉換為浮點數
JavaScript
    
      let str = "123.45";
      let num = parseFloat(str);
      console.log(typeof num); // "number"
    
  

3. 轉換為布林值

  • Boolean(value): 將值轉換為布林值
JavaScript
    
      let str = "";
      let bool = Boolean(str);
      console.log(typeof bool); // "boolean"
    
  

1.2 隱式類型轉換

隱式轉換,也稱作自動或隱藏轉換,由 JavaScript 在不同數據類型的運算時自動執行。隱式轉換可能導致意料之外的結果,因此需要理解並謹慎使用。

1. 轉換為字符串

重要!

將任何對象與字符串相加時,JavaScript 會嘗試將其轉換為字符串。

示例:

JavaScript
    
      let result = "The number is " + 123;
      console.log(result); // "The number is 123"
    
  

2. 轉換為數字

重要!

使用除 + 之外的任何算術運算符與包含數字的字符串進行運算時。

JavaScript
    
      let result = "123" - 0;
      console.log(result); // 123 (數字)
    
  

實際應用示例:

JavaScript
    
      let result = "123" - 10;
      console.log(result); // 113 (數字)

      let result2 = "123" + 10;
      console.log(result2); // 12310 (字符串)
    
  

3. 轉換為布林值

在邏輯上下文中使用值(條件語句、循環等)。

JavaScript
    
      let value = "hello";

      if (value) {
        console.log("Value is truthy");   // 輸出: "Value is truthy"
      }
    
  

邏輯上下文中的轉換示例:

  • false, 0, ""(空字符串), null, undefined, 和 NaN 被認為是假的 (false) 值
  • 所有其他值被認為是真的 (true)
JavaScript
    
      if ("") {
        console.log("This won't be logged.");
      } else {
        console.log('"" is considered false in a boolean context.');
      }

      // '"" is considered false in a boolean context.'
    
  

1.3 隱式轉換的示例

算術運算示例:

JavaScript
    
      let width = "100";
      let height = "200";

      let area = Number(width) * Number(height); // 顯式轉換
      console.log(area); // 20000

      let perimeter = (+width) + (+height); // 使用單目加號進行顯式轉換
      console.log(perimeter); // 300
    
  

邏輯上下文示例:

JavaScript
    
      let userInput = ""; // 空字符串

      if (!userInput) {
        console.log("用戶未輸入數據。"); // 隱式將字符串轉換為布林值
      }
    
  

混合類型示例:

JavaScript
    
      let value = "10";
      let increment = 5;

      let result = value + increment; // 隱式地將數字轉換為字符串
      console.log(result); // "105"

      result = Number(value) + increment; // 顯式將字符串轉換為數字
      console.log(result); // 15
    
  
留言
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION