深入理解Javascript中的valueOf與toString
基本上,javascript中所有數(shù)據(jù)類型都擁有valueOf和toString這兩個方法,null除外。它們倆解決javascript值運算與顯示的問題,本文將詳細介紹,有需要的朋友可以參考下。
toString()
toString()函數(shù)的作用是返回object的字符串表示,JavaScript中object默認的toString()方法返回字符串”[object Object]“。定義類時可以實現(xiàn)新的toString()方法,從而返回更加具有可讀性的結(jié)果。JavaScript對于數(shù)組對象、函數(shù)對象、正則表達式對象以及Date日期對象均定義了更加具有可讀性的toString()方法:
1.array的toString()方法將返回以逗號分隔的數(shù)組成員。比如,[1,2,3].toString()會返回字符串”1,2,3″。
2.function的toString()方法將返回函數(shù)的文本定義。比如,(function(x){return x*2;}).toString()會返回字符串”function(x){return x*2;}”。
3.RegExp的toString()方法與function的toString()方法類似,將返回正則表達式的文本定義。比如,/\d+/g.toString()會返回字符串”/\\d+/g”。
4.Date的toString()方法將返回一個具有可讀性的日期時間字符串。
5.如果 Boolean 值是 true,則返回 “true”。否則,返回 “false”。
valueOf()
valueOf()函數(shù)的作用是返回該object自身。與toString()一樣,定義類時可以實現(xiàn)新的valueOf()方法,從而返回需要的結(jié)果。JavaScript對于Date對象定義了更加具有可讀性的valueOf()方法:
1.Date的valueOf()方法將返回一個時間戳數(shù)值,該數(shù)值為Date對象與1970年1月1日零時的時間差(以毫秒為單位)。其他一律返回對象本身。
在js高程里面有一段代碼:
var colors = ["red", "blue", "green"]; // 創(chuàng)建一個包含3 個字符串的數(shù)組 alert(colors.toString()); // red,blue,green alert(colors.valueOf()); // red,blue,green alert(colors); // red,blue,green
三個輸出全部一樣,那么toString()和valueOf()區(qū)別到底是什么?看下一個我寫的例子:
var arr = [1,2,3]; alert(Array.isArray(arr.valueOf())); alert(Array.isArray(arr.toString()));
結(jié)果是第一個是true而第二個是false,為什么呢,其實valueOf()調(diào)用完以后還是返回一個數(shù)組。這個數(shù)組被alert的時候會調(diào)用toString()函數(shù),所以不是valueOf()和toString()函數(shù)相同,而是間接的調(diào)用了toString()函數(shù)!
進一步測試下:
var arr = [1,2,3];
arr.toString = function () {
alert("你調(diào)用了toString函數(shù)");
}
alert(arr.valueOf());
結(jié)果就是我們會看到“你調(diào)用了toString函數(shù)”。
而對于數(shù)值,我們可以調(diào)用valueOf的時候直接可以獲得數(shù)字進行計算,不必轉(zhuǎn)化成字符串,所以不會調(diào)用toString。反言之,如果我們需要獲得操作對象的字符串形式的時候就會調(diào)用其toString函數(shù)。
驗證如下代碼:
var bbb = {
i: 10,
toString: function() {
console.log('toString');
return this.i;
},
valueOf: function() {
console.log('valueOf');
return this.i;
}
}
alert(bbb);// 10 toString
alert(+bbb); // 10 valueOf
alert(''+bbb); // 10 valueOf
alert(String(bbb)); // 10 toString
alert(Number(bbb)); // 10 valueOf
alert(bbb == '10'); // true valueOf
alert(bbb === '10'); // false
我的理解:valueOf的意思是返回最適合該對象類型的原始值,而toString則是將在該對象類型的原始值以字符串形式返回。
第一個
alert(bbb);// 10 toString
這里我們的alert函數(shù)需要是的字符串,所以獲取的是字符串,而不是原始值,故而調(diào)用了toString
第二個
alert(+bbb); // 10 valueOf
同理,alert要的是字符串不是原始值,其實是+bbb這個東西被調(diào)用了toString,而bbb被調(diào)用了valueOf
為了驗證我們這樣寫
var a = {
i: 1,
valueOf: function () {
alert("你調(diào)用了a的valueOf函數(shù)");
return this.i;
},
toString: function () {
alert("你調(diào)用了a的toString函數(shù)");
return this.i;
}
};
var c = {
i: +a,
valueOf: function () {
alert("你調(diào)用了c的valueOf函數(shù)");
return this.i;
},
toString: function () {
alert("你調(diào)用了c的toString函數(shù)");
return this.i;
}
};
alert(c);
其中讓c=+a,那么即可知道結(jié)果,果然如此,調(diào)用了a的valueOf和c的toString
第三個
alert(''+bbb); // 10 valueOf
同理,我們可以把上一段我寫的程序里面的c:+a改成c:''+a
第四個
alert(String(bbb)); // 10 toString
String這個強制轉(zhuǎn)換其實在其內(nèi)部是調(diào)用了傳入?yún)?shù)的toString函數(shù)……
第五個
alert(Number(bbb)); // 10 valueOf
這個是有區(qū)別的,因為bbb的i屬性是數(shù)值類型的,如果i為11111xxxxx這樣的字符串,我們就可以看到調(diào)用了bbb的toString了
代碼例子:
var c = {
i: "11111xxxx",
valueOf: function () {
alert("你調(diào)用了c的valueOf函數(shù)");
return this.i;
},
toString: function () {
alert("你調(diào)用了c的toString函數(shù)");
return this.i;
}
};
alert(c);
第六個
alert(bbb == '10'); // true valueOf
這個里面的判等的順序是,獲取原始值,然后判斷兩邊的原始值是否相等,所以調(diào)用valueOf
第七個也就是最后一個
alert(bbb === '10'); // false
===操作符不進行隱式轉(zhuǎn)換,判全等的第一個步驟是判斷類型,因為類型都不一樣了,所以后面什么都不會調(diào)用
總結(jié):valueOf偏向于運算,toString偏向于顯示。
1、 在進行強轉(zhuǎn)字符串類型時將優(yōu)先調(diào)用toString方法,強轉(zhuǎn)為數(shù)字時優(yōu)先調(diào)用valueOf。
2、 在有運算操作符的情況下,valueOf的優(yōu)先級高于toString。
下面給大家簡單說下valueof和tostring的區(qū)別。
valueOf():返回最適合該對象類型的原始值;
toString(): 將該對象的原始值以字符串形式返回。
這兩個方法一般是交由JS去隱式調(diào)用,以滿足不同的運算情況。
在數(shù)值運算里,會優(yōu)先調(diào)用valueOf(),如a + b;
在字符串運算里,會優(yōu)先調(diào)用toString(),如alert(c)。
以上所述是小編給大家介紹的Javascript中的valueOf與toString,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
javascript操作向表格中動態(tài)加載數(shù)據(jù)
這篇文章主要為大家詳細介紹了javascript操作向表格中動態(tài)加載數(shù)據(jù),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-08-08
JavaScript的基礎(chǔ)語法和數(shù)據(jù)類型詳解
這篇文章主要介紹了JavaScript的基礎(chǔ)語法和數(shù)據(jù)類型,保姆級的詳細教程,萬字長文詳細的列出了JavaScript的各種語法,建議收藏系列,希望可以有所幫助2021-09-09

