(Day07) 隱含轉型-偷偷轉換的 Strings 與 Numbers 類型

發表於 更新於 分類於 Disqus：
昨天介紹了 JS 中強制轉型，顯性轉型的部分，今天就要介紹最坑人的隱含轉型

前言

昨天介紹了 JS 中強制轉型，顯性轉型的部分，今天就要介紹最坑人的隱含轉型

這邊同樣將隱含轉型做個大方向的分類：

  • 隱含轉型 : Strings <–> Numbers
  • 隱含轉型 : 轉成 Boolean
  • 邏輯算子 || 與 &&
  • 寬鬆相等（Loose Equals） vs 嚴格相等（Strict Equals）
    今天則會先介紹 隱含轉型 : Strings <–> Numbers 的部分，剩餘的隱含轉型則會再下一篇介紹。

隱含轉型 : Strings <–> Numbers

在上篇顯性轉型文章中，有刻意將 Strings <–> Numbers 拆成轉成字串、轉成數字，不過在隱含轉型中由於 + 號算數運算子狀況過於特別，所以這次還是一起講了。

狀況一 + 算數運算子

我們都知道，使用 + 運算子，相加兩個數字時，呈現結果會是兩個數字總和，若用 + 將兩組字串相加，則會讓字串內容連起來，但如果兩個運算元的型別不一致呢？

這種狀況 JS 會根據 運算元中是否有字串、數字類型時，將另為一個運算元自動轉型，關於這部分則有幾個規則：

  • 當雙方有一方是字串，兩者都會轉字串（優先度最高
    • [] 碰上 + 號，陣列中的值會一併轉成字串，並帶上陣列中的逗號，若是空陣列則轉成空字串。
    • {} 放在運算元第一位，碰上 + 號，{} 會直接被當成空區塊而無作用，若 {} 放在運算元第二位或是後方時，會被轉成 "[object Object]" 的字串，且上述規則不論物件是否有值都會成立。
  • 當雙方有數字，兩者會轉數字（次等

接著就用程式碼來看看上面規則是否正確:

1
'test' + 1 //"test1"
  • 'test' 是字串，數字 1 被轉成字串，字串相加。
1
123 + [] // "123"
  • [] 會轉成空字串，因此數字 123 也轉成字串，結果就是字串 “123”
1
['1','2','3'] + 456 //"1,2,3456"
  • 陣列中的值會轉成字串，數字 456 因此被轉成字串，字串相加，要注意的是陣列轉成字串後 , 會被保留。
1
{} + '123' //123
  • {} 在前沒有作用，會變成 + 號會變成正負運算子，因為正負運算子字串 '123' 會被轉成數字。
1
666 + {obj:'test'} //"666[object Object]"
  • {obj:'test'} 在後面 會被轉型成 "[object Object]" 的字串，因此數字 666 也轉成字串 “666” 做字串相加。
1
true + 10 //11
  • true 轉成數字 1 ，與數字 10 相加。

以上大致就是各種型別碰上 + 算數運算子隱含轉後的狀況。

狀況二 使用算數運算子將字串轉為數字

除了 + 算數運算子，的狀況比較特別，其他算數運算子，都會將字串轉換成數字，範例如下

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

但如果字串不是數字內容的字串，使用 + 以外的算數運算子時都會回傳 NaN ，例如：

1
2
3
4
var test = 'test'
test - 1  // NaN
test * 1  // NaN
test / 1 // NaN

參考資料