【知識點】數據類型的轉換(隱式和顯式)

一、前言

今天一個學生問了我一個問題,噢不對,是一堆問題,看了幾遍聊天記錄突然不知道該從哪里回答。
干脆按照我的感覺一點一點講吧~
請看不懂的童鞋們多看幾遍

迷茫

二、顯式轉換(強制轉換)

關于強制轉換,我在之前的文章已經講過一部分了。
一般常用的強制轉有以下幾種

1) 數值轉換函數

parseIntparseFloat,可以強制轉換其他類型為整數或浮點數,如果遇到轉換不了的,就直接轉換成NaN
parseInt:

   // parseInt()方法,官方解釋,將字符串轉換成一個數字整型類型
   parseInt("0.23")//Number  0
   parseInt("42.454")//Number  42
   parseInt("42.45abc4")//Number  42
   parseInt("4ab2")//Number  4
   parseInt("au3.14")//Number  NaN
   
   //看到這個有人懵逼了,不是說好的轉換字符串變成數字的么,怎么會有數組
   //其實先將["1","21"]轉換成字符串 “1,21”,然后parseInt  就得到 1
   //其他的類型就不舉例子,可以看之前的文章,數據類型的轉換
   parseInt(["1","21"])//Number  1 

parseFloat:

// parseFloat()方法,官方解釋,將字符串轉換成一個數字浮點類型
   parseFloat("0.23")//Number  0.23
   parseFloat("42.454")//Number  42.545
   parseFloat("42.45abc4")//Number  42.45
   parseFloat("42.00")//Number  42
   parseFloat("4ab2")//Number  4
   parseFloat("au3.14")//Number  NaN
   parseFloat(["1","21"])//Number  1

parseFloat和parseInt當然還有其他用法,比如進制轉換,和本文無關,不講~

2) 強制類型轉換

就是使用Number()String()Boolean()函數將其他類型強制轉換為數字、字符串、布爾值。
在之前的課程已經都講解過了。這里給大家放鏈接,可以自行去看。
http://www.lxweimin.com/p/3c9bc54948c8

3) toString()
  • 返回相應值的字符串表現,MDN的說法是:返回一個表示該對象的字符串
  • 重點來了:每個對象都有一個 toString() 方法,當對象被表示為文本值時或者當以期望字符串的方式引用對象時,該方法被自動調用
  • 對于對象{}、Math等,toString() 返回 “[object type]”,其中type是對象類型(比如[object object]、[object Math]、[object Null]等等)。如果x不是對象,toString() 返回x應有的文本值(不是單純的加引號,比如仔細看一下數組)。
   console.log((34).toString());//'34'
   console.log("abc".toString());//'abc'
   console.log({}.toString());//[object Object]
   console.log({"name":"lily"}.toString());//[object Object]
   console.log([].toString());//''
   console.log(["a","b",1].toString());//'a,b,1'
   console.log(["a","b",{name:"lily"}].toString());//'a,b,[object object]'
   console.log(["a","b",Math].toString());//'a,b,[object Math]'
   console.log(["a","b",undefined].toString());//'a,b,'
   console.log(["a","b",null].toString());//'a,b,'   看,其實并不是單純的加引號,而是將其文本值取了出來
   console.log(true.toString());//'a,b,'
三、toString()和String()的區別
  • toString()方法;數值、字符串、對象、布爾;都有toString方法;這個方法唯一能做的就是返回相應的字符串;其中null和undefined沒有toString()方法;
  • String()屬于強制轉換, null轉換的結果為null;undefined轉換的結果為undefined
四、valueOf()
  • valueOf() 方法返回指定對象的原始值 (數值、字符串和布爾值)
  • valueOf() 方法通常由 JavaScript 在后臺自動調用,并不顯式地出現在代碼中
   console.log("--------")
   console.log((34).valueOf());// number 34
   console.log("abc".valueOf());// string 'abc'
   // console.log(null.valueOf());//null沒有該方法
   // console.log(undefined.valueOf());undefined沒有該方法
   console.log([].valueOf());//[]  數組類型
   console.log(true.valueOf());//true  布爾類型
   console.log([1,2,"3",{name:"lily"}].valueOf());//原數組
   console.log({}.valueOf());//{} 對象類型
   console.log({name:"lily"}.valueOf());//原對象

可是說了半天,到底是再說什么????
剛才是基礎,以下是重點


五、toString()和valueOf()

toString()和valueOf()這兩個方法基本是不會主動的書寫再代碼中,而是JS 在運算的過程中自己調用

  • 也就是說,當我們使用一個值顯示或者計算的時候,他會自己偷偷調用toString或valueOf方法。也就是我們經常看見到隱式轉換。

那既然剛才說了,它會自動偷偷調用toString或valueOf方法,我們何不自己對對象書寫一個toString或valueOf方法,覆蓋它原來的方法來測試呢?

//定義一個對象a
var a={}
給a寫一個toString方法,覆蓋它自帶的toString方法
   a.toString=function () {
       console.log("toString方法被調用");
       return 10;
   }
給a寫一個valueOf方法,覆蓋它自帶的valueOf方法
   a.valueOf=function () {
       console.log("valueOf方法被調用");
       return 20;
}

然后只要它偷偷調用這兩個方法,就會有打印。
我們來試試吧~

   alert(a);//彈出10  打印toString方法被調用
   a+1;//打印valueOf方法被調用
   a+"";//打印valueOf方法被調用
   String(a);//打印toString方法被調用
   Number(a);//打印valueOf方法被調用
   Boolean(a)//打印valueOf方法被調用
   a>"5";//打印valueOf方法被調用

所以你發現了嗎?
如果要求的是原始值那么就會調用valueOf,如果要求的是字符串那么就會調用toString。

  • alert()彈出的是字符串,所以調用toString,所以你發現alert一個對象,都是[object object]等
  • 加減乘除運算都要先使用原始值,所以要調用了valueOf的方法。
六、總結
  • 基本上所有的JavaScript數據類型都有valueOf(),toString()方法,null除外,這兩個方法解決了JavaScript值運算和顯示的問題
  • valueOf()會把數據類型轉換成原始類型,也就是說原來是什么類型,轉換后還是什么類型,日期類型除外
  • toString()會把數據類型轉換成string類型,也就是說不管原來是什么類型,轉換后一律是string類型

這兩個方法有意思的地方在于什么時候使用,總結如下:
1、valueOf()偏向于運算(加減乘除),toString()偏向于顯示(alert)
2、強轉字符串的情況下,優先調用toString()方法;強轉數字的情況下優先調用valueOf()
4、正常情況下,優先調用toString()
5、在有運算操作符的情況下valueOf()的優先級高于toString(),這里需要注意的是當調用valueOf()方法無法運算后還是會再調用toString()方法


以下邊的案例結束今天的內容吧

   //兩個{}都參加運算,調用valueOf方法得到原始值
   //但是原始值還是不能參加運算,所以又調用toString方法得到'[object object]'
   console.log({}+{})//'[obeject object][obeject object]'

   // Math參加運算,調用valueof方法得到原始值
   //但是原始值不能運算,要轉換成String,所以又調用toString得到[object math]
   //然后進行字符串拼接
   console.log(Math+3)//‘[object math]3’


   console.log({}+[])//'[obeject object]' []的valueOf后調用toString為空字符串
   console.log({}+"")//'[obeject object]'
   console.log([]+"")//''   空字符串
   console.log([]+3)//"3"

寫的很倉促,有時間捋順了會再次修改~
如有錯誤請指出~


拜拜,晚安
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,836評論 6 540
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,275評論 3 428
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,904評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,633評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,368評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,736評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,740評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,919評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,481評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,235評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,427評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,968評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,656評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,055評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,348評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,160評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,380評論 2 379