JavaScript 类型转换

类型转换的概念

类型转换是指将一个数据类型的值转换为另一个数据类型的值。JavaScript 是一种弱类型语言，它会在某些情况下自动进行类型转换，同时也提供了手动类型转换的方法。

隐式类型转换

隐式类型转换是 JavaScript 自动进行的类型转换，不需要显式调用转换函数。

1. 数字转换

字符串转数字

当字符串与数字进行算术运算时，字符串会被转换为数字：

console.log("5" + 3); // 输出: "53"（字符串拼接）
console.log("5" - 3); // 输出: 2（字符串 "5" 被转换为数字 5）
console.log("5" * 3); // 输出: 15（字符串 "5" 被转换为数字 5）
console.log("5" / 3); // 输出: 1.6666666666666667（字符串 "5" 被转换为数字 5）
console.log("5" % 3); // 输出: 2（字符串 "5" 被转换为数字 5）

布尔值转数字

布尔值在算术运算中会被转换为数字（true 转换为 1，false 转换为 0）：

console.log(true + 1); // 输出: 2（true 被转换为 1）
console.log(false + 1); // 输出: 1（false 被转换为 0）
console.log(true * 5); // 输出: 5（true 被转换为 1）
console.log(false * 5); // 输出: 0（false 被转换为 0）

null 和 undefined 转数字

• null 转换为 0
• undefined 转换为 NaN

console.log(null + 1); // 输出: 1（null 被转换为 0）
console.log(undefined + 1); // 输出: NaN（undefined 被转换为 NaN）

2. 字符串转换

数字转字符串

当数字与字符串进行加法运算时，数字会被转换为字符串：

console.log(5 + "3"); // 输出: "53"（数字 5 被转换为字符串 "5"）
console.log(5 + ""); // 输出: "5"（数字 5 被转换为字符串 "5"）

布尔值转字符串

布尔值与字符串进行加法运算时，布尔值会被转换为字符串：

console.log(true + " string"); // 输出: "true string"（true 被转换为字符串 "true"）
console.log(false + " string"); // 输出: "false string"（false 被转换为字符串 "false"）

对象转字符串

对象与字符串进行加法运算时，对象会被转换为字符串：

console.log({} + " string"); // 输出: "[object Object] string"（对象被转换为字符串 "[object Object]"）
console.log([] + " string"); // 输出: " string"（空数组被转换为空字符串 ""）
console.log([1, 2] + " string"); // 输出: "1,2 string"（数组被转换为字符串 "1,2"）

3. 布尔值转换

在条件语句中，非布尔值会被转换为布尔值：

• 假值（falsy values）：转换为 false

  • false
  • 0
  • ""（空字符串）
  • null
  • undefined
  • NaN

• 真值（truthy values）：转换为 true

  • 除假值以外的所有值

if (0) {
  console.log("0 is truthy");
} else {
  console.log("0 is falsy"); // 输出
}

if ("") {
  console.log("Empty string is truthy");
} else {
  console.log("Empty string is falsy"); // 输出
}

if (null) {
  console.log("null is truthy");
} else {
  console.log("null is falsy"); // 输出
}

if (undefined) {
  console.log("undefined is truthy");
} else {
  console.log("undefined is falsy"); // 输出
}

if (NaN) {
  console.log("NaN is truthy");
} else {
  console.log("NaN is falsy"); // 输出
}

if (1) {
  console.log("1 is truthy"); // 输出
} else {
  console.log("1 is falsy");
}

if ("Hello") {
  console.log('"Hello" is truthy'); // 输出
} else {
  console.log('"Hello" is falsy');
}

if ({}) {
  console.log("{} is truthy"); // 输出
} else {
  console.log("{} is falsy");
}

if ([]) {
  console.log("[] is truthy"); // 输出
} else {
  console.log("[] is falsy");
}

显式类型转换

显式类型转换是通过调用转换函数或使用运算符来手动进行的类型转换。

1. 转换为数字

Number() 函数

console.log(Number("5")); // 输出: 5
console.log(Number("5.5")); // 输出: 5.5
console.log(Number("")); // 输出: 0
console.log(Number("Hello")); // 输出: NaN
console.log(Number(true)); // 输出: 1
console.log(Number(false)); // 输出: 0
console.log(Number(null)); // 输出: 0
console.log(Number(undefined)); // 输出: NaN
console.log(Number([])); // 输出: 0
console.log(Number([1, 2])); // 输出: NaN
console.log(Number({})); // 输出: NaN

parseInt() 函数

console.log(parseInt("5")); // 输出: 5
console.log(parseInt("5.5")); // 输出: 5（只解析整数部分）
console.log(parseInt("5px")); // 输出: 5（解析直到非数字字符）
console.log(parseInt("px5")); // 输出: NaN（以非数字字符开头）
console.log(parseInt("")); // 输出: NaN
console.log(parseInt(true)); // 输出: NaN
console.log(parseInt(null)); // 输出: NaN

parseFloat() 函数

console.log(parseFloat("5")); // 输出: 5
console.log(parseFloat("5.5")); // 输出: 5.5
console.log(parseFloat("5.5px")); // 输出: 5.5（解析直到非数字字符）
console.log(parseFloat("px5.5")); // 输出: NaN（以非数字字符开头）
console.log(parseFloat("")); // 输出: NaN

一元加号运算符

console.log(+"5"); // 输出: 5
console.log(+"5.5"); // 输出: 5.5
console.log(+""); // 输出: 0
console.log(+"Hello"); // 输出: NaN
console.log(+true); // 输出: 1
console.log(+false); // 输出: 0
console.log(+null); // 输出: 0
console.log(+undefined); // 输出: NaN
console.log(+[]); // 输出: 0
console.log(+[1, 2]); // 输出: NaN
console.log(+{}); // 输出: NaN

2. 转换为字符串

String() 函数

console.log(String(5)); // 输出: "5"
console.log(String(5.5)); // 输出: "5.5"
console.log(String(true)); // 输出: "true"
console.log(String(false)); // 输出: "false"
console.log(String(null)); // 输出: "null"
console.log(String(undefined)); // 输出: "undefined"
console.log(String([])); // 输出: ""
console.log(String([1, 2])); // 输出: "1,2"
console.log(String({})); // 输出: "[object Object]"

toString() 方法

console.log((5).toString()); // 输出: "5"
console.log((5.5).toString()); // 输出: "5.5"
console.log(true.toString()); // 输出: "true"
console.log(false.toString()); // 输出: "false"
console.log([].toString()); // 输出: ""
console.log([1, 2].toString()); // 输出: "1,2"
console.log({}.toString()); // 输出: "[object Object]"

// null 和 undefined 没有 toString() 方法
// console.log(null.toString()); // 错误
// console.log(undefined.toString()); // 错误

字符串拼接

console.log(5 + ""); // 输出: "5"
console.log(true + ""); // 输出: "true"
console.log(null + ""); // 输出: "null"
console.log(undefined + ""); // 输出: "undefined"
console.log([] + ""); // 输出: ""
console.log([1, 2] + ""); // 输出: "1,2"
console.log({} + ""); // 输出: "[object Object]"

3. 转换为布尔值

Boolean() 函数

console.log(Boolean(5)); // 输出: true
console.log(Boolean(0)); // 输出: false
console.log(Boolean("Hello")); // 输出: true
console.log(Boolean("")); // 输出: false
console.log(Boolean(null)); // 输出: false
console.log(Boolean(undefined)); // 输出: false
console.log(Boolean(NaN)); // 输出: false
console.log(Boolean([])); // 输出: true
console.log(Boolean({})); // 输出: true

双重否定运算符

console.log(!!5); // 输出: true
console.log(!!0); // 输出: false
console.log(!!"Hello"); // 输出: true
console.log(!!""); // 输出: false
console.log(!!null); // 输出: false
console.log(!!undefined); // 输出: false
console.log(!!NaN); // 输出: false
console.log(!![]); // 输出: true
console.log(!!{}); // 输出: true

4. 转换为对象

Object() 函数

console.log(Object(5)); // 输出: Number {5}
console.log(Object("Hello")); // 输出: String {"Hello"}
console.log(Object(true)); // 输出: Boolean {true}
console.log(Object(null)); // 输出: {}
console.log(Object(undefined)); // 输出: {}

// 原始类型包装对象
const numObj = Object(5);
console.log(typeof numObj); // 输出: object
console.log(numObj.valueOf()); // 输出: 5（获取原始值）

类型转换的最佳实践

1. 显式转换优先

尽量使用显式类型转换，而不是依赖隐式类型转换，以提高代码的可读性和可维护性：

// 好的做法
const num = Number(str);
const str = String(num);
const bool = Boolean(value);

// 不好的做法（依赖隐式类型转换）
const num = +str;
const str = num + "";
const bool = !!value;

2. 合理使用转换函数

根据具体需求选择合适的转换函数：

• 转换为整数：使用 parseInt()
• 转换为浮点数：使用 parseFloat()
• 严格转换：使用 Number()
• 转换为字符串：使用 String() 或 toString()
• 转换为布尔值：使用 Boolean() 或 !!

3. 检查转换结果

在进行类型转换后，检查转换结果是否有效：

// 好的做法
const num = parseInt(str);
if (!isNaN(num)) {
  console.log("Valid number:", num);
} else {
  console.log("Invalid number");
}

// 不好的做法
const num = parseInt(str);
console.log("Number:", num); // 可能输出 NaN

4. 避免混合类型运算

避免混合类型运算，以减少隐式类型转换的复杂性：

// 好的做法
const num1 = 5;
const num2 = parseInt("10");
const sum = num1 + num2;
console.log(sum); // 输出: 15

// 不好的做法（混合类型运算）
const num1 = 5;
const num2 = "10";
const sum = num1 + num2;
console.log(sum); // 输出: "510"（字符串拼接）

类型转换的常见陷阱

1. 字符串与数字的加法

// 陷阱：字符串与数字的加法会进行字符串拼接
console.log(5 + "3"); // 输出: "53"（字符串拼接）
console.log(5 + 3); // 输出: 8（数字加法）

// 避免陷阱：使用显式类型转换
console.log(5 + Number("3")); // 输出: 8

2. null 和 undefined 的转换

// 陷阱：null 和 undefined 的转换结果不同
console.log(Number(null)); // 输出: 0
console.log(Number(undefined)); // 输出: NaN

// 避免陷阱：明确处理 null 和 undefined
if (value === null || value === undefined) {
  // 处理 null 或 undefined
} else {
  const num = Number(value);
  // 处理数字
}

3. 数组的转换

// 陷阱：数组的转换结果可能不符合预期
console.log(Number([])); // 输出: 0
console.log(Number([1])); // 输出: 1
console.log(Number([1, 2])); // 输出: NaN

// 避免陷阱：明确处理数组
if (Array.isArray(value)) {
  // 处理数组
} else {
  const num = Number(value);
  // 处理数字
}

4. 对象的转换

// 陷阱：对象的转换结果可能不符合预期
console.log(String({})); // 输出: "[object Object]"
console.log(Number({})); // 输出: NaN

// 避免陷阱：明确处理对象
if (typeof value === "object" && value !== null) {
  // 处理对象
} else {
  const str = String(value);
  // 处理字符串
}

小结

类型转换是 JavaScript 中的重要概念，它允许不同类型的值进行交互。JavaScript 会在某些情况下自动进行隐式类型转换，同时也提供了手动进行显式类型转换的方法。理解类型转换的规则和最佳实践，可以帮助你编写更清晰、更可靠的代码，避免因类型转换导致的意外行为。