Javascript 简明教程

JavaScript - Type Conversions

JavaScript Type Conversions

在 JavaScript 中， Type Conversions 指的是在 JavaScript 中从一种数据类型向另一种数据类型自动或显式转换数据的过程。对于 JavaScript 有效地执行操作和比较而言，这些转换是必不可少的。JavaScript 变量可以包含任何数据类型的值，因为它是一种弱类型语言。

Type Conversions in JavaScript refer to the automatic or explicit process of converting data from one data type to another in JavaScript. These conversions are essential for JavaScript to perform operations and comparisons effectively. JavaScript variables can contain the values of any data type as it is a weakly typed language.

JavaScript 中有两种类型转换 -

There are two types of type conversion in JavaScript −

  1. Implicit type conversion

  2. Explicit type conversion

隐式类型转换也称为 coercion 。

The implicit type conversion is also known as coercion.

Implicit Type Conversion

当 JavaScript 自动进行类型转换时，它被称为 implicit type 转换。例如，当我们使用 “ + ” 运算符与 string 和 number 操作数一起使用时，JavaScript 将 number 转换为 string 并将它与字符串连接起来。

When type conversion is done by JavaScript automatically, it is called implicit type conversion. For example, when we use the '+' operator with the string and number operands, JavaScript converts the number to a string and concatenates it with the string.

以下是隐式类型转换的一些示例。

Here are some examples of the implicit type conversion.

Converting to String (Implicit conversion)

在此示例中，我们使用 “ + ” 运算符将不同的值隐式转换为字符串数据类型。

In this example, we used the '+' operator to implicitly convert different values to the string data type.

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

请注意，要使用 “+” 运算符将值转换为字符串，一个操作数必须为字符串。

Please note that to convert a value to string using "+" operator, one operand should be string.

让我们尝试下面的示例并检查输出 -

Let’s try the example below, and check the output −

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

Converting to Number (Implicit conversion)

当您将包含数字的字符串值与除了 “+” 运算符之外的算术运算符一起使用时，它会自动将操作数转换为数字并执行算术运算，您可以在下面的示例中看到这一点。

When you use the string values containing the digits with the arithmetic operators except for the '+' operator, it converts operands to numbers automatically and performs the arithmetic operation, which you can see in the example below.

布尔值也会转换为数字。

Boolean values are also gets converted to a number.

'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

尝试以下示例并检查输出 −

Try the example below and check the output −

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

Converting to Boolean (Implicit conversion)

当您对任何变量使用 Nullish（！！）运算符时，它会隐式地将其值转换为 boolean 值。

When you use the Nullish (!!) operator with any variable, it implicitly converts its value to the boolean value.

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

Null to Number (Implicit conversion)

在 JavaScript 中， null 表示空。因此，当我们将其用作算术运算符的操作数时， null 会自动转换为 0 。

In JavaScript, the null represents the empty. So, null automatically gets converted to 0 when we use it as an operand of the arithmetic operator.

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

Undefined with Number and Boolean (Implicit conversion)

在输出中，使用带有“数字”或“布尔值”的 undefined 始终给予 NaN 。这里，NaN 表示数字不是数字。

Using the undefined with the 'number' or 'boolean' value always gives the NaN in the output. Here, NaN means not a number.

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

Explicit Type Conversion

在许多情况下，程序员需要手动转换变量的数据类型。这称为 explicit type 转换。

In many cases, programmers are required to convert the data type of the variable manually. It is called the explicit type conversion.

在 JavaScript 中，可以使用 constructor 函数或 built-in 函数转换变量的类型。

In JavaScript, you can use the constructor functions or built-in functions to convert the type of the variable.

Converting to String (Explicit conversion)

可以使用 String() 构造函数将数字、布尔值或其他数据类型转换为字符串。

You can use the String() constructor to convert the numbers, boolean, or other data types into the string.

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

Example

可以使用 String() 构造函数将值转换为字符串。也可以使用 typeof 运算符检查结果值的类型。

You can use the String() constructor function to convert a value to the string.You can also use typeof operator to check the type of the resultant value.

<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() 方法将数字转换为字符串。

We can also use the toString() method of Number object to convert number to string.

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

Converting to Number (Explicit conversion)

可以使用 Numer() 构造函数将字符串转换为数字。我们还可以使用 unary plus (+) 运算符将字符串转换为数字。

You can use the Numer() constructor to convert a string into a number. We can also use unary plus (+) operator to convert a string to 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

但是，您还可以使用以下方法和变量将字符串转换为数字。

However, you can also use the below methods and variables to convert the string into numbers.

Sr.No.

Method / Operator

Description

1

parseFloat()

To extract the floating point number from the string.

2

parseInt()

To extract the integer from the string.

3

+

It is an unary operator.

Example

可以使用 Number() 构造函数或一元（+）运算符将字符串、布尔值或任何其他值转换为数字。

You can use the Number() constructor function or unary (+) operator to convert a string, boolean, or any other value to a number.

Number() 函数还会将数字的指数表示转换为十进制数。

The Number() function also converts the exponential notation of a number to a decimal 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>

Converting to Boolean (Explicit conversion)

可以使用 Boolean() 构造函数将其他数据类型转换为布尔值。

You can use the Boolean() constructor to convert the other data types into 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)

Example

可以使用 Boolean() 构造函数将值转换为布尔值。所有虚假值（如 0、空字符串、null、未定义等）将转换为 false ，其他值将转换为 true 。

You can use the Boolean() constructor to convert values to the Boolean. All false values like 0, empty string, null, undefined, etc., get converted to false and other values are converted to 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>

Converting Date to String/Number

可以使用日期对象的 Number() 构造函数或 getTime() 方法将日期字符串转换为数字。数字日期表示自 1970 年 1 月 1 日以来的毫秒总数。

You can use the Date object’s Number() constructor or getTime() method to convert the date string into the number. The numeric date represents the total number of milliseconds since 1st January 1970.

按照以下语法将日期转换为数字。

Follow the syntax below to convert the date into a number.

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

你可以使用构造函数 String() 或方法 toString() 将日期转换为字符串。

You can use the String() constructor or the toString() method to convert the date into a string.

按照以下语法将日期转换为字符串。

Follow the syntax below to convert the date into the string.

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

让我们尝试借助一个程序进行演示。

Let’s try to demonstrate this with the help of a program.

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

Conversion Table in JavaScript

在下表中，我们给出了原始值，以及将原始值转换为字符串、数字和布尔值时的结果值。

In the below table, we have given the original values and their resultant value when we convert the original value to string, number, and boolean.

Value

String conversion

Number conversion

Boolean conversion

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