深刻理解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函數"); 
} 
alert(arr.valueOf());

 

結果就是咱們會看到「你調用了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(bbb);// 10 toString

 

這裏咱們的alert函數須要是的字符串，因此獲取的是字符串，而不是原始值，故而調用了toString

第二個

alert(+bbb); // 10 valueOf

 

同理，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

第三個

alert(''+bbb); // 10 valueOf

 

同理，咱們能夠把上一段我寫的程序裏面的c:+a改爲c:''+a

第四個

alert(String(bbb)); // 10 toString

 

String這個強制轉換其實在其內部是調用了傳入參數的toString函數……

第五個

alert(Number(bbb)); // 10 valueOf

 

這個是有區別的，由於bbb的i屬性是數值類型的，若是i爲11111xxxxx這樣的字符串，咱們就能夠看到調用了bbb的toString了

代碼例子：

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

 第六個

alert(bbb == '10'); // true valueOf

 

這個裏面的判等的順序是，獲取原始值，而後判斷兩邊的原始值是否相等，因此調用valueOf

第七個也就是最後一個

alert(bbb === '10'); // false

 

===操做符不進行隱式轉換，判全等的第一個步驟是判斷類型，由於類型都不同了，因此後面什麼都不會調用

總結：valueOf偏向於運算，toString偏向於顯示。

一、 在進行強轉字符串類型時將優先調用toString方法，強轉爲數字時優先調用valueOf。

二、 在有運算操做符的狀況下，valueOf的優先級高於toString。

下面給你們簡單說下valueof和tostring的區別。

valueOf()：返回最適合該對象類型的原始值；

toString(): 將該對象的原始值以字符串形式返回。

這兩個方法通常是交由JS去隱式調用，以知足不一樣的運算狀況。

在數值運算裏，會優先調用valueOf()，如a + b；

在字符串運算裏，會優先調用toString()，如alert(c)。

以上所述是小編給你們介紹的Javascript中的valueOf與toString，但願對你們有所幫助，若是你們有任何疑問請給我留言，小編會及時回覆你們的。在此也很是感謝你們對腳本之家網站的支持！