?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別
一、??前言
在等于運(yùn)算符中,如果比較的內(nèi)容包含對(duì)象類型數(shù)據(jù),則會(huì)涉及隱式轉(zhuǎn)換,那么就會(huì)調(diào)用toString()函數(shù)和valueOf()函數(shù),下面我們將會(huì)了解到關(guān)于這兩個(gè)函數(shù)的基本概念和使用場(chǎng)景。
二、toString() 函數(shù)
toString() 函數(shù)的作用是把一個(gè)邏輯值轉(zhuǎn)換為字符串,并返回結(jié)果。
console.log((1).toString());//1 console.log((10).toString(2))//1010 console.log(("1").toString());//1 console.log((false).toString());//false console.log(({p:1}).toString());//[object,object] console.log((undefined).toString());//報(bào)錯(cuò) console.log((null).toString());//報(bào)錯(cuò) console.log((function(){}).toString());//function(){} console.log([1,2,3,4].toString());//1,2,3,4 console.log((new Date()).toString())//Fri Jul 03 2020 17:20:11 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
在JavaScript中,Object,Array,F(xiàn)unction,Date等類型都實(shí)現(xiàn)了自定義的toString()函數(shù)。
- Object 類型數(shù)據(jù)的 toString() 函數(shù)默認(rèn)的返回結(jié)果是 "[object Object]",當(dāng)我們自定義新的類時(shí),可以重寫 toString() 函數(shù),返回可讀性更高的結(jié)果。
- Array 的 toString() 函數(shù)返回值為以逗號(hào)分隔構(gòu)成的數(shù)組成員字符串。數(shù)組也是對(duì)象,那么為什么數(shù)組返回的是對(duì)應(yīng)的字符串而不是對(duì)象,其實(shí)數(shù)組覆蓋了Object.toString方法,然后將連接數(shù)組并返回一個(gè)字符串,其中包含用逗號(hào)分隔的每個(gè)數(shù)組元素(相當(dāng)于Array.join())
- Function 的 toString() 函數(shù)返回值為函數(shù)的文本定義
- Date 的 toString() 函數(shù)返回值為具有可讀性的時(shí)間字符串
三、valueOf()函數(shù)
valueOf() 函數(shù)的作用是返回最適合引用類型的原始值,如果沒有原始值,則會(huì)返回引用類型自身。
console.log((1).valueOf());//1 console.log((10).valueOf(2))//報(bào)錯(cuò) console.log(("1").valueOf());//1 console.log((false).valueOf());//false console.log(({p:1}).valueOf());//{p:1} console.log((undefined).valueOf());//報(bào)錯(cuò) console.log((null).valueOf());//報(bào)錯(cuò) console.log((function(){}).valueOf());//function(){} console.log([1,2,3,4].valueOf());//[1,2,3,4] console.log((new Date()).valueOf());//1593767848260
- Object 類型數(shù)據(jù)的valueOf()函數(shù)默認(rèn)的返回結(jié)果是"{}",即一個(gè)空的對(duì)象字面量。
- Array 的valueOf()函數(shù)返回的是數(shù)組本身
- function 的valueOf()函數(shù)返回的是函數(shù)本身
- Date 的valueOf()函數(shù)返回的是指定日期的時(shí)間戳
小結(jié):
- toString() 返回的是字符串,而 valueOf() 返回的是原始值,沒有原始值返回對(duì)象本身
- undefined 和 null 都沒有 toString() 和 valueOf() 方法
- Date 類型的 toString() 返回的表示時(shí)間的字符串;valueOf() 返回的是現(xiàn)在到1970年1月1日的毫秒數(shù)(時(shí)間戳)
- Number 類型的 toString() 方法可以接收轉(zhuǎn)換基數(shù),返回不同進(jìn)制的字符串形式的數(shù)值;而 valueOf()方 法無(wú)法接受轉(zhuǎn)換基數(shù)
四、特殊情況
如果一個(gè)引用類型的值既存在 toString() 函數(shù)又存在 valueOf() 函數(shù),那么在做隱式轉(zhuǎn)換時(shí),會(huì)調(diào)用哪個(gè)函數(shù)呢?這里我們可以概括成兩種場(chǎng)景,分別是引用類型轉(zhuǎn)換為 String 類型,以及引用類型轉(zhuǎn)換為 Number 類型。
1、引用類型轉(zhuǎn)換為 String 類型
一個(gè)引用類型的數(shù)據(jù)在轉(zhuǎn)換為 String 類型時(shí),一般是用于數(shù)據(jù)展示,轉(zhuǎn)換時(shí)遵循以下規(guī)則:
- 如果對(duì)象具有 toString() 函數(shù),則會(huì)優(yōu)先調(diào)用 toString() 函數(shù)。如果它返回的是一個(gè)原始值,則會(huì)直接將這個(gè)原始值轉(zhuǎn)換為字符串表示,并返回該字符串。
- 反之,則會(huì)再去調(diào)用 valueOf() 函數(shù),如果 valueOf() 函數(shù)返回的結(jié)果是一個(gè)原始值,則會(huì)將這個(gè)結(jié)果轉(zhuǎn)換為字符串表示,并返回該字符串。
- 如果通過 toString() 函數(shù)或者 valueOf() 函數(shù)都無(wú)法獲得一個(gè)原始值,則會(huì)直接拋出類型轉(zhuǎn)換異常。
2、引用類型轉(zhuǎn)換為 Number 類型
一個(gè)引用類型的數(shù)據(jù)在轉(zhuǎn)換為 Number 類型時(shí),一般是用于數(shù)據(jù)運(yùn)算,轉(zhuǎn)換時(shí)遵循以下規(guī)則:
- 如果對(duì)象具有 valueOf() 函數(shù),則會(huì)優(yōu)先調(diào)用 valueOf() 函數(shù),如果 valueOf() 函數(shù)返回一個(gè)原始值,則會(huì)直接將這個(gè)原始值轉(zhuǎn)換為數(shù)字表示,并返回該數(shù)字。
- 反之,則會(huì)再去調(diào)用 toString() 函數(shù),如果 toString() 函數(shù)返回的結(jié)果是一個(gè)原始值,則會(huì)將這個(gè)結(jié)果轉(zhuǎn)換為數(shù)字表示,并返回該數(shù)字。
- 如果通過 toString() 函數(shù)或者 valueOf() 函數(shù)都無(wú)法獲得一個(gè)原始值,則會(huì)直接拋出類型轉(zhuǎn)換異常。
到此這篇關(guān)于 js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別的文章就介紹到這了,更多相關(guān) js toString()函數(shù)與valueOf()函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript中定義方法的另類寫法(批量定義js對(duì)象的方法)
用了很多的Javascript框架,偶爾也會(huì)去看一下框架的源碼,經(jīng)常會(huì)看到這樣的代碼。2011-02-02微信小程序基于picker實(shí)現(xiàn)級(jí)聯(lián)菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序基于picker實(shí)現(xiàn)級(jí)聯(lián)菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02JS實(shí)現(xiàn)簡(jiǎn)單拖動(dòng)模態(tài)框案例
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單拖動(dòng)模態(tài)框案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07JavaScript Cookie顯示用戶上次訪問的時(shí)間和次數(shù)
用cookies記錄用戶的訪問時(shí)間與次數(shù),然后再次訪問時(shí),在讀取。2009-12-12uniapp實(shí)現(xiàn)左右聯(lián)動(dòng)商品分類頁(yè)面
一個(gè)電商的app,商品的展示是必不可少的,聯(lián)動(dòng)分類展示是很常見的,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)左右聯(lián)動(dòng)商品分類頁(yè)面的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06利用CSS、JavaScript及Ajax實(shí)現(xiàn)高效的圖片預(yù)加載
圖片預(yù)加載想必大家都不陌生吧,實(shí)現(xiàn)預(yù)加載圖片有很多方法,包括使用CSS、JavaScript及兩者的各種組合。這些技術(shù)可根據(jù)不同設(shè)計(jì)場(chǎng)景設(shè)計(jì)出相應(yīng)的解決方案,十分高效2013-10-10Bootstrap+jfinal退出系統(tǒng)彈出確認(rèn)框的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap+jfinal退出系統(tǒng)彈出框的實(shí)現(xiàn)方法,感興趣的小伙伴們可以參考一下2016-05-05