為什么要學習類型轉換

我們都知道，JS是弱類型語言，變量的類型是可以改變的，在es6時，我們的數(shù)據(jù)類型可以說成7種也可以是8種，而在es6之前，我們只有6種類型，即String,Number,Boolean,Undefined,Null和Object，雖然類型不多，但是我們得弄明白轉換后變量的確切類型和情況，所以這是我們需要學習的。今天我們只討論es6之前的簡單數(shù)據(jù)類型的顯示轉換String,Number,Boolean這3種。

這篇文章很大一部分參考的是MDN中的文檔，MDN是一個非常全面且權威的資源庫，適合從初學者到高級開發(fā)者的各個層次的Web開發(fā)者：MDN Web Docs

Boolean

// 基本數(shù)據(jù)類型間的顯示類型轉換之Boolean
console.log(Boolean()); // 什么都不傳入默認值為 false

console.log(Boolean(false));
console.log(Boolean(true));
console.log(Boolean(undefined)); // false
console.log(Boolean(null)); // false
console.log(Boolean(+0),'+0'); // false
console.log(Boolean(-0),'-0'); // false
console.log(Boolean(NaN),'NaN'); // false 
console.log(Boolean(''),'空字符串'); // false

首先引入一個概念：假值：假值（falsy values）是指那些在布爾上下文中被自動轉換為 false 的值。當這些值出現(xiàn)在條件表達式中（如 if 語句、循環(huán)的條件部分等），它們會被解釋為 false，從而影響程序的執(zhí)行流程。

• 當在什么都不傳入時默認值為false
• undefined:是一個假值，表示未定義或者不存在的值。
• null ：表示空值或沒有對象，也是假值之一。
• +0和-0也都是假值，雖然都為0，但卻是兩個不同的值。

console.log(1 / + 0) // Infinity 正無窮大
console.log(1 / - 0) // -Infinity 負無窮大
console.log(Object.is(5, 5)); // 比較兩者是否相等 true
console.log(Object.is(+0, -0)); // false

NaN：Not a number表示一個無效或者無法表示的數(shù)值結果，同樣是假值。

console.log(2 * "a", 2 + "a"); // NaN 2a
console.log(typeof NaN); // number
console.log(parseInt("abc")); // 將字符串解析為數(shù)字 
console.log(parseInt("12abc"));
console.log(NaN == NaN); // 不代表確切值 
// 不能通過 ===或者== 去判斷是否為NaN 所以要使用 isNaN 
console.log(isNaN(NaN)), isNaN(parseInt("abc")) // false true

字符串a(chǎn)不能有效的轉化成一個數(shù)字，所以會返回NaN，而+,使用的是加法運算符（+）。加法運算符在處理一個數(shù)字和一個字符串時有特殊的行為：它不會嘗試將字符串轉換為數(shù)字，而是將數(shù)字轉換為字符串，并將兩者連接（拼接）起來。因此，2 + "a" 的結果是字符串 "2a"。

isNaN()是Number.isNaN()上的靜態(tài)方法，用于判斷一個值是否為NaN,NaN不能等于它自己。

parseInt

parseInt 是 JavaScript 中的一個全局函數(shù)，用于解析一個字符串并返回一個整數(shù)。它接受兩個參數(shù)：

要解析的字符串 (string)：這是你想要轉換為整數(shù)的值。

進制（可選）  (radix)：這是一個介于 2 到 36 之間的整數(shù)，表示你想要解析的數(shù)字系統(tǒng)的基數(shù)。例如，2 表示二進制，8 表示八進制，10 表示十進制，16 表示十六進制。如果不提供此參數(shù)，parseInt 會假設不同的默認值，這取決于字符串的前綴：

• 如果字符串以 "0x" 或 "0X" 開頭，parseInt 會將其視為十六進制數(shù)。
• 如果字符串以 "0" 開頭，parseInt 在舊版瀏覽器中可能會將其視為八進制數(shù)，但根據(jù) ES5 標準，它現(xiàn)在被視為十進制數(shù)。
• 否則，parseInt 會嘗試將字符串解析為十進制數(shù)。

parseInt 函數(shù)從字符串的開始解析字符，直到遇到一個無法被解析為數(shù)字的字符或字符串結束。所有在合法數(shù)字之后的字符都會被忽略。如果第一個字符不能被轉換為數(shù)字，則 parseInt 返回 NaN。

" "：任何類型的空字符串（即不包含任何字符的字符串）都是假值。

除了上述所說的假值，其余所有在布爾上下文中都為真值，為true。

Number

// 基本數(shù)據(jù)類型間的顯示類型轉換之Number
console.log(Number()); // 什么都不傳入默認值為 0
console.log(Number(undefined)); // NaN undefined 數(shù)值上下文中沒有轉成一個特定數(shù)字的含義  
console.log(Number(null)); // 0 在數(shù)字上下文中有轉化成0的可能
console.log(Number(false)); // 0 
console.log(Number(true)); // 1 
console.log(Number("123")); // 123 
console.log(Number("-123")); // -123 
console.log(Number("0x11")); // 16進制
console.log(Number(""), Number(" ")); // 0
console.log(Number("100a")); // NaN 

var a = 1.234;
console.log(typeof a, a.toFixed(2));// 1.23
var b = new Number(a);
console.log(typeof b); // object
console.log(b.toFixed(2)); // 1.23 
//Number.prototype.toFixed()

這是MDN文檔中截取的部分，意思是：如果提供了 value，則返回由 ToNumber(value) 計算出的數(shù)值（不是一個數(shù)字對象），否則返回 +0。

ToNumber(value) ：這是 ECMAScript 規(guī)范中的一個抽象操作，用于將不同類型的值轉換為數(shù)值。它定義了如何將字符串、布爾值、對象等非數(shù)字類型轉換為相應的數(shù)字表示。

對于undefined指為NaN：因為undefined的定義，其不存在可能變?yōu)橐粋€特定的數(shù)字，它沒有這個趨勢或者含義。

對于null指為NaN:它有值，只是為空，所以它在數(shù)字上下文中可以變成一個數(shù)字類型，所以在這里為0。

總結一下，在Number類型轉換中，除了正常轉換成數(shù)字類型的情況，就只有1和0和NaN。

String

// 基本數(shù)據(jù)類型間的顯示類型轉換之String
console.log(String()); // 默認為空字符串
console.log(String(undefined), typeof String(undefined)); // "undefined" string
console.log(String(null), typeof String(null)); // "null" string
console.log(String(+0), String(-0)); // "0"
console.log(String(NaN)); // NaN 
console.log(String(1)); // 1

在這里，將其他的類型作為要轉變的值填入，都會被轉化成與其名稱相對應的字符串，而不是值。

parseInt more

最后我們再擴展一下parseInt()

console.log([1,2,3].map(parseInt))
console.log([1,2,3].map((v, index, item) => {
    console.log(v, index, item);
    return parseInt(v, index) // [ 1, NaN, NaN ]
    return parseInt(v) // [ 1, 2, 3 ]
})) 

在這里我們運用了map來返回一個新的數(shù)組，而map中可以傳入三個參數(shù)，它默認傳入了3個參數(shù)分別是元素的值、下標、整個數(shù)組。而parseInt中可以傳入兩個值，在上文中我們講到，第二個位置傳入的是多少進制，所以如果在這里向parseInt中傳入下標的話，它的效果并不是我們所想的那樣，因為值是1，進制為0，也就是默認10進制，所以第一個值為1，但是因為沒有1進制，而二進制的格式也不可能擁有3。在不傳入下標僅僅傳入值后，將會得到我們想要的正常輸出結果，或者顯示指定將要轉化為10進制。

到此這篇關于面試中?？嫉腏avaScript中簡單類型數(shù)據(jù)轉換盤點的文章就介紹到這了,更多相關JavaScript類型數(shù)據(jù)轉換內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論