JavaScript - 資料型別

上一頁
下一頁

JavaScript 資料型別

JavaScript 中的資料型別指的是我們儲存或操作的值的型別。程式語言最基本的特點之一就是它支援的資料型別集合。這些是在程式語言中可以表示和操作的值的型別。

JavaScript 資料型別可以分為原始型別和非原始型別（物件）。JavaScript（ES6 及更高版本）允許你使用七種原始資料型別：

  • 字串文字，例如 "This text string" 等。
  • 數字，例如 123, 120.50 等。
  • 布林值，例如 true 或 false。
  • null
  • undefined
  • BigInt
  • Symbol

BigInt 和 Symbol 是在 ES6 中引入的。在 ES5 中，只有五種原始資料型別。

除了這些原始資料型別外，JavaScript 還支援一種稱為物件的複合資料型別。我們將在單獨的章節中詳細介紹物件。

物件資料型別包含 3 個子資料型別：

  • Object
  • Array
  • Date

為什麼資料型別很重要？

在任何程式語言中，資料型別對於操作都很重要。

例如，以下程式碼生成“1010”輸出。

let sum = "10" + 10;

在這裡，JavaScript 引擎將第二個運算元轉換為字串，並使用 '+' 運算子將其組合在一起，而不是將它們相加。

因此，你需要確保運算元的型別正確。

現在，讓我們學習每種資料型別及其示例。

JavaScript 字串

在 JavaScript 中，字串是一系列字元，可以使用以下 3 種不同的方式建立：

  • 使用單引號
  • 使用雙引號
  • 使用反引號

示例

在下面的示例中，我們使用單引號、雙引號和反引號建立了字串。在輸出中，它為所有 3 個字串列印相同的結果。

<html>
<head>
   <title> JavaScript string </title>
</head>
<body>
   <script>
      let str1 = "Hello World!"; // Using double quotes
      let str2 = 'Hello World!'; // Using single quotes
      let str3 = `Hello World!`; // Using backticks
      document.write(str1 + "<br>");
      document.write(str2 + "<br>");
      document.write(str3 + "<br>");
   </script>
</body>
</html>

JavaScript 數字

JavaScript 數字始終儲存為浮點值（十進位制數）。

JavaScript 不區分整數值和浮點值。

JavaScript 使用 IEEE 754 標準定義的64 位浮點格式表示數字。

示例

在下面的示例中，我們演示了帶有和不帶有小數點的 JavaScript 數字。

<html>
<head>
   <title> JavaScript number </title>
</head>
<body>
   <script>
      let num1 = 10; // Integer
      let num2 = 10.22; // Floating point number
      document.write("The value of num1 is " + num1 + "<br/>");
      document.write("The value of num2 is " + num2);
   </script>
</body>
</html>

示例（數字的指數表示法）

JavaScript 也支援數字的指數表示法。我們在下面的示例程式碼中解釋了這一點：

<html>
<head>
   <title> JavaScript number Exponential notation </title>
</head>
<body>
   <script>
      let num1 = 98e4;    // 980000
      let num2 = 98e-4;   // 0.0098
      document.write("The value of num1 is: " + num1 + "<br/>");
      document.write("The value of num2 is: " + num2);
   </script>
</body>
</html>

JavaScript 布林值

在 JavaScript 中，布林值資料型別只有兩個值：true 或 false。

<html>
<head>
   <title> JavaScript Boolean </title>
</head>
<body>
   <script>
      let bool1 = true;
      let bool2 = false;
      document.write("The value of the bool1 is " + bool1 + "<br/>");
      document.write("The value of the bool2 is " + bool2 + "<br/>");
   </script>
</body>
</html>

JavaScript 未定義

當你宣告一個變數但沒有初始化它時，它包含一個未定義的值。但是，你也可以手動將未定義的值賦給變數。

<html>
<head>
   <title> JavaScript Undefined </title>
</head>
<body>
   <script>
      let houseNo; // Contains undefined value
      let apartment = "Ajay";
      apartment = undefined; // Assigning the undefined value
      document.write("The value of the house No is: " + houseNo + "<br/>");
      document.write("The value of the apartment is: " + apartment + "<br/>");
   </script>
</body>
</html>

JavaScript 空值

當任何變數的值未知時，可以使用null。最好使用null表示空值或未知值，而不是未定義值。

<html>
<head>
   <title> JavaScript null </title>
</head>
<body>
   <script>
      let houseNo = null; // Unknown house number
      let apartment = "B-2";
      appartment = null; // Updating the value to null
      document.write("The value of the houseNo is: " + houseNo + "<br/>");
      document.write("The value of the apartment is: " + apartment + "<br/>");
   </script>
</body>
</html>

JavaScript BigInt

JavaScript 只儲存 64 位長的浮點數。如果要儲存非常大的數字，則應使用BigInt。可以透過在數字末尾新增 n 來建立 BigInt。

<html>
<head>
   <title> JavaScript Bigint </title>
</head>
<body>
   <script>
      let largeNum = 1245646564515635412348923448234842842343546576876789n;
      document.write("The value of the largeNum is " + largeNum + "<br/>");
   </script>
</body>
</html>

JavaScript Symbol

Symbol 資料型別在 ES6 版本的 JavaScript 中引入。它用於建立唯一的原始且不可變的值。

Symbol() 建構函式可用於建立唯一的符號，你可以將字串作為 Symbol() 建構函式的引數傳遞。

示例

在下面的示例中，我們為相同的字串建立了 *sym1* 和 *sym2* 符號。之後，我們比較了 *sym1* 和 *sym2* 的值，它給出了 false 輸出。這意味著這兩個符號是唯一的。

<html>
<head>
   <title> JavaScript Symbol </title>
</head>
<body>
   <script>
      let sym1 = Symbol("123");
      let sym2 = Symbol("123");
      let res = sym1 === sym2;
      document.write("Is sym1 and Sym2 are same? " + res + "<br/>");
   </script>
</body>
</html>

JavaScript 物件

在 JavaScript 中，物件資料型別允許我們以鍵值對格式儲存資料的集合。有多種定義物件的方法，我們將在物件章節中看到。

在這裡，我們將使用物件字面量建立一個物件。

示例

在下面的示例中，我們使用 '{}'（物件字面量）建立了一個 obj 物件。該物件包含具有字串值的 'animal' 屬性，具有數字值的 'legs' 屬性，以及將 'color' 變數的值賦給 'hourseColor' 屬性。

JSON.stringify() 方法將物件轉換為字串並在輸出中顯示。

<html>
<head>
   <title> JavaScript Object </title>
</head>
<body>
   <script>
      let color = "Brown";
      const obj = {
         animal: "Hourse",
         legs: 4,
         hourseColor: color
      }
      document.write("The given object is: " + JSON.stringify(obj) + "<br/>");
   </script>
</body>
</html>

JavaScript 陣列

在 JavaScript 中，陣列是不同資料型別元素的列表。您可以使用兩個方括號 '[]' 建立陣列，並在陣列內插入多個以逗號分隔的值。

<html>
<head>
   <title> JavaScript Array </title>
</head>
<body>
   <script>
      const colors = ["Brown", "red", "pink", "Yellow", "Blue"];
      document.write("The given array is: " + colors + "<br/>");
   </script>
</body>
</html>

JavaScript 日期

您可以使用 JavaScript 的Date 物件來操作日期。

示例

在下面的示例中，我們使用了Date() 建構函式來建立一個日期。在輸出中，您可以看到根據您的時區顯示的當前日期和時間。

<html>
<head>
   <title> JavaScript Date </title>
</head>
<body>
   <script>
      let date = new Date();
      document.write("The today's date and time is: " + date + "<br/>");
   </script>
</body>
</html>

動態型別

JavaScript 是一種像 Python 和 Ruby 一樣的動態型別語言。因此，它在執行時而不是編譯時決定變數的資料型別。我們可以將任何資料型別的初始值或重新賦值給 JavaScript 變數。

示例

在下面的示例中，我們用字串值初始化第一個變數。之後，我們將它的值更新為數字和布林值。

<html>
<head>
   <title> JavaScript dynamic data type </title>
</head>
<body>
   <script>
      let first = "One"; // it is string
      first = 1; // now it's Number
      document.write("The value of the first variable is " + first + "<br/>");
      first = true; // now it's Boolean
      document.write("The value of the first variable is " + first + "<br/>");
   </script>
</body>
</html>

使用 typeof 運算子檢查資料型別

typeof 運算子允許您檢查變數的型別。

示例

在下面的示例中，我們使用 typeof 運算子來檢查各種變數的資料型別。

<html>
<head>
   <title> typeof operator </title>
</head>
<body>
   <script>
      let num = 30;
      let str = "Hello";
      let bool = true;
      document.write("The data type of num is: " + typeof num + "<br/>");
      document.write("The data type of str is: " + typeof str + "<br/>");
      document.write("The data type of bool is: " + typeof bool + "<br/>");
   </script>
</body>
</html>
列印頁面
上一頁
下一頁
廣告