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(), return the original boolean value with the value booleanObject. If the object calling the method is not Boolean, an exception TypeError is thrown.
<script type="text/javascript"> var boo = new Boolean(false); (()); </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 (), 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 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); (()); </script>
Script output: true.
Let’s take a look at an example:
var aaa = {
i: 10,
valueOf: function() { return +30; },
toString: function() { return ()+10; }
}
alert(aaa > 20); // true
alert(+aaa); // 40
alert(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 it is used, please experiment in FF with firebug installed!
var bbb = {
i: 10,
toString: function() {
('toString');
return ;
},
valueOf: function() {
('valueOf');
return ;
}
}
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, 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() {
('toString');
return ;
}
}
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() {
('valueOf');
return ;
}
}
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
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.
= null;
var cc = {
i: 10,
valueOf: function() {
('valueOf');
return ;
}
}
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 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 for my website!