首頁 > web前端 > js教程 > JavaScript中的值型別轉換介紹_javascript技巧

JavaScript中的值型別轉換介紹_javascript技巧

WBOY
發布: 2016-05-16 16:22:46
原創
969 人瀏覽過

在JavaScript中進行、-、*、/、==、!=等運算時,如果運算元左右兩邊的值型別與預期型別不一致,JavaScript會將運算子兩邊的值轉換成預期的型別後再進行操作。預期值類型為string時,JavaScript會將值轉換為string;預期值類型為number時,JavaScript會將值轉換為number (如果無法轉換為數值,則傳回NaN)例如:

 

複製程式碼 程式碼如下:

console.log(10 " cats");//10 cats
console.log(10 * " cats");//NaN, " cats" will be converted to NaN
console.log(10 "2");//102
console.log(10 - "2");//8
console.log(10 / "2");//5
console.log(10 * "2");//20
console.log(10 * " 2");//20
console.log("10" * "2");//20

值型別轉換規則

JavaScript中的值轉換規則可以參考「JavaScript – The Definitive Guide」一書中的Table 3-2. JavaScript type conversions。比較值得注意的一些地方是:

1.undefined轉換成number後結果為NaN。
2.null轉換成number後結果為0。
3.空字串”"轉換成number後結果為0。
4.-0轉換成string後結果為”0″。
5.空數組[]轉換成number後結果為0。
6.僅有一個number成員的陣列(如[9])轉換成number後結果為該numer值(9)。

當JavaScript將string轉換成number時,有兩個比較有趣的規則:

1.JavaScript會將字串開頭和結尾處的空白字元刪除後再進行轉換,因此像」 42 「這樣的字串可以順利的被轉換成數字42。

2.刪除開頭和結尾處的空白字符後,如果字串中依然包含非數字字符,那麼該字串會被轉換成NaN。例如:”3 m”就會被轉換成NaN。

實例:

複製程式碼 程式碼如下:

console.log(10 * " 3 ");//30
console.log(10 * "3 m");//NaN, "3 m" will be converted to NaN

值型別轉換與比較

在JavaScript中,等於運算子(==)的使用會涉及到值型別轉換:如果==運算子兩邊的值型別不一致,那麼JS會將它們轉換成一致的型別後再加以判斷。要小心的是,兩個不同類型的值,經過型別轉換也許可以等價,但這並不代表對它們使用==運算子的結果就一定為true。一個簡單的例子是undefined和false:將undefined轉換成boolean類型後結果剛好為false,但事實上undefined==false的結果卻是false。

明確型別轉換

使用JavaScript的類型自動轉換非常便捷,但同時也很容易帶來諸如程式碼可維護性等問題。為了讓程式碼更清晰、減少歧義,有時會在JS程式中使用明確型別轉換:

複製程式碼 程式碼如下:

Number("3")//3
String(false)//"false"
Boolean([])//true

大多數情況下,明確型別轉換的結果與JS自動型別轉換的結果是一致的;但存在1個特例:當將null或undefined自動轉換成Object時,JS會拋出TypeError錯誤;但當明確地將null或undefined轉換成Object時,JS會傳回一個空的物件:
複製程式碼 程式碼如下:

console.log(Object(undefined));//empty object
console.log(Object(null));//empty object

同時,如果明確轉換所指定的類型與JS自動轉換所指定的類型不一樣,那麼,得到的結果也不一樣。例如之前提到的undefined==false結果是false;如果明確指定轉換類型為Boolean,那麼得到的結果就為true了:
複製程式碼 程式碼如下:

console.log(undefined == false);//false
console.log(Boolean(undefined) == Boolean(false));//true

類型自動轉換的使用

在JS中,可以使用值類型的自動轉換,透過操作符來達到和明確轉換一樣的效果,例如:

複製程式碼 程式碼如下:

console.log(false "");//"false"
console.log( false);//0
console.log(!!3);//true
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板