1. 程式人生 > >深入理解Javascript中的valueOf與toString

深入理解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偏向於顯示。

1、 在進行強轉字串型別時將優先呼叫toString方法,強轉為數字時優先呼叫valueOf。

2、 在有運算操作符的情況下,valueOf的優先順序高於toString。

下面給大家簡單說下valueof和tostring的區別。

valueOf():返回最適合該物件型別的原始值;

toString(): 將該物件的原始值以字串形式返回。

這兩個方法一般是交由JS去隱式呼叫,以滿足不同的運算情況。

在數值運算裡,會優先呼叫valueOf(),如a + b;

在字串運算裡,會優先呼叫toString(),如alert(c)。

以上所述是小編給大家介紹的Javascript中的valueOf與toString,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對指令碼之家網站的支援!