Full resolution of valueOf and toString methods of recommendation in JavaScript

It can be said that all JS data types have valueOf and toString methods, except null.They both solve the problem of javascript value operation and display.It is widely used in programs.Let's introduce them one by one.

valueOf() method of JavaScript

The valueOf() method returns the original value of the Boolean object.

Usage booleanObject.valueOf(), returns the original Boolean value of booleanObject.If the object calling this method is not Boolean, an exception TypeError is thrown.

<script type="text/javascript">
var boo = new Boolean(false);
document.write(boo.valueOf());
</script>

The above script outputs false.

toString() method of JavaScript

The toString() method converts a logical value to a string and returns the result.

Usage booleanObject.toString(), the return value returns the string "true" or "false" based on the original Boolean value or the value of the booleanObject object.If the object calling this method is not Boolean, an exception TypeError is thrown.

This method is called automatically when the Boolean object is used in a string environment.

The following script creates an Boolean object and converts it to a string:

<script type="text/javascript">
var boo = new Boolean(true);
document.write(boo.toString());
</script>

Script output: true.

First look at 1 case:

var aaa = {
i: 10,
valueOf: function() { return this.i+30; },
toString: function() { return this.valueOf()+10; }
}
alert(aaa > 20); // true
alert(+aaa); // 40
alert(aaa); // 50

This is because they secretly call the valueOf or toString methods.But how can we tell which method is called under what circumstances? We can test 1 with another method.Since console.log is used, please experiment in FF with firebug!

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

At first glance, it's almost like calling the toString method when converting to a string or the valueOf method when converting to a number, but there are two very inconsistent ones.One is alert (''+bbb), and string concatenation should call the toString method... the other one we can temporarily understand is that the===operators do not convert implicitly, so they are not called.In order to find out the truth, we need more rigorous experiments.

var aa = {
i: 10,
toString: function() {
console.log('toString');
return this.i;
}
}
alert(aa);// 10 toString
alert(+aa); // 10 toString
alert(''+aa); // 10 toString
alert(String(aa)); // 10 toString
alert(Number(aa)); // 10 toString
alert(aa == '10'); // true toString

Look at valueOf again.

var bb = {
i: 10,
valueOf: function() {
console.log('valueOf');
return this.i;
}
}
alert(bb);// [object Object]
alert(+bb); // 10 valueOf
alert(''+bb); // 10 valueOf
alert(String(bb)); // [object Object]
alert(Number(bb)); // 10 valueOf
alert(bb == '10'); // true valueOf

Find something different?!It is not as regular as the toString above.For that [object Object], I guess it's inherited from Object, so let's get rid of it.

Object.prototype.toString = null;
var cc = {
i: 10,
valueOf: function() {
console.log('valueOf');
return this.i;
}
}
alert(cc);// 10 valueOf
alert(+cc); // 10 valueOf
alert(''+cc); // 10 valueOf
alert(String(cc)); // 10 valueOf
alert(Number(cc)); // 10 valueOf
alert(cc == '10'); // true valueOf

If only toString is overridden, the object will be converted regardless of valueOf.However, if only the valueOf method is overridden, the valueOf method will be preferred when converting to a string.In case toString cannot be called, only valueOf can be brought to battle.For that strange string splicing problem, it may be due to an getValue operation on the operator that flips over ECMA262-5.Well, then the puzzle should be solved.Overrides increase the optimization of their calls, and with operators, valueOf already has a higher priority than toString.