JavaScript数据类型转换

前端小巷子
92 阅读5分钟

在 JavaScript 开发中，数据类型转换是一个常见且重要的概念。由于 JavaScript 是一种动态类型语言，变量的数据类型在运行时才能确定，这使得数据类型转换变得尤为关键。

一、数据类型转换介绍

JavaScript 是一种动态类型语言，变量没有类型限制，可以随时赋予任意值。这意味着变量的类型在编译阶段无法确定，必须等到运行时才能知道。例如：

var x = y ? 1 : 'a';

上面代码中，变量 x 的类型取决于变量 y 的值。如果 y 为 true，x 是一个数值；如果 y 为 false，x 是一个字符串。

虽然变量的数据类型是不确定的，但各种运算符对数据类型是有要求的。如果运算符发现运算子的类型与预期不符，就会自动进行类型转换。例如：

'4' - '3' // 1

上面代码中，虽然是两个字符串相减，但 JavaScript 会自动将它们转换为数值，然后进行减法运算。

二、强制转换（显式转换）

强制转换是指使用 Number()、String() 和 Boolean() 三个函数，手动将各种类型的值分别转换成数字、字符串或布尔值。

（一）Number()

Number() 函数可以将任意类型的值转换为数值。转换规则如下：

1. 原始类型值

  • 数值：转换后还是原来的值。
  • 字符串：如果可以被解析为数值，则转换为相应的数值；否则返回 NaN。
  • 空字符串转为 0。
  • 布尔值：true 转成 1，false 转成 0。
  • undefined：转成 NaN。
  • null：转成 0。
Number(324) // 324
Number('324') // 324
Number('324abc') // NaN
Number('') // 0
Number(true) // 1
Number(false) // 0
Number(undefined) // NaN
Number(null) // 0

Number() 函数将字符串转换为数值时，比 parseInt() 函数严格很多。只要有一个字符无法转换为数值，整个字符串就会被转为 NaN。

parseInt('42 cats') // 42
Number('42 cats') // NaN

parseInt() 和 Number() 函数都会自动过滤字符串的前导和后缀空格。

parseInt('\t\v\r12.34\n') // 12
Number('\t\v\r12.34\n') // 12.34

2. 对象

Number() 方法的参数是对象时，返回 NaN，除非是包含单个数值的数组。

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

Number() 方法背后的转换规则如下：

  1. 调用对象自身的 valueOf() 方法。如果返回原始类型的值，则直接对该值使用 Number() 函数，不再进行后续步骤。
  2. 如果 valueOf() 方法返回的还是对象，则改为调用对象自身的 toString() 方法。如果 toString() 方法返回原始类型的值，则对该值使用 Number() 函数，不再进行后续步骤。
  3. 如果 toString() 方法返回的是对象，就报错。
var obj = {x: 1};
Number(obj) // NaN

// 等同于
if (typeof obj.valueOf() === 'object') {
  Number(obj.toString());
} else {
  Number(obj.valueOf());
}

（二）String()

String() 函数可以将任意类型的值转换为字符串。转换规则如下：

1. 原始类型值

  • 数值：转为相应的字符串。
  • 字符串：转换后还是原来的值。
  • 布尔值：true 转为字符串 "true"，false 转为字符串 "false"。
  • undefined：转为字符串 "undefined"。
  • null：转为字符串 "null"。
String(123) // "123"
String('abc') // "abc"
String(true) // "true"
String(undefined) // "undefined"
String(null) // "null"

2. 对象

String() 方法的参数如果是对象，返回一个类型字符串；如果是数组，返回该数组的字符串形式。

String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"

String() 方法背后的转换规则如下：

  1. 先调用对象自身的 toString() 方法。如果返回原始类型的值，则对该值使用 String() 函数，不再进行以下步骤。
  2. 如果 toString() 方法返回的是对象，再调用原对象的 valueOf() 方法。如果 valueOf() 方法返回原始类型的值，则对该值使用 String() 函数，不再进行以下步骤。
  3. 如果 valueOf() 方法返回的是对象，就报错。
String({a: 1})
// "[object Object]"

// 等同于
String({a: 1}.toString())
// "[object Object]"

（三）Boolean()

Boolean() 函数可以将任意类型的值转换为布尔值。转换规则如下：

  • undefined：false
  • null：false
  • 0（包含 -0 和 +0）：false
  • NaN：false
  • ''（空字符串）：false
  • 所有其他值：true
Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false
Boolean(true) // true
Boolean(false) // false
Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true

三、自动转换（隐式转换）

自动转换是指在某些情况下，JavaScript 会自动将数据类型转换为预期的类型。这些情况包括：

  1. 不同类型的数据互相运算。
  2. 对非布尔值类型的数据求布尔值。
  3. 对非数值类型的值使用一元运算符（+ 和 -）。

（一）自动转换为布尔值

JavaScript 遇到预期为布尔值的地方（比如 if 语句的条件部分），就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用 Boolean() 函数。

以下值会被转换为 false：

  • undefined
  • null
  • +0 或 -0
  • NaN
  • ''（空字符串）

其他所有值都会被转换为 true。

if ( !undefined
  && !null
  && !0
  && !NaN
  && !''
) {
  console.log('true');
} // true

（二）自动转换为字符串

JavaScript 遇到预期为字符串的地方，就会将非字符串的值自动转换为字符串。具体规则如下：

  • 先将复合类型的值转为原始类型的值，再将原始类型的值转为字符串。

字符串的自动转换主要发生在字符串的加法运算时。当一个值为字符串，另一个值为非字符串，则后者转为字符串。

'5' + 1 // '51'
'5' + true // "5true"
'5' + false // "5false"
'5' + {} // "5[object Object]"
'5' + [] // "5"
'5' + function (){} // "5function (){}"
'5' + undefined // "5undefined"
'5' + null // "5null"

（三）自动转换为数值

JavaScript 遇到预期为数值的地方，就会将参数值自动转换为数值。系统内部会自动调用 Number() 函数。

除了加法运算符（+）有可能把运算子转为字符串，其他运算符都会把运算子自动转成数值。

'5' - '2' // 3
'5' * '2' // 10
true - 1  // 0
false - 1 // -1
'1' - 1   // 0
'5' * []    // 0
false / '5' // 0
'abc' - 1   // NaN
null + 1 // 1
undefined + 1 // NaN

一元运算符也会把运算子转成数值。

+'abc' // NaN
-'abc' // NaN
+true // 1
-false // 0

四、总结

JavaScript 中的数据类型转换是一个重要且常见的概念。理解显式转换和隐式转换的规则，可以帮助你更好地控制代码的行为，避免因类型转换而导致的错误。

avatar
文章
阅读
粉丝