JavaScript type conversion (detailed explanation and examples)

This article brings you knowledge about type conversion in JavaScript. Converting values ​​to primitive values, converting to numbers and converting to strings corresponds to the three abstract operations inside the engine: ToPrimitive() , ToNumber(), ToString(), I hope it will be helpful to everyone.

JavaScript addition rules

In JavaScript, the rules for addition are actually very simple, there are only two Situation:

• Add numbers to numbers

• Add strings to strings

All other types of values ​​will be automatically converted into these two types of values

In JavaScript, there are two types of values:

• The original values ​​are: undefined, null, boolean, number, string, symbol

• Object value: all other values ​​are object type values, including arrays (arrays) and functions

Type conversion

The addition operator triggers three type conversions: Convert the value to a primitive value, a number, and a string, which correspond to the three abstract operations inside the JavaScript engine: ToPrimitive(), ToNumber(), ToString()

Convert the value to the original value through ToPrimitive()

ToPrimitive(input, PreferredType?)

The optional parameter PreferredType can be Number or String, which only represents a conversion preference, and the conversion result does not necessarily have to be The type pointed to by this parameter, but the conversion result must be a primitive value. If the PreferredType is marked as Number, the following operations will be performed to convert the input value (§9.1):

• If the input value is already a primitive value, return it directly.

• Otherwise, if the input value is an object, call the valueOf() method of the object. If valueOf( ) method's return value is a primitive value, then return this primitive value.

• Otherwise, call the toString() method of this object. If the return value of the toString() method is a primitive value, the original value is returned.

• Otherwise, a TypeError exception is thrown.

If the PreferredType is marked as String, the conversion operation The order of the second and third steps will be reversed. If there is no PreferredType parameter, the value of PreferredType will be automatically set according to the following rules: Date type objects will be set to String, and other types of values ​​will be set to Number. .

Convert the value to a number through ToNumber()

If the input value is an object , then ToPrimitive(obj, Number) will be called first to convert the object into a primitive value, and then ToNumber() will be called to convert the primitive value into a number.

Through ToString() Convert the value to a string

If the input value is an object, ToPrimitive(obj, String) will be called first to convert the object as the original value, and then call ToString() to convert the original value to a string.

demo

var obj = {
    valueOf: function () {
        console.log("valueOf");
        return {}; // 没有返回原始值
    },
    toString: function () {
        console.log("toString");
        return {}; // 没有返回原始值
    }
}

Number is used as a function When called (rather than as a constructor), the ToNumber() operation is called internally within the engine:

Number(obj)
// output
valueOf
toString
Uncaught TypeError: Cannot convert object to primitive value
String(obj)
// output
toString
valueOf
Uncaught TypeError: Cannot convert object to primitive value

Addition

    value1 + value2

In calculation When expressing this expression, the operation steps are as follows:

• Convert the two operands into original values ​​(the following is the mathematical notation, not the JavaScript code):

    prim1 := ToPrimitive(value1)
    prim2 := ToPrimitive(value2)

PreferredType is omitted, so the value of Date type uses String, and the value of other types uses Number.

• If either prim1 or prim2 is a string, Then convert the other one into a string, and then return the result of the two string concatenation operations;

• Otherwise, convert both prim1 and prim2 into numeric types, and return their sum .

[] []

Output: ''

[] will be converted to For a primitive value, first try the valueOf() method and return the array itself (this):

> var arr = [];
> arr.valueOf() === arr
true

Such a result is not a primitive value, so call the toString() method again and return an empty string (which is a primitive value ). Therefore, the result of [] [] is actually the concatenation of two empty strings.

> [] + {}
'[object Object]'

{} {}

Output: NaN

• The JavaScript engine interprets the first {} as an empty code block and ignores it

• The plus sign here is not It is not a binary operator representing addition, but a unary operator, which converts the operands following it into numbers, exactly the same as the Number() function. For example:

+{}
Number({})
Number({}.toString())  // 因为{}.valueOf()不是原始值
Number("[object Object]")
NaN

> {} + []
0

• {} 忽略

• +[] = Number([]) = Number([].toString()) = Number("") = 0

有趣的是,Node.js的REPL在解析类似的输入时,与Firefox和Chrome(和Node.js一样使用V8引擎)的解析结果不同.下面的输入会被解析成一个表达式,结果更符合我们的预料:

> {} + {}
'[object Object][object Object]'
> {} + []
'[object Object]'

总结

对象.valueOf() === 对象

数组对象.toString() === 数组对象.join()

对象.toString() === "[object Object]"

Javacript 中 + 号工作：

• 数字 + 数字

• 字符串 + 字符串

【相关推荐：javascript学习教程】

The above is the detailed content of JavaScript type conversion (detailed explanation and examples). For more information, please follow other related articles on the PHP Chinese website!