- 原文地址：dev.to/promhize/wh…
前几天忽然发现github上有一个大热门项目 —— “33 concepts every JavaScript developer should know”，目前已经将近25000个Stars。这个项目旨在帮助前端开发者掌握33个JavaScript基础概念。按作者话说，这些概念并不是开发所必需的，但它们是引导你通向前端大牛之路的基石。
遗憾的是，该项目中文版的文章收录不尽完整。所以本着学习与交流的目的，本人会把33个概念所涉及的文章利用业余时间竭尽所能的翻译出来，其中不免疏漏，望请指正。本文是第四篇，以下为正文：
隐式转型是指，JavaScript会把一个非预期值转换为预期值。
什么意思呢？
在一定条件下，你能够把一个字符串当作数值使用，也能够把一个对象当作字符串使用，这些类型能够发生转换，以满足你的预期。然而，我们应尽量避免JavaScript的这一语言特性。
3 * "3" //9
1 + "2" + 1 //121
true + true //2
10 - true //9
const foo = {
valueOf: () => 2
}
3 + foo // 5
4 * foo // 8
const bar = {
toString: () => " promise is a boy :)"
}
1 + bar // "1 promise is a boy :)"
4 * [] // 0
4 * [2] // 8
4 + [2] // "42"
4 + [1, 2] // "41,2"
4 * [1, 2] // NaN
"string" ? 4 : 1 // 4
undefined ? 4 : 1 // 1
数字表达式中的非数值
字符串
当一个字符串参与到数学运算中来时，如涉及以下四种运算：-、*、/、%，则相当于为该字符串调用了内置的Number()函数。这很容易理解，任何包含数字的字符串都会转换为数字，对于含有非数字字符的，则返回NaN，具体参考Number()转换规则。示例如下：
3 * "3" // 3 * 3
3 * Number("3") // 3 * 3
Number("5") // 5
Number("1.") // 1
Number("1.34") // 1.34
Number("0") // 0
Number("012") // 12
Number("1,") // NaN
Number("1+1") // NaN
Number("1a") // NaN
Number("one") // NaN
Number("text") // NaN
“+”操作符是个例外
不像其它数学运算符，“+”表现出两种特性：
- 加法
- 字符串拼接
字符串参与“+”操作时，JavaScript不再把字符串转为数字，反会将数字转为字符串。
// 字符串拼接
1 + "2" // "12"
1 + "js" // "1js"
// 加法运算
1 + 2 // 3
1 + 2 + 1 // 4
// 先加法，再拼接
1 + 2 + "1" // "31"
(1 + 2) + "1" // "31"
// 全部拼接
1 + "2" + 1 // "121"
(1 + "2") + 1 // "121"
对象
JavaScript中大多数对象都会转换为“[object Object]”，比如：
"name" + {} // "name[object Object]
每个JavaScript都会继承toString()方法，这就说明无论何时，对象度能够被转换为字符串。接下来，toString()方法的返回值就会参与到字符串拼接和数学运算中去。
const foo = {}
foo.toString() // [object Object]
const baz = {
toString: () => "I'm object baz"
}
baz + "!" // "I'm object baz!"
对象参与数学运算时，JavaScript会试图将它的返回值转换为数字；字符串拼接时，则转换为字符串。
const foo = {
toString: () => 4
}
2 * foo // 8
2 / foo // 0.5
2 + foo // 6
"four" + foo // "four4"
const baz = {
toString: () => "four"
}
2 * baz // NaN
2 + baz // 2four
const bar = {
toString: () => "2"
}
2 + bar // "22"
2 * bar // 4
数组
数组同样继承了toString()方法，然而在工作方式上则略有不同，转换的过程相当于为数组调用了一个没传参的join()方法。
[1,2,3].toString() // "1,2,3"
[1,2,3].join() // "1,2,3"
[].toString() // ""
[].join() // ""
"me" + [1,2,3] // "me1,2,3"
4 + [1,2,3] // "41,2,3"
4 * [1,2,3] // NaN
当你把数组当作字符串使用时，JavaScript会将toString()的返回值和另一个值拼接起来；当作数字使用时，返回值则转换为数字。
4 * [] // 0
4 / [2] // 2
// 相当于
4 * Number([].toString())
4 * Number("")
4 * 0
//
4 / Number([2].toString())
4 / Number("2")
4 / 2
True, False 和 ""
Number(true) // 1
Number(false) // 0
Number("") // 0
4 + true // 5
3 * false // 0
3 * "" // 0
3 + "" // "3"
The valueOf() method```
在JavaScript中，你同样可以定义一个valueOf()方法，它也可以将对象转换为字符串或数值。
const foo = {
valueOf: () => 3
}
3 + foo // 6
3 * foo // 9
当toString()和valueOf()方法同时在对象中出现时，JavaScript会优先调用valueOf方法。
const bar = {
toString: () => 2,
valueOf: () => 5
}
"sa" + bar // "sa5"
3 * bar // 15
2 + bar // 7
真和假
JavaScript中的每个值都可以转换为true和false。转换为true意味着该值为真，反之则为假。
其中有为数不多的值会被转换为false，它们是：
- false
- 0
- null
- undefined
- NaN
- -0
除此以外，所有值都为真。
if (-1) // truthy
if ("0") // truthy
if ({}) // truthy
上面的代码正如我们所预期，但是在实践中我们仍应该显式的确定一个值是否为真。总体上，我们应当避免使用隐式转型，即便你认为已将它烂熟于胸了。
下面的代码才是你应该参考使用的：
if (counter === 2)
//or
if (typeof counter === "number")
假如，你定义了一个处理数字的函数。
const add = (number) => {
if (!number) new Error("Only accepts arguments of type: number")
//your code
}
当你调用这个函数，并想传入参数 0 时，函数会给你抛出一个错误。
add(0) // Error: Only accepts arguments of type: number
// 更好的尝试
const add = (number) => {
if (typeof number !== "number") new Error("只接受数字类型: number")
//your code
}
add(0) // 这下没错了
NaN
NaN 是一个特殊的数值，它与任何值都不相等，包括 NaN 本身
NaN === NaN // false
const notANumber = 3 * "a" // NaN
notANumber == notANumber // false
notANumber === notANumber // false
NaN 是JavaScript中唯一一个自己不等于自己的值，你可以利用这个特性来检查NaN
if (notANumber !== notANumber) // true
ES6标准引进了一种用来检查 NaN 的新方法 Number.isNaN。
Number.isNaN(NaN) // true
Number.isNaN("name") // false
使用这个函数时需要注意，它会首先将参数转型，然后才开始检查 NaN，示例如下：
const coerceThenCheckNaN = (val) => {
const coercedVal = Number(val)
return coercedVal !== coercedVal ? true : false
}
coerceThenCheckNaN("1a") // true
coerceThenCheckNaN("1") // false
coerceThenCheckNaN("as") // true
coerceThenCheckNaN(NaN) // true
coerceThenCheckNaN(10) // false
（完）
下一篇讲述相等操作符和全等操作符，敬请期待
