Comprehensive analysis of valueOf and toString methods in JavaScript (recommended)

It can be said that all JS data types have the two methods: valueOf and toString, except null. They both solve the problems of javascript value operation and display. It is very widely used in programs. Let’s introduce it to you one by one.

JavaScript's valueOf() method

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

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

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

The above script will output false.

JavaScript's toString() method

The toString() method converts a logical value into 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 the method is not a Boolean, an exception TypeError is thrown.

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

The following script will create a Boolean object and convert it into a string:

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

Script output: true.

Let’s take a look at an example:

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

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

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

At first glance, the result is roughly the feeling is that if it is converted to a string, the valueOf method is called, but two of them are very dissonant. One is alert(''+bbb), string concatenation should be called toString method... Another we can temporarily understand that the === operator does not perform implicit conversion, so they are not called. In order to pursue the truth, we need more rigorous experiments.

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

Look at valueOf again.

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

I found it a little different? ! It is not as uniform and regular as the toString above. For that [object Object], I probably inherited it from the Object, let's remove it and take a look.

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

If only toString is rewritten, the object conversion will ignore the existence of valueOf when converting. However, if only the valueOf method is rewritten, the valueOf method will be given priority when converting to a string. If you cannot call toString, you can only let valueOf go to battle. For that strange string splicing problem, it may be due to the operator. When you open ECMA262-5, you will find that there is a getValue operation. Well, then the answer should be revealed. Rewriting will increase the optimization of their calls, and in the case of operators, the priority of valueOf is already higher than that of toString.

The above is the complete description of the valueOf and toString methods in JavaScript introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!