We know that in JS, ‘everything is an object’. Each object has a toString() method and a valueOf method, where the toString() method returns a string representing the object and the valueOf method returns the original valueOf the object.

1. Usage scenarios of toString && valueOf and their differences and comparisons

  • The use of toString and valueOf methods in the case of value type data (aka primitive type)
var 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
Copy the code
console.log(typeof(str.valueOf())+"_"+str.valueOf())            //string_hello
console.log(typeof(n.valueOf())+"_"+n.valueOf())                //string_123
console.log(typeof(bool.valueOf())+"_"+bool.valueOf())          //string_true

console.log(str.valueOf === str) // // true
console.log(n.valueOf === n) // // true
console.log(bool.valueOf() === bool) // true
Copy the code

The toString method is equivalent to a type conversion for value type data, converting the original type to a string. The valueOf method has the effect of returning the original data for use with value type data.

  • Compound object type data uses toString and valueOf methods
var obj = {};

console.log(obj.toString());    //[object object] Returns the object type
console.log(obj.valueOf());     {} returns the object itself
Copy the code
  • Integrated case
var test = { 
 i: 10.toString: function() { 
    console.log('toString'); 
    return this.i; 
 }, 
 valueOf: function() { 
    console.log('valueOf'); 
    return this.i; 
 } 
} 
alert(test);// 10 toString 
alert(+test); // 10 valueOf 
alert(' '+test); // 10 valueOf 
alert(String(test)); // 10 toString 
alert(Number(test)); // 10 valueOf 
alert(test == '10'); // true valueOf 
alert(test === '10'); // false
Copy the code

conclusion

1. Call toString() in preference toString coercion. When performing numeric operations, the valueOf method is called first. 2. In the case of additional operators, valueOf takes precedence over toString().Copy the code

Add toString() and String() differences

Both the toString() and String() methods can be converted to strings.

(1) the toString ()

  • ToString () converts all data to strings, but excludes null and undefined

  • Null and undefined cannot be converted to strings, and calling toString() with null and undefined will return an error

  • If the current data is numeric, a number can be written inside the toString() parentheses to represent the base, which can be converted to the corresponding base string.

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
Copy the code

(2) the String ()

  • String() can convert null and undefined to strings, but not to base strings.

3, Symbol. ToPrimitive

Object’s Symbol. ToPrimitive property. Point to a method. This method is called when the object is converted to a value of the original type, returning the corresponding value of the original type of the object. Symbol.toprimitive, when called, takes a string argument representing the current operation mode, one of which has three modes.

  • Number: Converts to a value in this case
  • String: Converts to a String in this case
  • Default: The value can be converted to a value or a string.
// The object with the Symbol. ToPrimitive property
var obj2 = {
  [Symbol.toPrimitive](hint) {
    if(hint == "number") {return 10;
    }
    if(hint == "string") {return "hello";
    }
    return true; }}console.log(+obj2);     //10 --hint in "number"
console.log(`${obj2}`); //hello --hint is "string"
console.log(obj2 + ""); //"true"
Copy the code
// The object with the Symbol. ToPrimitive property
let obj = {
  [Symbol.toPrimitive](hint) {
    if(hint === 'number') {console.log('Number scene');
      return 123;
    }
    if(hint === 'string') {console.log('the String scene');
      return 'str';
    }
    if(hint === 'default') {console.log('the Default scene');
      return 'default'; }}}console.log(2*obj); // Number Scenario 246
console.log(3 + obj); // Default scenario 3default
console.log(obj + "");  // Default Scenario Default
console.log(String(obj)); / / the String STR
Copy the code

As you can conclude from the above example, in general, the + concatenation operator is passed default, while arithmetic operators such as multiplication are passed number. For String(STR),${STR}, etc., the argument passed in is defalut.

Furthermore, Symbol. ToPrimitive has the highest priority in type conversion.

let ab = {
    valueOf() {
        return 0;
    },
    toString() {
        return '1'; },Symbol.toPrimitive]() {
        return 2; }}console.log(1+ab); / / 3
console.log('1'+ab); / / 12
Copy the code