詳解JavaScript中的強制類型轉(zhuǎn)換
avaScript 原語
JavaScript 建立在一系列基本單元之上。你應(yīng)該對其中的一些已經(jīng)很熟悉了,比如字符串和數(shù)字:
var greet = "Hello"; var year = 89;
字符串和數(shù)字是該語言所謂“原語”的一部分。完整清單是:
- String
- Number
- Boolean
- Null
- Undefined
- Object
- Symbol (ES6中添加,此處不予介紹)
布爾值用來表示可能是真或假的值。 null 是故意不去賦值,它通常被分配給一個變量,用于表示綁定完畢,稍后將填充有意義的內(nèi)容。
var maybe = null;
然后才是 undefined,這意味著變量仍然沒有被附加上:
var name; console.log(name) undefined
null 和 undefined 看起來非常相似,但它們是兩個截然不同的實體,很多開發(fā)人員仍然不確定應(yīng)該使用哪個。
如果要判斷 JavaScript 實例的類型,可以用 typeof 運算符。讓我們用字符串嘗試一下:
typeof "alex" > "string"
還有數(shù)字:
typeof 9 > "number"
用于布爾值:
typeof false > "boolean"
undefined:
typeof undefined > "undefined"
還有 null:
typeof null > "object"
結(jié)果令人驚訝! null 看起來像一個對象,但實際上它是 JavaScript 中的一個歷史性錯誤,自語言誕生就躺在那里了。 由于這些問題,JavaScript 一直聲名狼借。但這僅僅是個開始。
陌生的事情
在 JavaScript 中,在兩種類型之間進行轉(zhuǎn)換時有一些奇怪的規(guī)則。讓我給你一些背景信息。先用 Python 舉一個例子。 在 Python 中執(zhí)行以下指令:
'hello' + 89
會給你一個明確的錯誤:
TypeError: can only concatenate str (**not** "int") to str
而在 JavaScript 中,只有天空才是你的極限:
'hello' + 89
事實上給出:
"hello89"
如果我們嘗試向字符串添加數(shù)組,看起來會更加奇怪:
'hello' + []
將會得到
'hello'
還有
'hello' + [89]
會給你一個驚喜:
"hello89"
看起來這種轉(zhuǎn)換背后存在某種邏輯。它甚至適用于存在更多元素的 array :
'hello' + [89, 150.156, 'mike']
得到:
"hello89,150.156,mike"
這兩行 JavaScript 足以讓 Java 程序員逃離。但是這種行為在 JavaScript 中 100% 是又意義的。因此這種隱式轉(zhuǎn)換,也稱為強制類型轉(zhuǎn)換是非常值得探索的。
當(dāng)一個數(shù)字變成一個字符串
一些編程語言有一個叫做類型轉(zhuǎn)換的概念,這意味著:如果我想把一個數(shù)字或?qū)嵗D(zhuǎn)換為另一種類型,那么我必須使顯式轉(zhuǎn)換。它也適用于 JavaScript。請看以下示例:
var greet = "Hello"; var year = 89;
如果我想明確的進行轉(zhuǎn)換,可以在代碼中表明意圖:
var greet = "Hello"; var year = 89; var yearString = year.toString()
要么這樣做:
var greet = "Hello"; var year = 89; var yearString = String(year)
然后我可以連接兩個變量:
greet + yearString;
但是在 JavaScript 中有一種被稱為隱式轉(zhuǎn)換的微妙機制,由 JavaScript 引擎提供。該語言不會阻止我們對數(shù)字和字符串進行加法操作:
'hello' + 89
會得到:
"hello89"
但是這種轉(zhuǎn)換背后的邏輯是什么?你可能會驚訝地發(fā)現(xiàn) JavaScript 中的加法運算符 + 會自動將兩個操作數(shù)中的任何一個都轉(zhuǎn)換為字符串,如果其中至少有一個是字符串的話!
你會發(fā)現(xiàn)更令人驚訝的是,這條規(guī)則在ECMAScript規(guī)范中一脈相承。 第11.6.1節(jié) 定義了加法運算符的行為,我在這里為你做了總結(jié):
如果 x 是 String 或 y 是String,則返回 ToString(x),然后返回ToString(y)
這個花招只適用于數(shù)字嗎?并不是。 數(shù)組和對象也會受到相同的轉(zhuǎn)換:
'hello' + [89, 150.156, 'mike']
會得到:
"hello89,150.156,mike"
那么下面的代碼會得到怎樣的結(jié)果:
'hello' + { name: "Jacopo" }
要找到答案,你可以通過將對象轉(zhuǎn)換為字符串來進行快速測試:
String({ name: "Jacopo" })
將會得到:
"[object Object]"
所以我有一種感覺:
'hello' + { name: "Jacopo" }
會得到:
"hello[object Object]"
打住!這又是什么?
JavaScript 中 [object Object] 的含義是什么?
“[object Object]” 是最常見的 JavaScript “怪癖”之一。
幾乎每個 JavaScript 實例都有一個名為 toString() 的方法,有些方法是由 Object.prototype.toString 提供的。
某些類型(如數(shù)組)實現(xiàn)了 toString() 的自定義版本,以便在調(diào)用方法時將值轉(zhuǎn)換為字符串。例如 Array.prototype.toString 會覆蓋 Object.toString()(也稱為 method shadowing)。
但是當(dāng)你在普通的 JavaScript 對象上調(diào)用 toString() 時,引擎會給出“[object Object]”,因為 Object.toString() 的默認(rèn)行為是由實體類型(在這種情況下為Object)返回字符串 object 。
現(xiàn)在讓我們把注意力集中在 JavaScript 比較運算符上,它們與算術(shù)運算符一樣奇怪。
等于還是不等于?
JavaScript 中有兩個主要的比較運算符。
第一個我們稱之為“弱比較”。這是抽象比較運算符(雙等號):==。
另一個是“強比較”,可以通過三等號進行識別:=== 也稱為嚴(yán)格比較運算符。它們兩者的行為方式完全不同。
來看一些例子。首先,如果我們將兩個字符串與兩個運算符進行比較,我們得到相同的結(jié)果
"hello" == "hello"
> true
"hello" === "hello"
> true
看上去一切都還好。
現(xiàn)在嘗試比較兩種不同的類型,數(shù)字和字符串。首先是“強比較”:
"1" === 1 false
這說得通!字符串“1”與數(shù)字1是不同的。但是“弱比較”會發(fā)生什么?
"1" == 1 true
居然是true!它沒有任何意義,除非這種行為與我們之前看到的隱式轉(zhuǎn)換有關(guān)。
如果適用相同的規(guī)則怎么辦?沒錯! ECMAScript spec 再次罷工。結(jié)果抽象比較運算符在比較它們之前在類型之間進行自動轉(zhuǎn)換。這是規(guī)范的摘要:
比較 x == y 執(zhí)行如下:
如果 x 是 String 且 y 是Number,則返回比較結(jié)果 ToNumber(x)== y
規(guī)范說:如果第一個操作數(shù)是一個字符串,第二個操作數(shù)是一個數(shù)字,那么將第一個操作數(shù)轉(zhuǎn)換為數(shù)字。有趣。
JavaScript 規(guī)范充滿了這個瘋狂的規(guī)則,我強烈鼓勵大家對它深入挖掘。
在此期間除非你有充分的理由否則在 JavaScript 代碼中避免使用抽象比較運算符。你以后會感謝自己的。
那么“強勢比較”怎么樣?規(guī)范中的說 嚴(yán)格相等比較在把值與三等 === 進行比較之前沒有進行自動轉(zhuǎn)換。在代碼中使用嚴(yán)格相等比較可以避免愚蠢的 bug。
總結(jié)
JavaScript 中有七個構(gòu)建塊,即 String,Number,Boolean,Null,Undefined,Object 和 Symbol。這些類型被稱為基元。
JavaScript 開發(fā)人員可以使用算術(shù)和比較運算符來操作這些類型。但是我們要特別注意加法運算符 + 和抽象比較運算符 ==,它本質(zhì)上傾向于在類型之間進行轉(zhuǎn)換。
以上所述是小編給大家介紹的JavaScript中的強制類型轉(zhuǎn)換詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
原生js操作checkbox用document.getElementById實現(xiàn)
js操作checkbox本人建議用document.getElementById(checkbox_id).checked不推薦使用jquery操作checkbox,感興趣的朋友不要錯過2013-10-10淺談layer的Icon樣式以及一些常用的layer窗口使用方法
今天小編就為大家分享一篇淺談layer的Icon樣式以及一些常用的layer窗口使用方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript實現(xiàn)的反序列化json字符串操作示例
這篇文章主要介紹了JavaScript實現(xiàn)的反序列化json字符串操作,結(jié)合實例形式分析了eval與JSON.parse兩種反序列化json字符串的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07webpack使用Symbol.toStringTag(Symbol.toStringTag用法)
Symbol.toStringTag是一個內(nèi)置 symbol,它通常作為對象的屬性鍵使用,對應(yīng)的屬性值應(yīng)該為字符串類型,這個字符串用來表示該對象的自定義類型標(biāo)簽,這篇文章主要介紹了webpack使用Symbol.toStringTag(Symbol.toStringTag用法),需要的朋友可以參考下2024-02-02