天天看點

html中隐式轉換成數字,詳解JS中的隐式類型轉換

JS中隐式類型轉換

JS中的資料類型

JS中的資料類型分為兩大類:

1.基本資料類型:

1.String 字元串

表示一段文本,例如:人的姓名、位址等

2.Number 數值

3.Boolean 布爾值

4.Null 空值

表示“沒有對象”,即:此處不應該有值

5.Undefined 未定義

表示“缺少值”,即:此處應該有值,但還沒有定義

2.引用資料類型:

1.Object 對象

2.array 數組

3.function 函數

類型轉換主要指将其他的資料類型轉換成String、Number、Boolean這3種類型。

首先解釋一下什麼是隐式轉換,隐式轉換就是在沒有調用任何函數方法的時候,将資料的類型進行改變,進而使資料滿足運算要求,說白了就是在轉換時不給系統提示具體的顯示類型,讓其自動轉換。

同樣,相對的肯定還有一個顯式轉換,顧名思義,顯示轉換就是強制轉換,是我們可以直接對其指派的,指定将其轉換的類型。

JS中隐式轉換出現的場景

1.非數值類型資料進行算數運算

即,操作符是+、 - 、* 、/、%等時,會先将資料類型隐式轉換成數值型再運算。在這裡需要注意的是+,下面将分為兩種情況進行分析。

1.資料類型是非字元串類型時進行算數運算

var res = 1+1;

console.log(res);//2

//操作數為數值型,直接相加,不用進行類型轉換。

var res = true + false;

console.log(res);//1

//操作數為布爾值時,将會進行隐式轉換,true為1,false為0。

var res = null+1;

console.log(res);//1

//當操作數為null時進行隐式類型轉換,将null轉換成0。

var res = undefined + 1;

console.log(res);//NaN

//當操作數為undefined時,進行隐式類型轉換,将undefined轉換成NaN

//這裡需要注意的是,NaN與任何資料進行運算結果都是NaN。

同理: - 、* 、/、%等運算同樣可以将非數值資料進行隐式轉換。

2.字元串類型的+運算

當使用+操作字元在這裡插入代碼片串時,不會進行隐式轉換,此時+就相當于連接配接符

result = "123" + "456";

// 對字元串進行+操作會進行拼串操作,不會轉換成number,結果為123456

result = "123" + 4;

// 任何值和字元串相加都會轉換成字元串,再進行拼串,結果:1234

console.log(result);

var c = 123;

c = c + "";

// c+空串就被轉換成了字元串

// 這就是隐式類型轉換,由浏覽器自動完成,其實就是調用了String()函數,是一種常用的方法

console.log(typeof c);

// 輸出String

console.log(c);

// 輸出"123"

console.log("c ="+c );

// 輸出"c = 123"

對字元串使用其他幾種算數運算符也會進行隐式轉換。

2. 非布爾值進行邏輯運算

邏輯運算表達式的傳回值一定是布爾類型,對于非布爾值進行運算時,會先将其轉換成布爾值,再運算 ,并且傳回原值。

// true && true

// 與運算如果兩個值都是true則傳回後面的數

var result = 1 && 2;

console.log("result = "+result);

// result = 2

// false && true

// 與運算如果兩個值有false,則傳回靠前的false

result = 0 && 2;

result = 2 && 0;

// 上面兩個都傳回0

result = NaN && 0;

// 傳回NaN

result = 0 && NaN;

// 傳回0

// 對字元串和數值使用邏輯運算

var name = 'xiaoming';

var age = 3;

alert(name && age);//3 輸出後面的條件

alert(name || age);//xiaoming 輸出前面的條件

var age = '3';

alert(name && age);//3 同上

alert(name || age);//xiaoming

// true || true

result = 1 || 2;

// 傳回1

result = 2 || NaN;

//傳回2

注意:值得一提的是邏輯運算中,運算過程雖然将數值轉換成Boolean類型運算,但是輸出的是該資料的原值,或者是表達式的結果。

3.非數值資料的關系運算

運算規則:對于非數值進行比較時,會将其轉換成為數值然後再比較。 如果符号兩側的值都是字元串時,不會将其轉換成數值進行比較,而是會分别比較字元串的Unicode編碼

比較字元編碼是一位一位進行比較的,如果兩位一樣,則比較下一位,是以可以借用它來對英文進行排序。

console.log(1 > true);

// false,将true轉換成數值1

console.log(10 < "hello");

// false,hello轉成null

console.log("1" > "5");

// true

console.log('11' > '5');

// true,隻看前面一個1,比5小,直接輸出false

console.log('gukun'>'a');

var a = 'gukun';

var b = 'a';

console.log(a.charCodeAt());

console.log(b.charCodeAt());

//true 字元串之間比較看的其實是Unicode編碼值的大小,而不是看字元的長短

// !!!注意:再比較兩個字元串型的數字時,可能會得到不可預期的結果,是以一定要轉型(裡面有一個數字就行了)

console.log('11' > +'5');

在這裡還有一些值得注意的問題:

1.字元串與字元串在做比較的時候不會進行隐式轉換,直接以Unicode編碼進行比較,空串永遠小于其他字元串。

var res = 'aa' > []

//res = "aa" > ''

//空字元永遠小于非空字元

//res = true

2.字元串與數值進行比較時,将字元串轉換成數值型再進行比較。

console.log('1' == 1);

// true 使用==進行比較時,如果類型不同将會自動轉化成同一類型再比較

3.字元串與除數值以及字元串的基本資料類型進行比較時,會将字元串與另外一個類型轉成number類型。

console.log(true>'');

//true true轉換成1,''轉換成0

4.null是一個特殊的值,它在做比較的時候隻會與null本身以及undefined相等,因為undefined衍生于null。

console.log(null == undefined);

// true undefined衍生于null,是以二者相等結果為true

4.非布爾值進行條件運算

條件運算符也叫三元運算符

文法:條件表達式?語句1:語句2;

執行的流程:

條件運算符在執行時,首先對條件表達式進行求值,如果該值為true,則執行語句1,并傳回結果,如果該值為false,則執行語句2并傳回結果。

非布爾值在進行條件運算時會先轉換成布爾值再進行運算。

"hello"?alert(1):alert(2);//1

// hello的布爾值是true(隻有""的布爾值是false),是以執行語句1。

5.if條件句

在進行if條件判斷時,if隻能判斷Boolean值,是以會将if後的條件語句裡非布爾值隐式轉換成布爾值再進行判斷。

if(arr[]){

console.log('我最棒');

//我最棒 arr[]轉換成布爾值是true

}

總結

1.如何将其他類型資料轉化為number 類型資料?

答:

(1)顯示轉換:Number()、parseInt()、parseFloat()

(2)隐式轉換:通過算數運算符,将操作數進行轉換,任何值(除字元串外)做+、-、 *、 / 等運算時都會轉成Number。可以通過-0、 *1、 /1等将其轉換成Number。比較運算時也會将資料(字元串除外)先轉換成數值型再進行比較。

注意:在這裡的兩種方法裡字元串都是特殊的,在對字元串進行 + 運算時,會将操作數都變成字元串,再進行拼串。同樣的,對字元串進行比較時,不會轉換成數值,而是直接比較字元串的Unicode編碼值。

2.什麼資料可以運算?

答:

基本資料類型,引用資料類型要想參與運算必須先将其轉換成可以進行運算的基本資料類型string。