(Day7) 隐含转型 - 偷偷转换的 Strings 与 Numbers 类型

前言

昨天介绍了 JS 中强制转型，显性转型的部分，今天就要介绍最坑人的隐含转型

这边同样将隐含转型做个大方向的分类：

• 隐含转型 : Strings <–> Numbers
• 隐含转型 : 转成 Boolean
• 逻辑算子 || 与 &&
• 宽松相等（Loose Equals） vs 严格相等（Strict Equals）
  今天则会先介绍 隐含转型 : Strings <–> Numbers 的部分，剩余的隐含转型则会再下一篇介绍。

隐含转型 : Strings <–> Numbers

在上篇显性转型文章中，有刻意将 Strings <–> Numbers 拆成转成字串、转成数字，不过在隐含转型中由於 + 号算数运算子状况过於特别，所以这次还是一起讲了。

状况一 + 算数运算子

我们都知道，使用 + 运算子，相加两个数字时，呈现结果会是两个数字总和，若用 + 将两组字串相加，则会让字串内容连起来，但如果两个运算元的型别不一致呢？

这种状况 JS 会根据 运算元中是否有字串、数字类型时，将另为一个运算元自动转型，关於这部分则有几个规则：

• 当双方有一方是字串，两者都会转字串（优先度最高
  • [] 碰上 + 号，阵列中的值会一并转成字串，并带上阵列中的逗号，若是空阵列则转成空字串。
  • {} 放在运算元第一位，碰上 + 号，{} 会直接被当成空区块而无作用，若 {} 放在运算元第二位或是後方时，会被转成 "[object Object]" 的字串，且上述规则不论物件是否有值都会成立。
• 当双方有数字，两者会转数字（次等

接着就用程序码来看看上面规则是否正确:

'test' + 1 //"test1" 

• 'test' 是字串，数字 1 被转成字串，字串相加。

123 + [] // "123" 

• [] 会转成空字串，因此数字 123 也转成字串，结果就是字串 "123"

['1','2','3'] + 456 //"1,2,3456" 

• 阵列中的值会转成字串，数字 456 因此被转成字串，字串相加，要注意的是阵列转成字串後 , 会被保留。

{} + '123' //123 

• {} 在前没有作用，会变成 + 号会变成正负运算子，因为正负运算子字串 '123' 会被转成数字。

666 + {obj:'test'} //"666[object Object]"

• {obj:'test'} 在後面 会被转型成 "[object Object]" 的字串，因此数字 666 也转成字串 "666" 做字串相加。

true + 10 //11

• true 转成数字 1 ，与数字 10 相加。

以上大致就是各种型别碰上 + 算数运算子隐含转後的状况。

状况二 使用算数运算子将字串转为数字

除了 + 算数运算子，的状况比较特别，其他算数运算子，都会将字串转换成数字，范例如下

var test = '2'
test + 1  //"21"
test - 1  // 1
test * 1  //2
test / 1 //2

但如果字串不是数字内容的字串，使用 + 以外的算数运算子时都会回传 NaN ，例如：

var test = 'test'
test - 1  // NaN
test * 1  // NaN
test / 1 // NaN

参考资料

• JavaScript 核心篇 (六角学院）
• 你懂 JavaScript 吗？#8 强制转型（Coercion）
• 你不懂JS：类型与文法