[[394904]]

文本已經(jīng)過(guò)原作者 Viduni Wickramarachchi 授權(quán)翻譯。

你是否經(jīng)歷過(guò)JavaScript中的某些值比較沒(méi)有得到預(yù)期結(jié)果的情況?

看下面的情況：

即使[]==0結(jié)果為真，if[]條件也沒(méi)有根據(jù)結(jié)果執(zhí)行。有沒(méi)有想過(guò)為什么會(huì)這樣?

本文主要說(shuō)明這些值比較的工作原理以及影響它們的因素。在深入解釋之前，大家要熟悉一個(gè)概念：類(lèi)型轉(zhuǎn)換。

什么是 JavaScript 類(lèi)型轉(zhuǎn)換?

這也稱(chēng)為類(lèi)型強(qiáng)制。對(duì)于不熟悉此概念的人來(lái)說(shuō)，它只是將值從一種數(shù)據(jù)類(lèi)型自動(dòng)轉(zhuǎn)換為另一種數(shù)據(jù)類(lèi)型。

看個(gè)例子，大家會(huì)更清楚明白。

在此示例中，定義的兩個(gè)變量具有兩種類(lèi)型;字符串和數(shù)字。但是，當(dāng)我們使用 ==(非嚴(yán)格比較)進(jìn)行比較時(shí)，結(jié)果為true。原因是當(dāng)我們使用==比較這兩個(gè)時(shí)，JavaScript 會(huì)自動(dòng)嘗試將String類(lèi)型轉(zhuǎn)換為Number類(lèi)型以產(chǎn)生結(jié)果。這是一種強(qiáng)制轉(zhuǎn)換。

JavaScript中有多種強(qiáng)制類(lèi)型。

• Number conversions
• String conversions
• Boolean conversions
• 對(duì)象的類(lèi)型轉(zhuǎn)換

類(lèi)型強(qiáng)制轉(zhuǎn)換都是好的嗎?

在上述情況下，類(lèi)型轉(zhuǎn)換沒(méi)有害處。但是，在許多情況下，類(lèi)型強(qiáng)制會(huì)導(dǎo)致問(wèn)題。

我們看下面例子。

在這里，JavaScript已將Number類(lèi)型轉(zhuǎn)換為String。這與相等比較中發(fā)生的情況相反。我們預(yù)期的結(jié)果是450。但是，我們得到了String輸出。

現(xiàn)在，我們對(duì)類(lèi)型轉(zhuǎn)換以及為什么要避免使用類(lèi)型轉(zhuǎn)換有了清晰的了解，讓我們看看如何避免類(lèi)型轉(zhuǎn)換。這是本文最重要的部分。因此，請(qǐng)坐下來(lái)，喝咖啡并集中精力??

如何避免 JavaScript 類(lèi)型轉(zhuǎn)換

1. 對(duì)數(shù)學(xué)運(yùn)算使用顯式轉(zhuǎn)換

如果你需要對(duì)用戶(hù)輸入或任何其他值使用數(shù)學(xué)運(yùn)算，則在執(zhí)行該運(yùn)算之前，自己進(jìn)行一次顯式轉(zhuǎn)換會(huì)更安全。這樣，可以避免任何意外行為。

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

如果需要連接兩個(gè)數(shù)字，則使用模板文字會(huì)更安全。特別是不確定值的類(lèi)型。

也可以使用顯式轉(zhuǎn)換來(lái)導(dǎo)出相同的結(jié)果。

3.當(dāng)比較值時(shí)，使用嚴(yán)格的比較(===)

前面我們看到，當(dāng)使用==時(shí)，JavaScript 會(huì)執(zhí)行隱式類(lèi)型轉(zhuǎn)換，這會(huì)導(dǎo)致不一致的結(jié)果。因此，在我們的生產(chǎn)代碼中使用它是不安全的。

為了得出預(yù)期的結(jié)果，應(yīng)該始終使用===進(jìn)行比較。三等號(hào)隱含地表示：

我可以同時(shí)了解變量的值和類(lèi)型

因此，如果將數(shù)字和字符串與值進(jìn)行比較，結(jié)果將是false，因?yàn)樗矔?huì)考慮變量的類(lèi)型。

這是獲得預(yù)期一致結(jié)果的更安全的方法。

在JavaScript中，數(shù)據(jù)類(lèi)型有兩種變體。

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

到目前為止，我們已經(jīng)討論了原始數(shù)據(jù)類(lèi)型的類(lèi)型轉(zhuǎn)換。我提供的第一個(gè)示例涉及非原始數(shù)據(jù)類(lèi)型，例如數(shù)組。

所有非原始數(shù)據(jù)類(lèi)型都有一個(gè)名為.toPrimitive()的內(nèi)置函數(shù)。比較非原始值和原始值時(shí)，此函數(shù)會(huì)自動(dòng)將非原始類(lèi)型轉(zhuǎn)換為原始類(lèi)型。在我們看過(guò)的第一個(gè)示例中，當(dāng)使用此函數(shù)進(jìn)行非嚴(yán)格比較時(shí)，空數(shù)組將轉(zhuǎn)換為空字符串。確切地說(shuō)，用于執(zhí)行此轉(zhuǎn)換的確切函數(shù)是toString()。因此，空數(shù)組(將轉(zhuǎn)換為空字符串)等于0。

正如我們前面所看到的，當(dāng)在if條件中檢查空數(shù)組時(shí)，將執(zhí)行條件中的行。但是，如果空數(shù)組隱式轉(zhuǎn)換為0怎么辦?

這是在單獨(dú)的JavaScript條件下進(jìn)行的: 真值和虛值 。除了true以外，JavaScript 將大部分有值的視為真值，除了少數(shù)值。例如，0，-0，""被視為虛值。由于空數(shù)組不被認(rèn)為是虛值，當(dāng)在條件中檢查它時(shí)，它將作為真值執(zhí)行。(這里不會(huì)發(fā)生類(lèi)型轉(zhuǎn)換，空數(shù)組保留為數(shù)組，這是類(lèi)型轉(zhuǎn)換不一致的另一個(gè)例子。)

總結(jié)

JavaScript作為一種松散類(lèi)型語(yǔ)言，執(zhí)行隱式類(lèi)型轉(zhuǎn)換。這會(huì)導(dǎo)致不一致和意想不到的結(jié)果。因此，我們應(yīng)該在任何時(shí)候都避免這種類(lèi)型轉(zhuǎn)換。如果不確定值的類(lèi)型，可以使用typeof檢查。檢查類(lèi)型可以讓我們更好地理解應(yīng)該如何進(jìn)行轉(zhuǎn)換。

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

作者：Viduni Wickramarachchi 譯者：前端小智 來(lái)源：stackabuse

原文：https://blog.bitc.io/how-to-avoid-javascript-type-conversions-29e1258f37d8

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。