JavaScript中的值類(lèi)型轉(zhuǎn)換介紹
在JavaScript中進(jìn)行+、-、*、/、==、!=等運(yùn)算時(shí)，如果操作符左右兩邊的值類(lèi)型與預(yù)期類(lèi)型不一致，JavaScript會(huì)將操作符兩邊的值轉(zhuǎn)換成預(yù)期的類(lèi)型后再進(jìn)行操作。預(yù)期值類(lèi)型為string時(shí)，JavaScript會(huì)將值轉(zhuǎn)換為string；預(yù)期值類(lèi)型為number時(shí)，JavaScript會(huì)將值轉(zhuǎn)換為number (如果無(wú)法轉(zhuǎn)換為數(shù)值，則返回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
值類(lèi)型轉(zhuǎn)換規(guī)則
JavaScript中的值轉(zhuǎn)換規(guī)則可以參考“JavaScript – The Definitive Guide”一書(shū)中的Table 3-2. JavaScript type conversions。比較值得注意的一些地方是：
1.undefined轉(zhuǎn)換成number后結(jié)果為NaN。
2.null轉(zhuǎn)換成number后結(jié)果為0。
3.空字符串”"轉(zhuǎn)換成number后結(jié)果為0。
4.-0轉(zhuǎn)換成string后結(jié)果為”0″。
5.空數(shù)組[]轉(zhuǎn)換成number后結(jié)果為0。
6.僅有一個(gè)number成員的數(shù)組(如[9])轉(zhuǎn)換成number后結(jié)果為該numer值(9)。
當(dāng)JavaScript將string轉(zhuǎn)換成number時(shí)，有兩個(gè)比較有趣的規(guī)則：
1.JavaScript會(huì)將字符串開(kāi)頭和結(jié)尾處的空白字符刪除后再進(jìn)行轉(zhuǎn)換，因此像” 42 “這樣的字符串可以順利的被轉(zhuǎn)換成數(shù)字42。
2.刪除開(kāi)頭和結(jié)尾處的空白字符后，如果字符串中依然包含非數(shù)字字符，那么該字符串會(huì)被轉(zhuǎn)換成NaN。比如：”3 m”就會(huì)被轉(zhuǎn)換成NaN。
實(shí)例：
console.log(10 * " 3 ");//30
console.log(10 * "3 m");//NaN, "3 m" will be converted to NaN
值類(lèi)型轉(zhuǎn)換與比較
在JavaScript中，等于操作符(==)的使用會(huì)涉及到值類(lèi)型轉(zhuǎn)換：如果==操作符兩邊的值類(lèi)型不一致，那么JS會(huì)將它們轉(zhuǎn)換成一致的類(lèi)型后再加以判斷。需要小心的是，兩個(gè)不同類(lèi)型的值，經(jīng)過(guò)類(lèi)型轉(zhuǎn)換后也許可以等價(jià)，但這并不意味著對(duì)它們使用==操作符的結(jié)果就一定為true。一個(gè)簡(jiǎn)單的例子是undefined和false：將undefined轉(zhuǎn)換成boolean類(lèi)型后結(jié)果剛好為false，但事實(shí)上undefined==false的結(jié)果卻為false。
顯式類(lèi)型轉(zhuǎn)換
使用JavaScript的類(lèi)型自動(dòng)轉(zhuǎn)換非常便捷，但同時(shí)也很容易帶來(lái)諸如代碼可維護(hù)性等問(wèn)題。為了使程序代碼更加清晰、減少歧義，有時(shí)會(huì)在JS程序中使用顯式類(lèi)型轉(zhuǎn)換：
Number("3")//3
String(false)//"false"
Boolean([])//true
大多數(shù)情況下，顯式類(lèi)型轉(zhuǎn)換的結(jié)果與JS自動(dòng)類(lèi)型轉(zhuǎn)換的結(jié)果是一致的；但存在1個(gè)特例：當(dāng)將null或者undefined自動(dòng)轉(zhuǎn)換成Object時(shí)，JS將拋出TypeError錯(cuò)誤；但當(dāng)顯式地將null或者undefined轉(zhuǎn)換成Object時(shí)，JS將返回一個(gè)空的對(duì)象：
console.log(Object(undefined));//empty object
console.log(Object(null));//empty object
同時(shí)，如果顯式轉(zhuǎn)換所指定的類(lèi)型與JS自動(dòng)轉(zhuǎn)換所指定的類(lèi)型不一樣，那么，得到的結(jié)果也不一樣。比如之前所提及的undefined==false結(jié)果為false；如果顯式指定轉(zhuǎn)換類(lèi)型為Boolean，那么得到的結(jié)果就為true了：
console.log(undefined == false);//false
console.log(Boolean(undefined) == Boolean(false));//true
對(duì)類(lèi)型自動(dòng)轉(zhuǎn)換的使用
在JS中，可以使用值類(lèi)型的自動(dòng)轉(zhuǎn)換，通過(guò)操作符來(lái)達(dá)到和顯式轉(zhuǎn)換一樣的效果，比如：
console.log(false + "");//"false"
console.log(+false);//0
console.log(!!3);//true
- JavaScript中值類(lèi)型和引用類(lèi)型的區(qū)別
- JS正則表達(dá)式匹配檢測(cè)各種數(shù)值類(lèi)型(數(shù)字驗(yàn)證)
- JavaScript基本數(shù)據(jù)類(lèi)型及值類(lèi)型和引用類(lèi)型
- javascript限制文本框輸入值類(lèi)型的方法
- JavaScript中的值類(lèi)型詳細(xì)介紹
- js中的值類(lèi)型和引用類(lèi)型小結(jié) 文字說(shuō)明與實(shí)例
- JavaScript中值類(lèi)型與引用類(lèi)型實(shí)例說(shuō)明
- JavaScript中如何判斷一個(gè)值的類(lèi)型
相關(guān)文章
微信小程序中如何計(jì)算距離某個(gè)節(jié)日還有多少天
這篇文章主要給大家介紹了關(guān)于微信小程序中如何計(jì)算距離某個(gè)節(jié)日還有多少天的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
javascript設(shè)計(jì)模式 – 職責(zé)鏈模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 職責(zé)鏈模式,結(jié)合實(shí)例形式分析了javascript職責(zé)鏈模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
js實(shí)現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動(dòng)廣告條代碼
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動(dòng)廣告條代碼,涉及javascript基于鼠標(biāo)事件操作頁(yè)面元素樣式的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)九宮格布局效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
微信小程序?qū)崿F(xiàn)簡(jiǎn)單計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
JavaScript常用數(shù)組操作方法,包含ES6方法
這篇文章主要介紹了JavaScript常用數(shù)組操作方法，包含ES6方法,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒借鑒價(jià)值，需要的朋友可以參考下2018-09-09
微信小程序調(diào)用PHP后臺(tái)接口 解析純html文本
這篇文章主要為大家詳細(xì)介紹了微信小程序調(diào)用PHP后臺(tái)接口，解析純html文本的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript實(shí)現(xiàn)一鍵復(fù)制文本功能的示例代碼
這篇文章主要為大家介紹兩種javascript實(shí)現(xiàn)文本復(fù)制（將文本寫(xiě)入剪貼板）的方法，文中的示例代碼講解詳細(xì)，大家可以根據(jù)需求特點(diǎn)選用2023-03-03
Chart.js與ECharts.js圖表使用過(guò)程組件對(duì)比
chartjs只能基于canvas,雖然只有英文文檔,但定制化程度更高,社區(qū)成熟,功能就更加穩(wěn)定,ECharts.js可以基于svg或者canvas去渲染,有融合主流前端框架的社區(qū)庫(kù),另外ECharts.js還支持3d效果的圖表,相當(dāng)炫酷,國(guó)內(nèi)開(kāi)發(fā)者大多數(shù)使用這個(gè),有中文文檔2023-10-10
Script標(biāo)簽與訪問(wèn)HTML頁(yè)面詳解
本篇文章主要是對(duì)Script標(biāo)簽與訪問(wèn)HTML頁(yè)面進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01