Comparative introduction to valueOf and toString in Javascript (code example)

This article brings you a comparative introduction (code example) about valueOf and toString in Javascript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

+{ a: 1, toString: function() { return '10' }, valueOf: function() { return '100' } }

The above leads to the problem of object data conversion:
All objects inherit two conversion methods:

1. toString(): Its function is to return A string that reflects this object

2. valueOf(): Its function is to return its corresponding original value

toString( )

The function of toString() function is to return the string representation of object.
The default toString() method of object in JavaScript returns the string "[object Object]". When defining a class, you can implement the new toString() method to return more readable results.
JavaScript defines a more readable toString() method for array objects, function objects, regular expression objects and Date date objects:

Array’s toString() The method will return a comma separated array members.

var arr = [1, 2, 3]
arr.toString() // "1,2,3"

Function’s toString() method will return the text definition of the function.

var fun = function() { return 'fun' }
fun.toString() // "function() { return 'fun' }"

The toString() method of RegExp is similar to the toString() method of Function and will return the text definition of the regular expression.

var reg = /d+/g
reg.toString() // "/d+/g"

Date's toString() method will return a readable date and time string.

var date = new Date()
date.toString() // "Tue Feb 12 2019 14:04:36 GMT+0800 (中国标准时间)"

If the Boolean value is true, return "true". Otherwise, returns "false".

var boolean = true
boolean.toString() // "true"

valueOf()

The valueOf() function is to return the object itself.
Same as toString(), you can implement the new valueOf() method when defining a class to return the required results.
JavaScript defines a more readable valueOf() method for the Date object:

The valueOf() method of Date will return a timestamp value, which is the date between the Date object and 1970 The time difference (in milliseconds) from 0:00 on January 1st.

var date = new Date()
date.valueOf() // 1549951476233

• Others will return the object itself.

Example

var colors = ["red", "blue", "green"] // 创建一个包含3 个字符串的数组 
alert(colors.toString()) // red,blue,green 
alert(colors.valueOf()) // red,blue,green 
alert(colors) // red,blue,green

The three outputs are all the same, so what is the difference between toString() and valueOf()? Look at the next example I wrote:

var arr = [1,2,3]
alert(Array.isArray(arr.valueOf())) // true
alert(Array.isArray(arr.toString())) // false

The result is that the first one is true and the second one is false. Why? In fact, after valueOf() is called, it still returns an array. When this array is alerted, the toString() function will be called, so the valueOf() and toString() functions are not the same, but the toString() function is called indirectly!
Further testing:

var arr = [1,2,3] 
arr.toString = function () { 
  alert("调用了toString函数");
} 
alert(arr.valueOf()) // "调用了toString函数"

The result is that we will see "the `toString function is called".
Verify the following code:

var test = { 
  value: 10, 
  toString: function() { 
    console.log('toString')
    return this.value
  }, 
  valueOf: function() { 
    console.log('valueOf')
    return this.value
  } 
} 
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

valueOf means to return the original value that is most suitable for the object type, while toString returns the original value of the object type in the form of a string.

Example 1

alert(test) // 10 toString

Here our alert function needs to be a string, so the string is obtained instead of the original value, so toString## is called

#Example 2

alert(+test) // 10 valueOf

Similarly, what alert wants is that the string is not the original value. In fact, the result of (test) calls toString, and test is called valueOf

In order to verify, we write like this:

var test = { 
  value: 1, 
  valueOf: function () { 
    alert("调用了test的valueOf函数")
    return this.value 
  }, 
  toString: function () { 
    alert("调用了test的toString函数") 
    return this.value 
  } 
}; 
var test2 = { 
  value: +test, 
  valueOf: function () { 
    alert("调用了test2的valueOf函数") 
    return this.value;
  }, 
  toString: function () { 
    alert("调用了test2的toString函数")
    return this.value 
  } 
}; 
alert(test2)
// 调用了test的valueOf函数
// 调用了test2的toString函数
// 1

Let test2 = test, then you can know the result. As expected, the valueOf of test and toString of test2 are called

Example 3

alert('' + test) // 10 valueOf

Similarly, we can change test2: test in the program written in the previous paragraph to test2:'' test

Example 4

alert(String(test)) // 10 toString

String is actually a forced conversion that internally calls the toString function of the passed-in parameter

Example 5

alert(Number(test)) // 10 valueOf

Example 6

alert(test == '10') // true valueOf

The equality inside this The sequence is to get the original value, and then determine whether the original values ​​on both sides are equal, so call valueOf

Example 7

alert(test === '10') // false

=== The operator does not perform implicit conversion. The first step to determine congruence is to determine the type. Because the types are different, nothing will be called later

Summary

valueOf is biased toward operation, and toString is biased toward display.

When the string type is forced to be converted, the toString method will be called first, and when the string type is forced to be converted, the valueOf method will be called first.

In the case of operation operators, valueOf has higher priority than toString.

Let me briefly explain the difference between valueof and tostring:

valueOf(): Returns the original value most suitable for the object type

toString(): Converts the object to The original value is returned in the form of a string

These two methods are generally called implicitly by JS to meet different operation situations.

In numerical operations, valueOf() will be called first, such as a b

In string operations, toString() will be called first, such as alert(c)

The above is the detailed content of Comparative introduction to valueOf and toString in Javascript (code example). For more information, please follow other related articles on the PHP Chinese website!