JavaScript - 类型转换

上一页
下一页

JavaScript 类型转换

JavaScript 中的类型转换是指在 JavaScript 中自动或显式地将数据从一种数据类型转换为另一种数据类型的过程。这些转换对于 JavaScript 有效地执行操作和比较至关重要。由于 JavaScript 是一种弱类型语言，因此 JavaScript 变量可以包含任何数据类型的值。

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

  • 隐式类型转换
  • 显式类型转换

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

隐式类型转换

当类型转换由 JavaScript 自动完成时，称为隐式类型转换。例如，当我们使用“+”运算符结合字符串和数字操作数时，JavaScript 会将数字转换为字符串并将其与字符串连接起来。

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

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

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

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

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

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

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

转换为数字（隐式转换）

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

布尔值也会被转换为数字。

'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

尝试下面的示例并检查输出：

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

转换为布尔值（隐式转换）

当您将 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; // Converts null to 0
num = 100 * null;  // Converts null to 0

Undefined 与数字和布尔值（隐式转换）

使用undefined与“number”或“boolean”值一起使用时，输出始终为NaN。这里，NaN 表示非数字。

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

显式类型转换

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

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

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

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

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

示例

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

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

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

转换为数字（显式转换）

您可以使用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

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

序号 方法/运算符 描述
1 parseFloat() 从字符串中提取浮点数。
2 parseInt() 从字符串中提取整数。
3 + 它是一个一元运算符。

示例

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

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>

转换为布尔值（显式转换）

您可以使用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)

示例

您可以使用Boolean()构造函数将值转换为布尔值。所有假值，如0、空字符串、null、undefined等，都将转换为false，其他值将转换为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>

将日期转换为字符串/数字

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

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

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

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

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

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

让我们尝试通过一个程序来演示这一点。

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

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
打印页面
上一篇
下一篇
广告