JavaScript - 型別轉換

上一頁
下一頁

JavaScript 型別轉換

JavaScript 中的型別轉換是指在 JavaScript 中自動或顯式地將資料從一種資料型別轉換為另一種資料型別的過程。這些轉換對於 JavaScript 有效地執行操作和比較至關重要。由於 JavaScript 是一種弱型別語言，因此 JavaScript 變數可以包含任何資料型別的值。

JavaScript 中有兩種型別的型別轉換：

  • 隱式型別轉換
  • 顯式型別轉換

隱式型別轉換也稱為強制轉換。

隱式型別轉換

當型別轉換由 JavaScript 自動完成時，稱為隱式型別轉換。例如，當我們使用“+”運算子結合字串和數字運算元時，JavaScript 會將數字轉換為字串並將其與字串連線起來。

以下是一些隱式型別轉換的示例。

轉換為字串（隱式轉換）

在這個示例中，我們使用“+”運算子將不同的值隱式轉換為字串資料型別。

"100" + 24; // Converts 24 to string
'100' + false; // Converts false boolean value to string
"100" + null; // Converts null keyword to string

請注意，要使用“+”運算子將值轉換為字串，其中一個運算元必須是字串。

讓我們嘗試下面的示例，並檢查輸出：

<html>
<head>
   <title>Implicit conversion to string </title>
</head>
<body>
   <script>
      document.write("100" + 24 + "<br/>");
      document.write('100' + false + "<br/>");
      document.write("100" + null+ "<br/>");
      document.write("100" + undefined+ "<br/>");
   </script>
</body>
</html>

轉換為數字（隱式轉換）

當您使用包含數字的字串值與除了“+”運算子之外的算術運算子一起使用時，它會自動將運算元轉換為數字並執行算術運算，您可以在下面的示例中看到。

布林值也會被轉換為數字。

'100' / 50; // Converts '100' to 100
'100' - '50'; // Converts '100' and '50' to 100 and 50
'100' * true; // Converts true to 1
'100' - false; // Converts false to 0
'tp' / 50 // converts 'tp' to NaN

嘗試下面的示例並檢查輸出：

<html>
<head>
    <title> Implicit conversion to Number </title>
</head>
<body>
    <script>
    	document.write(('100' / 50) + "<br>");
        document.write(('100' - '50') + "<br>");
        document.write(('100' * true) + "<br>");
        document.write(('100' - false) + "<br>");
        document.write(('tp' / 50) + "<br>");
      </script>
</body>
</html>

轉換為布林值（隱式轉換）

當您將 Nullish（!!）運算子與任何變數一起使用時，它會將其值隱式轉換為布林值。

num = !!0; // !0 = true, !!0 = false
num = !!1; // !1 = false, !!1 = true
str = !!""; // !"" = true, !!"" = false
str = !!"Hello"; // !"Hello" = false, !!"Hello" = true

Null 到數字（隱式轉換）

在 JavaScript 中，null表示空。因此，當我們將其用作算術運算子的運算元時，null會自動轉換為0。

let num = 100 + null; // Converts null to 0
num = 100 * null;  // Converts null to 0

Undefined 與數字和布林值（隱式轉換）

使用undefined與“number”或“boolean”值一起使用時，輸出始終為NaN。這裡，NaN 表示非數字。

<html>
<head>
   <title> Using undefined with a number and boolean value </title>
</head>
<body>
   <script>
      let num = 100 + undefined; // Prints NaN
      document.write("The value of the num is: " + num + "<br>");
      num = false * undefined; // Prints NaN
      document.write("The value of the num is: " + num + "<br>");
   </script>
</body>
</html>

顯式型別轉換

在許多情況下，程式設計師需要手動轉換變數的資料型別。這稱為顯式型別轉換。

在 JavaScript 中，您可以使用建構函式或內建函式來轉換變數的型別。

轉換為字串（顯式轉換）

您可以使用String()建構函式將數字、布林值或其他資料型別轉換為字串。

String(100); // number to string
String(null); // null to string
String(true); // boolean to string

示例

您可以使用 String() 建構函式將值轉換為字串。您還可以使用typeof運算子檢查結果值的資料型別。

<html>
<head>
    <title> Converting to string explicitly </title>
</head>
<body>
    <script>
        document.write(typeof String(100) + "<br/>");
        document.write(typeof String(null)+ "<br/>");
        document.write(typeof String(true) + "<br/>");	
    </script>
</body>
</html>

我們還可以使用 Number 物件的toString()方法將數字轉換為字串。

const num = 100;
num.toString() // converts 100 to '100'

轉換為數字（顯式轉換）

您可以使用Number()建構函式將字串轉換為數字。我們還可以使用一元加(+)運算子將字串轉換為數字。

Number('100'); // Converts '100' to 100
Number(false); // Converts false to 0
Number(null); // Converts null to 0
num = +"200"; // Using the unary operator

但是，您也可以使用以下方法和變數將字串轉換為數字。

序號 方法/運算子 描述
1 parseFloat() 從字串中提取浮點數。
2 parseInt() 從字串中提取整數。
3 + 它是一個一元運算子。

示例

您可以使用Number()建構函式或一元(+)運算子將字串、布林值或任何其他值轉換為數字。

Number()函式還將數字的指數表示法轉換為十進位制數字。

<html>
<head>
   <title> Converting to string explicitly </title>
</head>
<body>
   <script>
      document.write(Number("200") + "<br/>");
      document.write(Number("1000e-2") + "<br/>");
      document.write(Number(false) + "<br/>");
      document.write(Number(null) + "<br/>");
      document.write(Number(undefined) + "<br/>");
      document.write(+"200" + "<br/>");
   </script>
</body>
</html>

轉換為布林值（顯式轉換）

您可以使用Boolean()建構函式將其他資料型別轉換為布林值。

Boolean(100); // Converts number to boolean (true)
Boolean(0); // 0 is falsy value (false)
Boolean(""); // Empty string is falsy value (false)
Boolean("Hi"); // Converts string to boolean (true)
Boolean(null); // null is falsy value (false)

示例

您可以使用Boolean()建構函式將值轉換為布林值。所有假值，如0、空字串、null、undefined等，都將轉換為false，其他值將轉換為true。

<html>
<head>
   <title> Converting to string explicitly </title>
</head>
<body>
   <script>
      document.write(Boolean(100) + "<br/>");
      document.write(Boolean(0) + "<br/>");
      document.write(Boolean("") + "<br/>");
      document.write(Boolean("Hi") + "<br/>");
      document.write(Boolean(null) + "<br/>");
   </script>
</body>
</html>

將日期轉換為字串/數字

您可以使用Date物件的Number()建構函式或getTime()方法將日期字串轉換為數字。數字日期表示自1970年1月1日以來的毫秒總數。

請按照以下語法將日期轉換為數字。

Number(date);
OR
date.getTime();

您可以使用String()建構函式或toString()方法將日期轉換為字串。

請按照以下語法將日期轉換為字串。

String(date);
OR
date.toString();

讓我們嘗試透過一個程式來演示這一點。

<html>
<head>
   <title> Coverting date to string / number </title>
</head>
<body>
   <script>
      let date = new Date();
      let numberDate = date.getTime();
      document.write("The Numeric date is: " + numberDate + "<br/>");
      let dateString = date.toString();
      document.write("The string date is: " + dateString + "<br/>");
   </script>
</body>
</html>

JavaScript 中的轉換表

在下表中，我們給出了原始值以及將其轉換為字串、數字和布林值時的結果值。

值 字串轉換 數字轉換 布林轉換
0 "0" 0 false
1 "1" 1 true
"1" "1" 1 true
"0" "0" 0 true
"" "" 0 false
"Hello" "Hello" NaN true
true "true" 1 true
false "false" 0 false
null "null" 0 false
undefined "undefined" NaN false
[50] "50" 50 true
[50, 100] "[50, 100]" NaN true
列印頁面
上一篇
下一篇
廣告