乐趣区

关于前端基础:JavaScript之类型转换

jiezi

强制转换

强制转换次要指应用 Number、String 和 Boolean 三个函数，手动将各种类型的值，散布转换成数字、字符串或者布尔值。

Number()

应用 Number 函数，能够将任意类型的值转化成数值。

上面分成两种状况探讨，一种是参数是原始类型的值，另一种是参数是对象。

（1）原始类型值

原始类型值的转换规则如下。

// 数值：转换后还是原来的值
Number(324) // 324

// 字符串：如果能够被解析为数值，则转换为相应的数值
Number('324') // 324

// 字符串：如果不能够被解析为数值，返回 NaN
Number('324abc') // NaN

// 空字符串转为 0
Number('') // 0

// 布尔值：true 转成 1，false 转成 0
Number(true) // 1
Number(false) // 0

// undefined：转成 NaN
Number(undefined) // NaN

// null：转成 0
Number(null) // 0

Number 函数将字符串转为数值，要比 parseInt 函数严格很多。基本上，只有有一个字符无奈转成数值，整个字符串就会被转为 NaN。

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

下面代码中，parseInt 一一解析字符，而 Number 函数整体转换字符串的类型。

另外，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 背地的转换规则比较复杂。

第一步，调用对象本身的 valueOf 办法。如果返回原始类型的值，则间接对该值应用 Number 函数，不再进行后续步骤。
第二步，如果 valueOf 办法返回的还是对象，则改为调用对象本身的 toString 办法。如果 toString 办法返回原始类型的值，则对该值应用 Number 函数，不再进行后续步骤。
第三步，如果 toString 办法返回的是对象，就报错。

请看上面的例子。

var obj = {x: 1};
Number(obj) // NaN

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

下面代码中，Number 函数将 obj 对象转为数值。背地产生了一连串的操作，首先调用 obj.valueOf 办法, 后果返回对象自身；于是，持续调用 obj.toString 办法，这时返回字符串 [object Object]，对这个字符串应用 Number 函数，失去 NaN。

默认状况下，对象的 valueOf 办法返回对象自身，所以个别总是会调用 toString 办法，而 toString 办法返回对象的类型字符串（比方 [object Object]）。所以，会有上面的后果。

Number({}) // NaN
如果 toString 办法返回的不是原始类型的值，后果就会报错。

var obj = {valueOf: function () {return {};
  },
  toString: function () {return {};
  }
};

Number(obj) // TypeError: Cannot convert object to primitive value

下面代码的 valueOf 和 toString 办法，返回的都是对象，所以转成数值时会报错。

从上例还能够看到，valueOf 和 toString 办法，都是能够自定义的。

Number({valueOf: function () {return 2;}
})
// 2

Number({toString: function () {return 3;}
})
// 3

Number({valueOf: function () {return 2;},
  toString: function () {return 3;}
})
// 2

下面代码对三个对象应用 Number 函数。第一个对象返回 valueOf 办法的值，第二个对象返回 toString 办法的值，第三个对象示意 valueOf 办法先于 toString 办法执行。

String()

String 函数能够将任意类型的值转化成字符串，转换规则如下。

（1）原始类型值

  1. 数值：转为相应的字符串。
  2. 字符串：转换后还是原来的值。
  3. 布尔值：true 转为字符串 ”true”，false 转为字符串 ”false”。
  4. undefined：转为字符串 ”undefined”。
  5. null：转为字符串 ”null”。
  6. String(123) // “123”
  7. String(‘abc’) // “abc”
  8. String(true) // “true”
  9. String(undefined) // “undefined”
  10. String(null) // “null”

（2）对象

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

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

String 办法背地的转换规则，与 Number 办法基本相同，只是调换了 valueOf 办法和 toString 办法的执行程序。

  1. 先调用对象本身的 toString 办法。如果返回原始类型的值，则对该值应用 String 函数，不再进行以下步骤。
  2. 如果 toString 办法返回的是对象，再调用原对象的 valueOf 办法。如果 valueOf 办法返回原始类型的值，则对该值应用 String 函数，不再进行以下步骤。
  3. 如果 valueOf 办法返回的是对象，就报错。

上面是一个例子。

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

下面代码先调用对象的 toString 办法，发现返回的是字符串 [object Object]，就不再调用 valueOf 办法了。

如果 toString 法和 valueOf 办法，返回的都是对象，就会报错。

var obj = {valueOf: function () {return {};
  },
  toString: function () {return {};
  }
};

String(obj) // TypeError: Cannot convert object to primitive value

上面是通过自定义 toString 办法，扭转返回值的例子。

String({toString: function () {return 3;}
}) // "3"

String({valueOf: function () {return 2;}
}) // "[object Object]"

String({valueOf: function () {return 2;},
  toString: function () {return 3;}
}) // "3"

下面代码对三个对象应用 String 函数。第一个对象返回 toString 办法的值（数值 3），第二个对象返回的还是 toString 办法的值（[object Object]），第三个对象示意 toString 办法先于 valueOf 办法执行。

Boolean()

Boolean 函数能够将任意类型的值转为布尔值。

它的转换规则绝对简略：除了以下五个值的转换后果为 false，其余的值全副为 true。

  1. undefined
  2. null
  3. - 0 或 +0
  4. NaN
  5. ”（空字符串）
Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false

留神，所有对象（包含空对象）的转换后果都是 true，甚至连 false 对应的布尔对象 new Boolean(false) 也是 true（详见《原始类型值的包装对象》一章）。

Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true

所有对象的布尔值都是 true，这是因为 JavaScript 语言设计的时候，出于性能的思考，如果对象须要计算能力失去布尔值，对于 obj1 && obj2 这样的场景，可能会须要较多的计算。为了保障性能，就对立规定，对象的布尔值为 true。

主动转换

上面介绍主动转换，它是以强制转换为根底的。

遇到以下三种状况时，JavaScript 会主动转换数据类型，即转换是主动实现的，用户不可见。

第一种状况，不同类型的数据相互运算。

123 + ‘abc’ // “123abc”

第二种状况，对非布尔值类型的数据求布尔值。

if ('abc') {console.log('hello')
}  // "hello"

第三种状况，对非数值类型的值应用一元运算符（即 + 和 -）。

+ {foo: 'bar'} // NaN
- [1, 2, 3] // NaN

主动转换的规定是这样的：预期什么类型的值，就调用该类型的转换函数。比方，某个地位预期为字符串，就调用 String 函数进行转换。如果该地位即能够是字符串，也可能是数值，那么默认转为数值。

因为主动转换具备不确定性，而且不易除错，倡议在预期为布尔值、数值、字符串的中央，全副应用 Boolean、Number 和 String 函数进行显式转换。

主动转换为布尔值

JavaScript 遇到预期为布尔值的中央（比方 if 语句的条件局部），就会将非布尔值的参数主动转换为布尔值。零碎外部会主动调用 Boolean 函数。

上面两种写法，有时也用于将一个表达式转为布尔值。它们外部调用的也是 Boolean 函数。

// 写法一
expression ? true : false
// 写法二
!! expression

主动转换为字符串

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

下面代码中，运算符两侧的运算子，都被转成了数值。

留神：null 转为数值时为 0，而 undefined 转为数值时为 NaN。

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

+'abc' // NaN
-'abc' // NaN
+true // 1
-false // 0
退出移动版