Javascript中的valueOf與toString

基本上，javascript中所有資料類型都擁有valueOf和toString這兩個方法，null除外。它們倆解決javascript值運算與顯示的問題,本文将詳細介紹，有需要的朋友可以參考下。

toString()

toString()函數的作用是傳回object的字元串表示，JavaScript中object預設的toString()方法傳回字元串”[object Object]“。定義類時可以實作新的toString()方法，進而傳回更加具有可讀性的結果。JavaScript對于數組對象、函數對象、正規表達式對象以及Date日期對象均定義了更加具有可讀性的toString()方法：

1.array的toString()方法将傳回以逗号分隔的數組成員。比如，[1,2,3].toString()會傳回字元串”1,2,3″。
2.function的toString()方法将傳回函數的文本定義。
比如，(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()函數的作用是傳回該object自身。與toString()一樣，定義類時可以實作新的valueOf()方法，進而傳回需要的結果。JavaScript對于Date對象定義了更加具有可讀性的valueOf()方法：

1.Date的valueOf()方法将傳回一個時間戳數值，該數值為Date對象與1970年1月1日零時的時間差(以毫秒為機關)。其他一律傳回對象本身。

在js高程裡面有一段代碼：

var colors = ["red", "blue", "green"]; // 建立一個包含3 個字元串的數組  
alert(colors.toString()); // red,blue,green  
alert(colors.valueOf()); // red,blue,green  
alert(colors); // red,blue,green  
           

三個輸出全部一樣，那麼toString()和valueOf()差別到底是什麼？

看下一個我寫的例子：

var arr = [1,2,3];  
alert(Array.isArray(arr.valueOf()));  
alert(Array.isArray(arr.toString())); 
           

結果是第一個是true而第二個是false，為什麼呢?

其實valueOf()調用完以後還是傳回一個數組。這個數組被alert的時候會調用toString()函數，是以不是valueOf()和toString()函數相同，而是間接的調用了toString()函數！

進一步測試下：

var arr = [1,2,3];  
arr.toString = function () {  
    alert("你調用了toString函數");  
}  
           

結果就是我們會看到“你調用了toString函數”。

而對于數值，我們可以調用valueOf的時候直接可以獲得數字進行計算，不必轉化成字元串，是以不會調用toString。反言之，如果我們需要獲得操作對象的字元串形式的時候就會調用其toString函數。

驗證如下代碼：

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函數需要是的字元串，是以擷取的是字元串，而不是原始值，故而調用了toString

第二個

同理，alert要的是字元串不是原始值，其實是+bbb這個東西被調用了toString，而bbb被調用了valueOf

為了驗證我們這樣寫

var a = {  
    i: 1,  
    valueOf: function () {  
        alert("你調用了a的valueOf函數");  
        return this.i;  
    },  
    toString: function () {  
        alert("你調用了a的toString函數");  
        return this.i;  
    }  
};  
var c = {  
    i: +a,  
    valueOf: function () {  
        alert("你調用了c的valueOf函數");  
        return this.i;  
    },  
    toString: function () {  
        alert("你調用了c的toString函數");  
        return this.i;  
    }  
};  
alert(c);  

           

其中讓c=+a，那麼即可知道結果，

果然如此，調用了a的valueOf和c的toString!