如何避免JavaScript類型轉換

做者：Viduni Wickramarachchi
譯者：前端小智
來源：stackabuse

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。

你是否經歷過JavaScript中的某些值比較沒有獲得預期結果的狀況？

看下面的狀況：

即便[]==0結果爲真，if[]條件也沒有根據結果執行。有沒有想過爲何會這樣?

本文主要說明這些值比較的工做原理以及影響它們的因素。 在深刻解釋以前，你們要熟悉一個概念： 類型轉換。

什麼是 JavaScript 類型轉換？

這也稱爲類型強制。 對於不熟悉此概念的人來講，它只是將值從一種數據類型自動轉換爲另外一種數據類型。

看個例子，你們會更清楚明白。

在此示例中，定義的兩個變量具備兩種類型； 字符串和數字。 可是，當咱們使用 ==（非嚴格比較）進行比較時，結果爲true。 緣由是當咱們使用==比較這兩個時，JavaScript 會自動嘗試將String類型轉換爲Number類型以產生結果。 這是一種強制轉換。

JavaScript中有多種強制類型。

• Number conversions
• String conversions
• Boolean conversions
• 對象的類型轉換

類型強制轉換都是好的嗎？

在上述狀況下，類型轉換沒有害處。 可是，在許多狀況下，類型強制會致使問題。

咱們看下面例子。

在這裏，JavaScript已將Number類型轉換爲String。 這與相等比較中發生的狀況相反。 咱們預期的結果是450。可是，咱們獲得了String輸出。

如今，咱們對類型轉換以及爲何要避免使用類型轉換有了清晰的瞭解，讓咱們看看如何避免類型轉換。 這是本文最重要的部分。 所以，請坐下來，喝咖啡並集中精力😃

如何避免 JavaScript 類型轉換

1. 對數學運算使用顯式轉換

若是你須要對用戶輸入或任何其餘值使用數學運算，則在執行該運算以前，本身進行一次顯式轉換會更安全。 這樣，能夠避免任何意外行爲。

2. 使用模板字面值鏈接字符串，而不是+

若是須要鏈接兩個數字，則使用模板文字會更安全。 特別是不肯定值的類型。

也可使用顯式轉換來導出相同的結果。

3.當比較值時，使用嚴格的比較(===)

前面咱們看到，當使用==時，JavaScript 會執行隱式類型轉換，這會致使不一致的結果。所以，在咱們的生產代碼中使用它是不安全的。

爲了得出預期的結果，應該始終使用===進行比較。 三等號隱含地表示：

我能夠同時瞭解變量的值和類型

所以，若是將數字和字符串與值進行比較，結果將是false，由於它也會考慮變量的類型。

這是得到預期一致結果的更安全的方法。

在JavaScript中，數據類型有兩種變體。

• 原始值(字符串、數字等)
• 非原始值(數組、對象)

到目前爲止，咱們已經討論了原始數據類型的類型轉換。 我提供的第一個示例涉及非原始數據類型，例如數組。

全部非原始數據類型都有一個名爲.toPrimitive()的內置函數。 比較非原始值和原始值時，此函數會自動將非原始類型轉換爲原始類型。 在咱們看過的第一個示例中，當使用此函數進行非嚴格比較時，空數組將轉換爲空字符串。 確切地說，用於執行此轉換的確切函數是toString()。 所以，空數組（將轉換爲空字符串）等於0。

正如咱們前面所看到的，當在if條件中檢查空數組時，將執行條件中的行。 可是，若是空數組隱式轉換爲0怎麼辦？

這是在單獨的JavaScript條件下進行的: 真值和虛值 。 除了true之外，JavaScript 將大部分有值的視爲真值，除了少數值。 例如，0，-0，""被視爲虛值。因爲空數組不被認爲是虛值，當在條件中檢查它時，它將做爲真值執行。(這裏不會發生類型轉換，空數組保留爲數組，這是類型轉換不一致的另外一個例子。)

總結

JavaScript做爲一種鬆散類型語言，執行隱式類型轉換。這會致使不一致和意想不到的結果。所以，咱們應該在任什麼時候候都避免這種類型轉換。若是不肯定值的類型，可使用typeof檢查。檢查類型可讓咱們更好地理解應該如何進行轉換。

~完，我是刷碗智，我要去刷碗了，骨的白~

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://blog.bitc.io/how-to-a...

交流

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。