關于JS值的顯式類型轉換/隐式類型轉換
顯式類型轉換
Number()
當( )内需轉換的值不同時:
- 值是“123”或“3.14159”這種以數字組成的字元串時,傳回數字類型的123,3.14159
- 值是“abc”或“23a”,有字元組成的字元串,或 undefined 時,傳回數字類型的NaN
- 值是true、false、null(不是字元串)的關鍵字時,傳回1,0,0
parseInt()
: 隻能轉換成整型,從第一位開始判斷是否為數字
parseInt(value,radix)
:
-
radix 是進制,可以是按不同進制轉換,ES5規定如果省略就代表用十進制解析
當( )内需轉換的值不同時:
- 值是“123”/“3.14159”這種以數字組成的字元串時,傳回小數點前面的數字,不會四舍五入;
- 值是true、false、null、undefined、NaN(不是字元串)的關鍵字時,傳回NaN;
- 值是數字開頭的,且有字元組成的字元串如“123ab11”時,傳回字元前的數字;
- 值是以字元開頭,且有數字組成的字元串如“fff88”時,傳回NaN;
parseFloat()
隻接受一個參數,隻能使用十進制去解析
- 會把有小數點的數字字元串轉換出來
- 若想保留幾位小數,使用
方法,( )裡填需要保留幾位,此方法傳回的值會四舍五入.toFixed()
String()
轉換為字元串
- 平時更多使用 值+“” (引号)去進行字元串的轉換
-
也可以填radix 幾進制的轉換toString(value,radix)
Boolean()
- undefined | null | NaN | “” | 0 轉換的值都為 false
- 其餘都是true
隐式類型轉換
- 自增/自減
var a = '123'; a++; // 先将a隐式轉換了,Number(a)再進行自增; console.log(a);
- “+” 号拼接
var a = 'a' + 1; // 先将數字1隐式轉換了,Number(1),再進行拼接; console.log(a); // a1
- “* / -” 号 數學運算:有對象時,對象先轉換為字元串再轉換為數字進行計算
var a = "3" * 2; // 先把string隐式轉換為number Number(3) console.log(a); // 6 // 在字元串前面加上正負号,也會使得字元串轉換為Number var num = "123"; console.log(typeof(+ num)) // number 負号也是如此 不過是負的 var n = "abc"; console.log(typeof(+ n)+":" + + n ); // number:NaN 負号也是如此
- “> < >= <=” 的使用
var a = '1' > 2; // 先Number(1) -> 再與數字2作比較 console.log(a); // false // 補充: 兩個字元串的比較 var b = 'a' > 'c'; // 根據ascii碼值進行比較 console.log(b); var a1 = 2 > 1 > 3; // 注意,這裡有中間有一次轉換!! //1) 2>1 -> true //2) true->1 先隐式轉換為數字1,Number(true)再比較 //3) 1>3 -> false var a2 = 2 > 1 == 1; // 2>1 -> true true == 1 -> true console.log(a1,a1); // false true
一些浏覽器的運算 | 比較 | 轉換規律
“ == ” 相等 and “ === ” 絕對相等的區分 🤷♀️
- == 相等的比較規律/轉換規則(含隐式轉換):
-
對象 == 字元串:其中的對象會先轉換為字元串(aka:執行了對象.toString()),再比較
eg. [10] == ‘10’;// true
-
null == undefined:結果為 true(===時不等)
0 == null:結果為 false(與底層機制的轉換不同有關)
❗注意:他們倆兄弟(null和undefined),既不大于0,也不小于0,更不等于0
且 null & undefined 和其它值都不相等 (0 是有自己的記憶體空間的值,而null是沒有自己的記憶體空間的)
- NaN 和任何類型的值相比較都不相等(包括它自己)
- 剩下的兩邊不同時都是轉換為數字進行比較【對象轉數字:
】Number(對象.toString())
練習題2:[] == false; // [] -> [].toString() -> '' -> Number('') -> 0 // false -> 0 // true
![] == false; // 涉及運算符優先級: // 先進行![],再進行 == 比較 // ![] -> !true -> false // false == false // 結果 true !![] //true !!NaN //false
-
-
=== 絕對相等的比較規律/轉換規則:
兩邊的類型、值都一緻才相等,類型不同時,直接不對等,不會進行隐式轉換;項目中用它更好👏
以上兩個相等的差別,隻要掌握了隐式轉換就不難了解和區分啦~
isNaN()的判斷規則
- 先把其它類型值進行
的轉換為數字再檢測是否為非數NaN,傳回true 或 falseNumber()
- 檢測步驟總結:
--> 判斷是否為NaN --> 傳回Boolean值Number(值)
- 也就是說,我們能根據
的轉換規律即可自行判斷其傳回值:Number()
代碼輸出一下來驗證:
console.log(isNaN(123)); // false 本身就不是非數
console.log(isNaN("123")); // false 在Number("123")轉換後 不是非數
console.log(isNaN("a")); // true Number("a")後,是NaN
console.log(isNaN(null));// false Number(null)後,是0
console.log(isNaN(undefined)); // true Number(undefined)後,是NaN
typeof 😎
- 可能傳回的值
/object(null)
/boolean
/number
/string
/undefined
function
- 檢測特點
- 傳回的結果都是字元串
-
,是以兩個及以上的typeof一起使用時得出的結果都是"string"!!!因為傳回的都是字元串
-
局限性
(所有的值在記憶體中都是按照二進制存儲的,當檢測的資料類型為
時,對應的二進制編碼是000,null
會把所有二進制碼為0的資料顯示為typeof
,是以其對null的檢測結果是object
)object
-
typeof null => "object"
- typeof 不能細分對象類型(檢測普通對象或者數組對象等都是"object")
-
在 Chrome 浏覽器中,可以通過控制台顯示的字型與顔色直覺判斷出資料類型