JavaScript 类型转换

JavaScript 中的类型转换是指在 JavaScript 中将数据从一种数据类型转换为另一种数据类型的过程，这种过程可以是自动的也可以是显式的。这些转换对于 JavaScript 执行运算和比较至关重要。由于 JavaScript 是一种弱类型语言，它可以包含任意数据类型的值。

JavaScript 中有两种类型的类型转换 −

隐式类型转换显式类型转换隐式类型转换也被称为强制类型转换。

隐式类型转换

当类型转换是由 JavaScript 自动完成时，这被称为隐式类型转换。例如，当我们使用 '+' 操作符连接字符串和数值时，JavaScript 会自动将数值转换为字符串，并将其与字符串连接起来。

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

将值转换为字符串（隐式转换）

在这个例子中，我们使用了 '+' 操作符来隐式地将不同的值转换为字符串数据类型。

"100" + 24; // 将 24 转换为字符串
'100' + false; // 将 false 布尔值转换为字符串
"100" + null; // 将 null 关键字转换为字符串

请注意，要使用 "+" 操作符将一个值转换为字符串，其中一个操作数应该是字符串。

让我们尝试下面的例子，并检查输出 −

<html>
<head>
   <title>隐式转换为字符串 </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; // 将 '100' 转换为 100
'100' - '50'; // 将 '100' 和 '50' 转换为 100 和 50
'100' * true; // 将 true 转换为 1
'100' - false; // 将 false 转换为 0
'tp' / 50 // 将 'tp' 转换为 NaN

尝试下面的例子，并检查输出 −

<html>
<head>
    <title> 隐式转换为数字 </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; // 将 null 转换为 0
num = 100 * null;  // 将 null 转换为 0

将 undefined 与数值或布尔值一起使用（隐式转换）

将 undefined 与 '数值' 或 '布尔值' 一起使用时，总是会在输出中得到 NaN。这里的 NaN 意味着不是一个数字。

<html>
<head>
   <title> 将 undefined 与数值和布尔值一起使用 </title>
</head>
<body>
   <script>
      let num = 100 + undefined; // 输出 NaN
      document.write("num 的值是: " + num + "<br>");
      num = false * undefined; // 输出 NaN
      document.write("num 的值是: " + num + "<br>");
   </script>
</body>
</html>

显式类型转换

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

在 JavaScript 中，你可以使用构造函数或内置函数来转换变量的类型。

将值转换为字符串（显式转换）

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

String(100); // 将数字转换为字符串
String(null); // 将 null 转换为字符串
String(true); // 将布尔值转换为字符串

示例

你可以使用 String() 构造函数将一个值转换为字符串。你也可以使用 typeof 操作符来检查结果值的类型。

<html>
<head>
    <title> 显式转换为字符串 </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() // 将 100 转换为 '100'

将值转换为数值（显式转换）

你可以使用 Number() 构造函数将字符串转换为数值。我们也可以使用一元加号 (+) 操作符将字符串转换为数值。

Number('100'); // 将 '100' 转换为 100
Number(false); // 将 false 转换为 0
Number(null); // 将 null 转换为 0
num = +"200"; // 使用一元操作符

然而，你也可以使用以下方法和变量将字符串转换为数值。

序号	方法 / 操作符	描述
1	parseFloat()	从字符串中提取浮点数
2	parseInt()	从字符串中提取整数
3	+	一元操作符

示例

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

Number() 函数还将数字的指数记数法转换为十进制数。

<html>
<head>
   <title> 显式转换为字符串 </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); // 将数字转换为布尔值 (true)
Boolean(0); // 0 是假值 (false)
Boolean(""); // 空字符串是假值 (false)
Boolean("Hi"); // 将字符串转换为布尔值 (true)
Boolean(null); // null 是假值 (false)

示例

你可以使用 Boolean() 构造函数将值转换为布尔值。所有假值，如 0、空字符串、null、undefined 等，都被转换为 false，而其他值则被转换为 true。

<html>
<head>
   <title> 显式转换为字符串 </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> 将日期转换为字符串 / 数值 </title>
</head>
<body>
   <script>
      let date = new Date();
      let numberDate = date.getTime();
      document.write("数值日期是: " + numberDate + "<br/>");
      let dateString = date.toString();
      document.write("字符串日期是: " + 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