笙亿网络策划

JavaScript 数据类型有哪些？怎么用？

约 16 分钟读完 36 阅
文章导读
上一个 测验 下一个 JavaScript 数据类型 JavaScript 中的数据类型指的是我们存储或操作的值的类型。编程语言最基本的特性之一就是它支持的数据类型集合。这些是编程语言中可以表示和操作的值类型。
📋 目录
  1. 壹 JavaScript 数据类型
  2. 贰 为什么数据类型很重要？
  3. 叁 JavaScript String
  4. 肆 JavaScript Number
  5. 伍 JavaScript Boolean
  6. 陆 JavaScript Undefined
  7. 柒 JavaScript Null
  8. 捌 JavaScript Bigint
  9. 玖 JavaScript Symbol
  10. 拾 JavaScript Object
A A

JavaScript - 数据类型

上一个
测验
下一个

JavaScript 数据类型

JavaScript 中的数据类型指的是我们存储或操作的值的类型。编程语言最基本的特性之一就是它支持的数据类型集合。这些是编程语言中可以表示和操作的值类型。

JavaScript 数据类型可以分为 primitive（原始类型）和 non-primitive（非原始类型，即 object）。JavaScript（ES6 及更高版本）允许你使用七种primitive data types −

  • Strings 文本字符串，例如 "This text string" 等。
  • Numbers，例如 123、120.50 等。
  • Boolean，例如 true 或 false。
  • null
  • undefined
  • BigInt
  • Symbol

BigInt 和 Symbol 在 ES6 中引入。在 ES5 中，只有五种 primitive data types。

除了这些 primitive data types 外，JavaScript 还支持一种称为 object 的composite data type。我们将在单独的章节中详细介绍 object。

Object 数据类型包含 3 种子数据类型 −

  • Object
  • Array
  • Date

为什么数据类型很重要？

在任何编程语言中，数据类型对于操作符的操纵都很重要。

例如，下面的代码会输出 1010。

let sum = "10" + 10;

在这里，JavaScript 引擎将第二个操作数转换为 string，并使用 '+' 操作符将它们连接起来，而不是相加。

因此，你需要确保操作数的类型是正确的。

现在，让我们通过示例来学习每种数据类型。

JavaScript String

在 JavaScript 中，string 是一系列字符，可以通过以下 3 种方式创建 −

  • 使用单引号
  • 使用双引号
  • 使用反引号（backticks）

示例

在下面的示例中，我们使用单引号、双引号和反引号创建了 string。在输出中，所有 3 个 string 打印相同的结果。

<html>
<head>
   <title> JavaScript string </title>
</head>
<body>
   <script>
      let str1 = "Hello World!"; // 使用双引号
      let str2 = 'Hello World!'; // 使用单引号
      let str3 = `Hello World!`; // 使用反引号
      document.write(str1 + "<br>");
      document.write(str2 + "<br>");
      document.write(str3 + "<br>");
   </script>
</body>
</html>

JavaScript Number

JavaScript number 始终以floating-point 值（十进制数）存储。

JavaScript 不区分integer 值和floating-point 值。

JavaScript 使用 IEEE 754 标准定义的64-bit floating-point 格式表示数字。

示例

在下面的示例中，我们演示了带和小数点的 JavaScript number。

<html>
<head>
   <title> JavaScript number </title>
</head>
<body>
   <script>
      let num1 = 10; // 整数
      let num2 = 10.22; // 浮点数
      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 Boolean

在 JavaScript 中，Boolean 数据类型只有两个值：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 Undefined

当你声明一个变量但不初始化它时，它包含一个 undefined 值。不过，你也可以手动将 undefined 值赋给该变量。

<html>
<head>
   <title> JavaScript Undefined </title>
</head>
<body>
   <script>
      let houseNo; // 包含 undefined 值
      let apartment = "Ajay";
      apartment = undefined; // 赋值为 undefined
      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。使用 null 表示空值或未知值是好习惯，而不是使用 undefined。

<html>
<head>
   <title> JavaScript null </title>
</head>
<body>
   <script>
      let houseNo = null; // 未知的门牌号
      let apartment = "B-2";
      appartment = null; // 更新值为 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 数据类型在 JavaScript 的 ES6 版本中引入。它用于创建唯一的原始值，且不可变。

Symbol() 构造函数可用于创建唯一的 symbol，你可以将字符串作为 Symbol() 构造函数的参数传递。

示例

在下面的示例中，我们为相同的字符串创建了 sym1 和 sym2 symbol。随后，我们比较了 sym1 和 sym2 的值，结果为 false。这意味着两个 symbol 都是唯一的。

<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 Object

在 JavaScript 中，object 数据类型允许我们以 key-value 格式存储数据的集合。有多种方式定义 object，我们将在 Objects 章节中详细介绍。

在这里，我们使用对象字面量来创建 object。

示例

在下面的示例中，我们使用了 '{}'（对象字面量）来创建一个 obj object。该 object 包含 'animal' 属性（值为字符串）、'legs' 属性（值为数字），以及将 'color' 变量的值赋给 'hourseColor' 属性。

JSON.stringify() 方法将 object 转换为字符串并在输出中显示。

<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 Array

在 JavaScript 中，array 是不同数据类型的元素列表。你可以使用两个方括号 '[]' 创建 array，并在其中插入多个用逗号分隔的值。

<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 Date

你可以使用 JavaScript 的 Date object 来操作日期。

示例

在下面的示例中，我们使用了 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 一样的 dynamically typed 语言。因此，它在运行时而非编译时决定变量的数据类型。我们可以将任何数据类型的初始值或重新赋值给 JavaScript 变量。

示例

在下面的示例中，我们首先用字符串值初始化第一个变量。之后，我们将其值更新为数字和布尔值。

<html>
<head>
   <title> JavaScript dynamic data type </title>
</head>
<body>
   <script>
      let first = "One"; // 它是 string
      first = 1; // 现在它是 Number
      document.write("The value of the first variable is " + first + "<br/>");
      first = true; // 现在它是 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>