JavaScript 类型转换

提示

类型转换的基本概念：在JavaScript中，类型转换是将数据从一种类型转换为另一种类型的过程，分为隐式转换和显式转换。
隐式类型转换：JavaScript在某些情况下自动进行数据类型转换，例如将数字添加到字符串时，数字会被转换为字符串。
显式类型转换：可以使用内置方法如Number()、String()和Boolean()手动进行数据类型的转换。

在编程中，类型转换是指将一种类型的数据转换为另一种类型。例如：将 String（字符串）数据转换为 Number（数字）。

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

隐式转换（Implicit Conversion）- 自动类型转换
显式转换（Explicit Conversion）- 手动类型转换

JavaScript 隐式转换

在某些情况下，JavaScript 会自动将一种数据类型转换为另一种（正确的类型）。这称为隐式转换。

示例 1：隐式转换为字符串

// 数字字符串与 + 运算符一起使用时转换为字符串类型
let result;

result = "3" + 2;
console.log(result); // "32"

result = "3" + true;
console.log(result); // "3true"

result = "3" + undefined;
console.log(result); // "3undefined"

result = "3" + null;
console.log(result); // "3null"

注意：当数字与字符串相加时，JavaScript 会先将数字转换为字符串，然后再进行拼接。

示例 2：隐式转换为数字

// 数字字符串与 - , / , * 运算符一起使用时转换为数字类型

let result;

result = "4" - "2";
console.log(result); // 2

result = "4" - 2;
console.log(result); // 2

result = "4" * 2;
console.log(result); // 8

result = "4" / 2;
console.log(result); // 2

示例 3：非数字字符串转换为 NaN

// 非数字字符串与 - , / , * 运算符一起使用时转换为 NaN

let result;

result = "hello" - "world";
console.log(result); // NaN

result = "4" - "hello";
console.log(result); // NaN

示例 4：隐式布尔值转换为数字

// 如果使用布尔值，true 为 1，false 为 0

let result;

result = "4" - true;
console.log(result); // 3

result = 4 + true;
console.log(result); // 5

result = 4 + false;
console.log(result); // 4

注意： JavaScript 认为 0 为 false，所有非零数字为 true。如果 true 转换为数字，结果总是 1。

示例 5：null 转换为数字

// null 在与数字一起使用时被视为 0
let result;

result = 4 + null;
console.log(result); // 4

result = 4 - null;
console.log(result); // 4

示例 6：undefined 与数字、布尔值或 null 一起使用

// undefined 与数字、布尔值或 null 进行算术运算时结果为 NaN

let result;

result = 4 + undefined;
console.log(result); // NaN

result = 4 - undefined;
console.log(result); // NaN

result = true + undefined;
console.log(result); // NaN

result = null + undefined;
console.log(result); // NaN

JavaScript 显式转换

您也可以根据需要将一种数据类型转换为另一种。您手动进行的类型转换称为显式类型转换。

在 JavaScript 中，显式类型转换是使用内置方法完成的。

以下是一些常见的显式转换方法。

1. 显式转换为数字

要将数字字符串和布尔值转换为数字，可以使用 Number()。例如，

let result;

// 字符串转数字
result = Number("324");
console.log(result); // 324

result = Number("324e-1");
console.log(result); // 32.4

// 布尔值转数字
result = Number(true);
console.log(result); // 1

result = Number(false);
console.log(result); // 0

在 JavaScript 中，空字符串和 null 值返回 0。例如，

let result;
result = Number(null);
console.log(result); // 0

let result = Number(" ");
console.log(result); // 0

如果字符串是无效数字，则结果为 NaN。例如，

let result;
result = Number("hello");
console.log(result); // NaN

result = Number(undefined);
console.log(result); // NaN

result = Number(NaN);
console.log(result); // NaN

注意：您也可以使用 parseInt()、parseFloat()、一元运算符 + 和 Math.floor() 从字符串生成数字。例如，

let result;
result = parseInt("20.01");
console.log(result); // 20

result = parseFloat("20.01");
console.log(result); // 20.01

result = +"20.01";
console.log(result); // 20.01

result = Math.floor("20.01");
console.log(result); // 20

2. 显式转换为字符串

要将其他数据类型转换为字符串，可以使用 String() 或 toString()。例如，

// 数字转字符串
let result;
result = String(324);
console.log(result); // "324"

result = String(2 + 4);
console.log(result); // "6"

// 其他数据类型转字符串
result = String(null);
console.log(result); // "null"

result = String(undefined);
console.log(result); // "undefined"

result = String(NaN);
console.log(result); // "NaN"

result = String(true);
console.log(result); // "true"

result = String(false);
console.log(result); // "false"

// 使用 toString()
result = (324).toString();
console.log(result); // "324"

result = true.toString();
console.log(result); // "true"

注意：String() 可以接受 null 和 undefined 并将它们转换为字符串。然而，toString() 在传入 null 时会报错。

3. 显式转换为布尔值

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

在 JavaScript 中，undefined、null、0、NaN、'' 转换为 false。例如，

let result;
result = Boolean("");
console.log(result); // false

result = Boolean(0);
console.log(result); // false

result = Boolean(undefined);
console.log(result); // false

result = Boolean(null);
console.log(result); // false

result = Boolean(NaN);
console.log(result); // false

所有其他值转换为 true。例如，

result = Boolean(324);
console.log(result); // true

result = Boolean("hello");
console.log(result); // true

result = Boolean(" ");
console.log(result); // true