如何避免JavaScript類型轉換

本已經過原作者 Viduni Wickramarachchi 授權翻譯。

你是否經歷過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檢查。檢查類型可以讓我們更好地理解應該如何進行轉換。

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

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

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

tml+css基礎一：html簡介和發展史

HTML全稱（hypertext markup language）譯為超文本標記語言，其譯文代表了HTML的含義，它和其他編程語言不同的是，HTML不是一門真正意義上編程語言，而是一種標記語言，通過帶有尖角號的標簽對文本進行標記，從而實現網頁的結構搭建。

1.2、HTML發展史

HTML創始人（蒂姆·伯納斯-李）蒂姆·伯納斯-李除了是HTML的創始人，還是w3c組織的主席。

1、HTML1.0 （1991年12月）

1991年萬維網（www）在互聯網上首次露面，也隨之引起了巨大的轟動。

1989年，伯納斯-李寫了一份備忘錄，提出建立一個基于互聯網的超文本系統。同年和另外一個工程師一起進行聯合資金申請，但是這個項目并沒有通過。

1991年底的時候，伯納斯-李公開了一份“HTML Tag”的文檔，里面描述了組成HTML初始版本的18個元素

2、HTML2.0（1995年11月）

HTML 2.0是HTML語言的擴展。????

與原始版本的HTML不同，HTML 2.0被創建為Web標準，規定了常見的網頁結構

3、HTML3.2（1996年1月）

慘淡的"第一次瀏覽器大戰時期（Netspace Vs IE）"，兩大巨頭不斷推出重大舉措試圖控制整個領域。???????

網頁開發者是這場戰爭中的焦點。商業戰爭就像軍備競賽，各家公司為了保持領先，招兵買馬。各家都有各家的規則。?????????

那時候，你不得不寫兩份不同的網頁，一個用于網景的瀏覽器，另一個用于微軟的瀏覽器

4、HTML4（1997年12月）

瀏覽器大戰接近尾聲，W3C（世界萬維網聯盟）成立，他們打算通過制定統一的HTML標準，使整個產業能有序的發展。 ? ? ? ? ? ?

他們計劃用兩種語言分離出HTML的表達式（HTML 4.0）和結構（CSS），并且說服瀏覽器廠商接受這些標準

這次發布提供了規范的三種變體：

Strict，嚴格版本；

Transitional，過渡版本；

Frameset，iframe框架集；

HTML4.0 采納了許多瀏覽器特定的元素類型及屬性，但是同時也把 Netscape 的視覺化標記標記為過時的尋求淘汰; 贊成使用樣式表; 同時在1998年4月對HTML4.0進行了微小的修訂，沒有增加版本號HTML5.0

5、HTML4.01（1999年12月）

像 HTML4.0 一樣提供了三種變體，并且他的最終錯誤修訂版在2001年的5月12日發布

6、XHTML 1.0（2000年1月）

各大瀏覽器廠商紛紛接受W3C標準的時候，新技術出現了。?????????????

HTML和另一種語言XML融合，XHTML（可拓展的超文本標記語言）就此誕生。???????????

它繼承了HTML的通用型和瀏覽器的兼容性，繼承了XML的嚴密性和可拓展性

7、HTML5（2014 年 10 月）

HTML5是HTML最新的修訂版本，由W3C制定，目標是取代1999年所制定的HTML 4.01和XHTML 1.0標準

我們現在使用的是html5版本，因為由于新興框架的出現和瀏覽器兼容性的提升，讓我們選擇了html5。

：基本概念

this字面意思是當前，當前執行代碼的環境對象或者是上下文。代表著當前方法執行的環境上下文，那么何為環境上下文，通俗的說，誰調用了函數，誰就是這個函數的環境上下文。

在js中，this只有兩種指向，一種是指向當前的封閉作用域，或者是指向當前作用域的外層，this的最頂層就是window對象。

關于this必須要了解的是嚴格模式，嚴格模式是js里面的一個子集，是具有限制性JavaScript變體，嚴格模式也是js的一種，但是加了一些限制。

比如：

在嚴格模式下通過拋出錯誤來消除了一些原有的靜默錯誤(靜默錯誤：語法有錯誤但是js并沒有提示，默認允許這個操作)。比如要取一個函數的傳入參數，在非嚴格模式下，可以直接拿到它的grument，但在嚴格模式下會拋出一個錯誤。
嚴格模式修復了一些導致JavaScript引擎難以執行優化的缺陷
禁用了在ECMAScript的未來版本中可能會定義的一些語法

進入"嚴格模式"的標志："use strict";

// 為整個腳本開啟嚴格模式 
"use strict";
var v = "Hi! I'm a strict mode script!";
?
// 為函數開啟嚴格模式 
function strict() {
 'use strict';
 function nested() { 
 return "And so am I!"; 
 }
 return "Hi! I'm a strict mode function! " + nested();
}

2：全局環境

在全局環境下，無論是否在嚴格模式下，在全局執行環境下(任何函數體外部)this指向全局對象。也就是說在全局執行環境，這個this永遠指向全局對象，這個全局對象在瀏覽器中就是window。

//瀏覽器環境
var name = 'Eric';
console.log(window.name === this.name); /* true */
console.log(window === this); /* true */

3：函數體內部

在函數體內部，this的值取決于函數被調用的方式。函數被調用的方式有很多種：

簡單調用，也就是說沒有添加任何額外的操作，沒有添加一個this的綁定或者是改變。

簡單調用分為嚴格模式與非嚴格模式。

在非嚴格模式下，this默認指向全局對象。

// 瀏覽器環境
function simple(){
 return this;
}
console.log(simple() === window);
// true

在嚴格模式下，保持進入執行環境時的值，沒有指定時默認undefined。

// 瀏覽器環境
function simple2(){
 "use strict";
 return this;
}
simple2() === undefined;
// true 
window.simple2() === window;
// true

this傳遞，在js中this綁定有兩種：

一種是call/apply，可以看作是一種，它們都是一個綁定this的立即執行的一個方法，綁定之后會立即執行這個函數，兩者的區別在于傳遞參數的不同，一個是傳一個參數，一個是傳一堆參數；call/apply實際上是綁定值的是一個對象，存在一個ToObject過程。call/apply是一個立即執行的綁定this的一個操作。

// 瀏覽器環境 
var object = {
 name: 'Eric'
};
var name = 'Iven';
function getName(arg) {
 return this.name;
}
?
getName(); /* Iven */
getName.call(object); /* Eric */
getName.apply(object); /* Eric */

另一種是bind，與上面不同的是bind不會立即執行，它只是實現一個綁定的過程，返回的是一個柯里化的函數，這個柯里化的函數就是call/apply。bind只能被綁定一次。

name = 'Davy';
function bindThis(){
 return this.name;
}
var getName1 = bindThis.bind({ name: "Eric" });
console.log(getName1()); /* Eric */
?
var getName2 = getName1.bind({ name: "Iven" });
console.log(getName2()); /* Eric */

箭頭函數在執行的時候會形成一個封閉的作用域，this與封閉作用域的this保持一致，call/apply/bind都將會被忽略。

// 瀏覽器環境 
var globalThis = this;
var arrowsFunction = () => this;
console.log(arrowsFunction() === globalObject); /* true */

作為對象的方法被調用(有一個靠近原則)：在對象里面定義了一個函數，然后通過對象去調用這個函數。

// 瀏覽器環境 
var object = {
 name: 'Eric',
?
 getName: function() {
 return this.name;
 }
};
console.log(object.getName()); /* Eric */
?
?
function getName2() {
 return this.name;
}
object.getName = getName2;
console.log(object.getName()); /* Eric */
?
?
object.object = {
 getName: getName2,
 name: 'Iven'
};
console.log(object.object.getName()); /* Iven */

4：全局函數

setTimeout
setInterval
alert

setInterval()方法用于在指定的毫秒數后調用函數或計算表達式。

語法：setTimeout(code，millisec)，參數code必需，要調用的函數后執行的JavaScript代碼串；millisec必需，在執行代碼前等待的毫秒數。

注意：setTimeout()只執行code一次，如果需要多次調用，請使用setInterval()或者讓code自身再次調用setTimeout()，也就是利用遞歸。

setInterval()方法可按照指定的周期來調用函數或計算表達式。它會不停地調用函數，指導clearInterval()被調用或者窗口被關閉。由setInterval()返回的ID值可以用作clearInterval()方法的參數。

在線咨詢

上一篇：HTML5(H5)常用的十大前端框架（一）
下一篇：在 CSS 中隱藏元素的 10 種方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商