JavaScript強制類型轉(zhuǎn)換(隱式轉(zhuǎn)換)示例代碼
一、核心轉(zhuǎn)換規(guī)則
轉(zhuǎn)數(shù)字(Number):
null→0undefined→NaNtrue→1,false→0字符串:空串
""→0,非數(shù)字字符串(如"abc")→NaN對象:先調(diào)用
valueOf()或toString()得到原始值,再轉(zhuǎn)換
轉(zhuǎn)字符串(String):
數(shù)組 → 逗號分隔的字符串(如
[1,2]→"1,2")對象 →
"[object Object]"null→"null",undefined→"undefined"
轉(zhuǎn)布爾值(Boolean):
Falsy 值(自動轉(zhuǎn)
false):0、""、null、undefined、NaN、falseTruthy 值(自動轉(zhuǎn)
true):其他所有值(包括[]、{}、"0")
二、常見隱式轉(zhuǎn)換場景
1. 算術(shù)運算符(+ - * /)
+ 運算符:
若任一操作數(shù)為字符串,執(zhí)行字符串拼接:
"3" + 4; // "34"(數(shù)字轉(zhuǎn)字符串) [] + {}; // "[object Object]"([] 轉(zhuǎn) "",{} 轉(zhuǎn) "[object Object]")否則嘗試轉(zhuǎn)數(shù)字:
true + 1; // 2(true → 1) null + 1; // 1(null → 0)
其他算術(shù)運算符(
-*/):強制轉(zhuǎn)數(shù)字:"5" - 2; // 3 "10" / "2"; // 5 "abc" - 1; // NaN
2. 比較運算符( != > <)
==的寬松相等(按優(yōu)先級轉(zhuǎn)換類型):1 == "1"; // true(字符串轉(zhuǎn)數(shù)字) true == 1; // true(布爾轉(zhuǎn)數(shù)字) [] == 0; // true([] → "" → 0) [null] == 0; // true([null] → "" → 0) {} == "[object Object]"; // true(對象轉(zhuǎn)字符串)特殊規(guī)則:
null == undefined為true(不轉(zhuǎn)換)NaN與任何值(包括自身)比較均為false
> < 比較:優(yōu)先轉(zhuǎn)數(shù)字:
"10" > 2; // true("10" → 10) "abc" > 1; // false("abc" → NaN,比較返回 false)
3. 邏輯運算符(if && ||)
條件判斷:自動轉(zhuǎn)布爾值:
if ("hello") { ... } // true(非空字符串) if (0) { ... } // false|| 和 &&:返回原值(非布爾值):
"foo" || "bar"; // "foo"(truthy 返回第一個值) 0 || "default"; // "default"(falsy 返回第二個值)
4. 對象參與的轉(zhuǎn)換
對象先調(diào)用
valueOf()(默認(rèn)返回對象自身),再調(diào)用toString():[] + 1; // "1"([] → "" → 字符串拼接) {} + []; // 0({} 被解析為空代碼塊,實際計算 +[] → 0)
三、避免陷阱的實踐建議
使用 === 和 !==:嚴(yán)格相等避免隱式轉(zhuǎn)換:
"1" === 1; // false undefined === null; // false
顯式轉(zhuǎn)換:主動控制類型:
Number("123"); // 123(顯式轉(zhuǎn)數(shù)字) String(123); // "123"(顯式轉(zhuǎn)字符串) Boolean([]); // true注意特殊值:
isNaN(+"abc"); // true(檢測 NaN) Object.is(NaN, NaN); // true(ES6 精準(zhǔn)比較)
經(jīng)典面試題
console.log([] == ![]); // true
// 解析:
// 1. ![] → false([] 是 truthy,取反為 false)
// 2. [] == false → [] == 0 → "" == 0 → 0 == 0 → true
console.log({} + []); // "[object Object]"
// 解析:{} 和 [] 均轉(zhuǎn)字符串后拼接
如何是 a==1 && a==2 &&a==3為true
let a = {
i:1,
// valueOf:function(){
// return this.i++;
// }
toString:function(){
return this.i++;
}
}
if(a ==1 && a == 2 && a == 3){
console.log('您好!');
}以下寫法會報錯
let obj = {
name:"Rahul",
valueOf:function(){
return this;
},
toString:function(){
return this;
}
}
console.log(1 + obj);總結(jié)
到此這篇關(guān)于JavaScript強制類型轉(zhuǎn)換(隱式轉(zhuǎn)換)的文章就介紹到這了,更多相關(guān)js強制類型轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實現(xiàn)元素滾動條到達(dá)一定位置循環(huán)追加內(nèi)容
下面小編就為大家分享一篇JavaScript實現(xiàn)元素滾動條到達(dá)一定位置循環(huán)追加內(nèi)容,具有很好的參考價值,希望對大家有所幫助2017-12-12
談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記8)
這篇文章主要介紹了談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記8)的相關(guān)資料,需要的朋友可以參考下2015-12-12
Bootstrap php制作動態(tài)分頁標(biāo)簽
這篇文章主要為大家詳細(xì)介紹了Bootstrap php制作動態(tài)分頁標(biāo)簽的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12

