一文带你搞清JavaScript中类型转换的三种方法valueOf vs toString vs Symbol.toPrimitive

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

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

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

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

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场景

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

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