Javascript 简明教程

JavaScript - Data Types

JavaScript Data Types

JavaScript 中的数据类型是指我们存储或处理的值的类型。编程语言最基本的一个特点就是它所支持的 data types 。这些类型是可以表示和在编程语言中处理的值的类型。

JavaScript 数据类型可以分为原始和非原始(对象)。JavaScript (ES6 及更高版本) 允许您使用七种 primitive data types

  1. Strings 文本,例如“此文本字符串”等。

  2. Numbers ,例如 123、120.50 等。

  3. Boolean , 例如 true 或 false。

  4. null

  5. undefined

  6. BigInt

  7. Symbol

BigIntSymbol 在 ES6 中引入。在 ES5 中,只有五种原始数据类型。

除了这些原始数据类型之外,JavaScript 还支持一种称为对象的 composite data type 。我们将在一个单独的章节中详细介绍对象。

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

  1. Object

  2. Array

  3. Date

Why are data types important?

在任何一种编程语言中,数据类型对于操作执行都至关重要。

例如,以下代码生成了“1010”输出。

let sum = "10" + 10;

在此示例中,JavaScript 引擎将第二个运算符转换为字符串,并使用“+”运算符对其进行组合,而不是将其相加。

所以,你需要确保运算符的类型是正确的。

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

JavaScript String

在 JavaScript 中,字符串是字符的序列,可以使用下面给出的 3 种不同方法来创建:

  1. Using the single quote

  2. Using the double quote

  3. Using the backticks

Example

在下面的示例中,我们使用单引号、双引号和反引号创建了字符串。在输出中,它为所有 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 Number

JavaScript 数字总是存储为 floating-point 值(十进制数字)。

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

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

Example

在下面的示例中,我们演示了带和小数点的 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>

Example (Exponential notation of numbers)

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 数据类型只有两个值: truefalse

<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 值。但是,你还可以手动将未定义的值分配给变量。

<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 。对于空值或未知值,最好使用 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 数据类型是在 JavaScript 的 ES6 版本中引入的。它用于创建唯一的原始不可变值。

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

Example

在下面的示例中,我们为同一个字符串创建了 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 Object

在 JavaScript 中, object 数据类型允许我们以 key-value 格式存储数据集合。有多种方法来定义对象,我们将在对象一章中看到。

这里,我们将使用对象字面量创建一个对象。

Example

在下例中,我们用 '{}'(对象字面量)创建了一个 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 Array

在 JavaScript 中, 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 来操作日期。

Example

在下例中,我们使用了 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>

Dynamic Types

JavaScript 是一种像 Python 和 Ruby 之类的 dynamically typed 语言。因此,它在运行时决定变量的数据类型,而不是在编译时。我们可以对 JavaScript 变量初始化任意数据类型的值,或重新给它们赋值。

Example

在下例中,我们用字符串值初始化了第一个变量。然后,我们将其值更新为数字和布尔值。

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

Checking Data Types Using the typeof Operator

typeof 运算符允许你检查变量的类型。

Example

在下例中,我们用 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>