一文帶你搞清JavaScript中類型轉換的三種方法valueOf vs toString vs Symbol.toPrimitive

更新時間：2026年03月27日 09:03:07 作者：cmd

js獲取對象值的方法有三種valueOf() 、toString()、symbol.toPrimitive這些其實是類型轉換的問題,下面小編就和大家詳細介紹一下這三種方法的區(qū)別與應用吧

一、valueOf() 與 toString()

基本類型的情況下：

const str = "hello",n = 123,bool = true;
console.log(typeof(str.toString()) + "_" + str.toString())        //string_hello
console.log(typeof(n.toString()) + "_" + n.toString()  )            //string_123
console.log(typeof(bool.toString()) + "_" + bool.toString())        //string_true

console.log(typeof(str.valueOf()) + "_" + str.valueOf())            //string_hello
console.log(typeof(n.valueOf()) + "_" + n.valueOf())                //number_123
console.log(typeof(bool.valueOf()) + "_" + bool.valueOf())          //boolean_true

// valueOf
console.log(str.valueOf() === str)  // true
console.log(n.valueOf() === n) // true
console.log(bool.valueOf() === bool) // true
// toString
console.log(str.toString() === str) // true
console.log(n.toString() === n)     // false
console.log(bool.toString() === bool) // false

toString 方法對于值類型數(shù)據(jù)使用而言，其效果相當于類型轉換，將原類型轉為字符串。

valueOf 方法對于值類型數(shù)據(jù)使用而言，其效果將相當于返回原數(shù)據(jù)。 引用類型的情況下：

var obj = {};

console.log(obj.toString());    //[object Object] 返回對象類型
console.log(obj.valueOf());     //{} 返回對象本身

綜合例子：

let test = { 
    i: 10, 
    toString: function() {
       console.log('toString');
       return this.i; 
    }, 
    valueOf: function() { 
       console.log('valueOf');
       return this.i; 
    }
} 
console.log(test);          // { I:10, toString: f, valueOf: f }
console.log(+test);         // 10 valueOf
console.log('' + test);       // 10 valueOf
console.log(String(test));  // 10 toString
console.log(Number(test));  // 10 valueOf
console.log(test == '10');  // true valueOf
console.log(test == '10');  // true valueOf
console.log(test === '10'); // false

個人理解：

帶有運算符的獲取值的方式都會走valueOf()方法；強轉字符串的時候走toString()方法；

二、toString() 和 String()

toString()

toString()可以將所有的數(shù)據(jù)都轉換為字符串，但是要排除null和undefined
null和 undefined不能轉換為字符串,null和undefined調用toString()方法會報錯
如果當前數(shù)據(jù)為數(shù)字類型，則toString()括號中的可以寫一個數(shù)字，代表進制，可以將數(shù)字轉化為對應進制字符串。

var num = 123;
console.log(num.toString()+'_'+ typeof(num.toString()));    //123_string
console.log(num.toString(2)+'_'+typeof(num.toString()));    //1111011_string
console.log(num.toString(8)+'_'+typeof(num.toString()));    //173_string
console.log(num.toString(16)+'_'+typeof(num.toString()));   //7b_string

String()

String()可以將null和undefined轉換為字符串，但是沒法轉進制字符串。

三、Symbol.toPrimitive

對象的Symbol.toPrimitive屬性。指向一個方法。該對象被轉化為原始類型的值時，會調用這個辦法，返回該對象對應的原始類型值。

Symbol.toPrimitive被調用時,會接受一個字符串參數(shù)，表示當前運算的模式，一個有三種模式。

Number: 該場合需要轉成數(shù)值
String: 該場合需要轉成字符串
Default: 該場合可以轉成數(shù)值，也可以轉成字符串。

Symbol.toPrimitive在類型轉換方面，優(yōu)先級是最高的

const test = { 
	i: 10, 
	toString: function() {
	   console.log('toString');
	  return this.i; 
	}, 
	valueOf: function() { 
	   console.log('valueOf');
	   return this.i; 
	},
    [Symbol.toPrimitive](hint) {
        if(hint === 'number'){
          console.log('Number場景');
          return 123;
        }
        if(hint === 'string'){
          console.log('String場景');
          return 'str';
        }
        if(hint === 'default'){
          console.log('Default 場景');
          return 'default';
        }
    }
}

console.log(test);          // { i:10, toString: f, valueOf: f, Symbol(Symbol.toPrimitive): f }
console.log(+test);         // 123 Number場景
console.log(''+test);       // default Default 場景
console.log(String(test));  // str String場景
console.log(Number(test));  // 123 Number場景
console.log(test == '10');  // false default場景
console.log(test === '10'); // false

上面代碼中、+test中的加號命名為一元加號；+test本質就是轉成數(shù)值的意思；

Tips

console.log(3 + test);  // 3default Default 場景
console.log(3 - test);  // -120 Number場景
console.log(3 * test);  // 369 Number場景
console.log(3 / test);  // 0.0243902 Number場景

以上的代碼中，加減乘除都算運算符，本應都應該走Number場景，但是唯獨+號走了Default場景；

四、一元加號

一元加號運算符 + 在其操作數(shù)之前，并計算其操作數(shù)；但如果尚未將其轉換為數(shù)字，則嘗試將其轉換為數(shù)字。

console.log(+'')  // 0
console.log(+true)  // 1
console.log(+false)  // 0
console.log(+'hello')  // NaN

console.log(1 + +"2" + "2")  // 32

一元加法是將某事物轉換為數(shù)字的最快和首選方法，因為它不對數(shù)字執(zhí)行任何其他操作。

如果它無法解析特定值，它將輸出為NaN

到此這篇關于一文帶你搞清JavaScript中類型轉換的三種方法valueOf vs toString vs Symbol.toPrimitive的文章就介紹到這了,更多相關JavaScript類型轉換方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: