快捷導(dǎo)航

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

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

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

一、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 方法對(duì)于值類型數(shù)據(jù)使用而言，其效果相當(dāng)于類型轉(zhuǎn)換，將原類型轉(zhuǎn)為字符串。

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

var obj = {};

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

綜合例子：

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

個(gè)人理解：

帶有運(yùn)算符的獲取值的方式都會(huì)走valueOf()方法；強(qiáng)轉(zhuǎn)字符串的時(shí)候走toString()方法；

二、toString() 和 String()

toString()

toString()可以將所有的數(shù)據(jù)都轉(zhuǎn)換為字符串，但是要排除null和undefined
null和 undefined不能轉(zhuǎn)換為字符串,null和undefined調(diào)用toString()方法會(huì)報(bào)錯(cuò)
如果當(dāng)前數(shù)據(jù)為數(shù)字類型，則toString()括號(hào)中的可以寫一個(gè)數(shù)字，代表進(jìn)制，可以將數(shù)字轉(zhuǎn)化為對(duì)應(yīng)進(jìn)制字符串。

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轉(zhuǎn)換為字符串，但是沒法轉(zhuǎn)進(jìn)制字符串。

三、Symbol.toPrimitive

對(duì)象的Symbol.toPrimitive屬性。指向一個(gè)方法。該對(duì)象被轉(zhuǎn)化為原始類型的值時(shí)，會(huì)調(diào)用這個(gè)辦法，返回該對(duì)象對(duì)應(yīng)的原始類型值。

Symbol.toPrimitive被調(diào)用時(shí),會(huì)接受一個(gè)字符串參數(shù)，表示當(dāng)前運(yùn)算的模式，一個(gè)有三種模式。

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

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

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場(chǎng)景');
          return 123;
        }
        if(hint === 'string'){
          console.log('String場(chǎng)景');
          return 'str';
        }
        if(hint === 'default'){
          console.log('Default 場(chǎng)景');
          return 'default';
        }
    }
}

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

上面代碼中、+test中的加號(hào)命名為一元加號(hào)；+test本質(zhì)就是轉(zhuǎn)成數(shù)值的意思；

Tips

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

以上的代碼中，加減乘除都算運(yùn)算符，本應(yīng)都應(yīng)該走Number場(chǎng)景，但是唯獨(dú)+號(hào)走了Default場(chǎng)景；

四、一元加號(hào)

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

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

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

一元加法是將某事物轉(zhuǎn)換為數(shù)字的最快和首選方法，因?yàn)樗粚?duì)數(shù)字執(zhí)行任何其他操作。

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

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

您可能感興趣的文章: