什么是數據類型轉換?
使用表單、prompt 獲取過來的數據默認類型是字符串類型的,此時就不能直接進行加減法運算,而需要轉換變量的數據類型。
通俗來說,數據類型轉換就是將一種數據類型轉換成另外一種數據類型。
通常有 3 種方式的轉換:
- 轉換為字符串類型
- 轉換成數字型
- 轉換成布爾類型
JS是弱類型語言,變量的數據類型是由變量值的數據類型決定的。
var stu;
//undrfined未定義變量的值
stu=25; // number 數字類型的值 stu="25" // string 字符串類型的值
轉換方法:
1、強制類型轉換:將一種數據類型強制轉換成另一種類型的數據,類型轉換主要是指將其他類型的數據准換成String、Number、Boolean類型的數據
2、隱式轉換方法:自動轉換,由於JS在運算過程中,自己進行轉換的操作,不需要人為的參與
一、轉換為字符串
方式 | 說明 | 案例 |
toString() | 轉換為字符串 | var num=1; alert(num.toString()); |
String() 強制轉換 | 轉換成字符串 | var num=1; alert(String(num)); |
加號拼接字符串 | 和字符串拼接的結果都是字符串 | var num=1; alert(num+'我是個字符串'); |
(一)、使用 toString( )方法
語法:被轉換對象 .toString()
注意:
1、這種調用方法只適用Number、Boolean類型的數據,Null和Undefined類型數據會報錯,並不適用。
2、控制台黑色的文本是字符串類型的,藍色的文本是數字類型的。
實例:
在這個例子中變量 num的值為數字 123;使用 toString() 方法將其轉換成 字符串並且賦值給變量 str。這樣就將數值類型轉換成字符類型。
var num = 123; console.log(num); console.log(typeof num); var str=num.toString(); console.log(str); console.log(typeof str);
這種調用方法只適用Number、Boolean類型的數據,Null和Undefined類型數據會報錯,並不適用
(二)調用 String() 函數
調用String( )函數,並將被轉換的數據作為參數傳遞給函數。
語法:String(被轉換對象)
例如:a.String(a) 表示調用String函數,將a轉換成字符串類型數據。
注意:
1、使用String()做 強制轉換的時候,對於Number、Boolean類型的數據實際上就是調用toString( )方法。
2、但是對於null和undefined,就不會調用toString( )方法,它會直接將 null 轉化為 "null" ,將 undefined 轉化為 "undefined"
實例:
var num = 123; console.log(String(num)); console.log(typeof String(num));
使用 String() 會直接將 null 轉化為 "null" ,將 undefined 轉化為 "undefined"
var num = null; console.log(String(num)); num = undefined; console.log(String(num));
(三)+ 拼接字符串 (隱式轉換)
這種方法更常用,使用+拼接轉換字符串,最簡單的方法就是 給被轉換對象 加上一個空字符串('')。
實例:
var num = 123; var str = num + ''; console.log(str); console.log(typeof str);
二、轉換為數字型(重點)
方式 | 說明 | 案例 |
parseInt(string) 函數 | 將string 類型轉換成整數數值型 | parseInt('34') |
parseFloat(string) 函數 | 將 string 類型轉換為浮點數值型 | parseFloat('34.81') |
Number() 強制轉換函數 | 將 string 類型轉化為數值型 | Number('12') |
JS 隱式轉換(- * /) | 利用算術運算隱式轉換為數值型 | '12' - 0 |
(一)parseInt() 函數轉換為數值型
parseInt( )函數可以將字符串中有效的整數內容提取出來,將字符型轉換為 數字型的;
parseInt( )函數在解析字符串的時候按照從左到右的順序
console.log(parseInt('3.12')); // 3 取整 console.log(parseInt('123aa')); // 會取到字符串中的整數部分,從左向右 console.log(parseInt('rem111px')); // NaN
(二)parseFloat() 函數轉換為數值型
parseFloat( ) 函數可以獲得有效的小數,並且將字符型轉換為數字型。
parseFloat( )函數在解析字符串的時候按照從左到右的順序,不能解析除了數字以外的文本。
console.log(parseFloat('3.14')); //3.14 console.log(parseFloat('123aa')); //去掉后面部分,只保留數字 console.log(parseFloat('rem123qq')); //NaN
注意:
1、如果對非String類型數據使用parseInt( ) 或是parseFloat( ) ,它會現將其轉化為String,然后再進行操作。
2、由於 parseInt( ) 或是parseFloat( ) 無法解析非數字類型的字符,所以輸出 NaN,但是數據類型還是變為 number 數字類型。
var a=parseFloat(true); console.log(a); console.log(typeof a); a=parseFloat(null); console.log(a); console.log(typeof a); a=parseFloat(undefined); console.log(a); console.log(typeof a);
(三)使用Number() 函數(強制轉換)
調用 Number() 函數使其他類型的數據轉換成 數字型
1、當需要轉換的字符串引號引的不是數字
例如abc,最終輸出結果就是NAN(Not A Number)不是一個數字。
var a=Number('doctor'); console.log(a);console.log(typeof a);
2、字符串→Number 轉換情況:
1、如果是純數字的字符串,直接將其轉換為數字;
2、如果字符串中有非數字內容,則轉換為NAN(Not A Number);
3、如果字符串是一個空串或是一個全部由空格組成的字符串,則轉換為0。
3、Boolean值→Number 轉換情況:
1、如果是true,轉換為1;
2、如果是false,轉換為0。
4、Null值→Number 轉換情況:
如果是null(空值),轉換為0。
5、Undefined→Number 轉換情況:
如果是undefined,轉換為NAN(Not A Number)
(四)算術運算隱式轉換
利用算術運算 (- * /)隱式轉換數據類型
var a='12'-0; console.log(a); a='12'*1; console.log(a); a='12'/1 console.log(a);
(五)實例
要求:在頁面彈出一個輸入框,輸入了出生年月之后,可以計算年齡
實現思路:
1、彈出一個輸入框(prompt),讓用戶輸入出生年份(用戶輸入)
2、將用戶輸入的值使用變量保存起來,然后用今年的年份去減去變量值,結果就是現在的年齡(程序內部處理)
3、彈出警示框(alert),將計算的結果輸出(輸出結果)
在這里 year取過來的是字符串類型的值,但是這里面用的是減法(-),隱式轉換
var year = prompt('請輸入您的出生年份'); age = 2019 - year; alert('今年 '+age+'歲了');
三、轉換為布爾類型
方式 | 說明 | 案例 |
Boolean() 函數 | 其他類型轉換成布爾值 | Boolean('true') |
注意:
- 代表 空、否定 的值都會被轉換成 false,例如 ''、0、NaN、null、undefined
- 其余的值都會被轉換成 true
方法:使用Boolean( ) 函數
var a=123;
// 調用Boolean()函數將數據類型轉化為Boolean
a=Boolean(a); console.log(a); console.log(typeof a);
數字類型→布爾,除了0和NAN其余的都是true;
字符串→布爾,除了空串(沒有內容)其余都是true;
空值→布爾,null轉換的是false;
undefined→布爾,undefined轉換的也是空值;
對象(object)也會轉換成true 。