⭐ ⭐ ⭐
Difficulty rating is subjective, with a maximum of five stars and a minimum of one star.
A: JS is a dynamically typed language, so you don’t have to specify data types when declaring variables, and data types are automatically converted as needed during code execution.
Common type conversions are:
- Cast (display conversion)
- Automatic conversion (implicit conversion)
Explicit conversion
An explicit conversion is a direct call to the following API conversion types:
- Boolean()
- Number()
- The parseInt () and the parseFloat ()
- String()
Boolean type
The data type to be converted | The value converted to true | Convert to a value of false |
---|---|---|
String | Non-empty string | An empty string |
Number | Non-zero values (including infinity) | 0, NaN |
Object | Any object | null |
Undefined | There is no | undefined |
Boolean(' ') // false
Boolean('lin') // true
Boolean('0') // true
Boolean(100) // true
Boolean(Infinity) // true
Boolean(0) // false
Boolean(NaN) // false
Boolean(undefined) // false
Boolean(null) // false
Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true
Boolean(function fn() { return false }) // true
Copy the code
The Number type
The data type to be converted | Converted value |
---|---|
String | If it can be parsed to a value, it is converted to the corresponding value, but cannot be parsed to a value, and NaN is returned |
Boolean | True is 1 and false is 0 |
Undefined | NaN |
Null | 0 |
Object | Usually converted to NaN(except for an empty array or an array containing only a single value) |
Number('100') / / 100
Number('001') / / 1
Number(' ') / / 0
Number('100qwe') // NaN
Number(false) / / 0
Number(true) / / 1
Number(undefined) // NaN
Number(null) // null
Number({}) // NaN
Number({ age: 18 }) // NaN
Number([]) / / 0
Number([1]) / / 1
Number([1.2.3]) // NaN
Number(function fn() {}) // NaN
Copy the code
The parseInt () and the parseFloat ()
The Number conversion is very strict, and if a single character cannot be converted to a Number, the entire string is converted to NaN
ParseInt is less strict than Number. ParseInt parses characters one by one and stops when it finds one that cannot be converted
In particular, parseInt interprets the empty string as NaN and Number interprets the empty string as 0.
parseInt('100qwe') / / 100
parseInt('qwe') // NaN
parseInt(' ') // NaN
Copy the code
ParseFloat works in the same way as parseInt, except that parseFloat can handle decimals.
parseInt(5.433) / / 5
parseFloat(5.433) / / 5.433
parseFloat('5.43.3') // 5.43 parseFloat resolves only the first decimal point
Copy the code
Type String
The data type to be converted | Converted value |
---|---|
Number | A string converted to a number |
Boolean | True to string ‘true’, false to string ‘false’ |
Undefined | ‘undefined’ |
Null | ‘null’ |
Object | More complex, see code |
String(0) // '0' = '0'
String(100) / / '100'
String(001) / / '1'
String(true) // 'true'
String(false) // 'false'
String(undefined) // 'undefined'
String(null) // 'null'
String({}) // '[object Object]'
String({ age: 18 }) // '[object Object]'
String([]) / /"
String([1]) / / '1'
String([1.2.3]) / / '1, 2, 3'
String(function fn() {}) // 'function fn() {}'
Copy the code
Object to primitive type
Symbol.toPrimitive
Symbol.toPrimitive is a built-in Symbol value that exists as a function value attribute of an object and is called when an object is converted to its original value. — mdn
The built-in [[ToPrimitive]] function is called when the object is converted. For this function, the algorithm logic is generally as follows:
- If it is already a primitive type, no conversion is required
- Called if it needs to be converted to a string
x.toString()
Returns the converted value when converted to the underlying type. Call first if it is not a stringvalueOf
If the result is not an underlying typetoString
- call
x.valueOf()
, returns the converted value if converted to an underlying type - If none of them return the primitive type, an error is reported
Related knowledge, do not understand stamp here 👇
Object.prototype.valueOf()
Object.prototype.toString()
With that in mind, let’s look at the previous example,
Number([1.2.3]) // NaN
[1.2.3].valueOf() // [1,2,3] is not a base type, call toString
[1.2.3].toString() / / '1, 2, 3'
Number('1, 2, 3' ) // NaN, a string type converted to a number, cannot be parsed as a number to return NaN
Copy the code
Number({}) // '[object Object]'
const obj = {}
{}.valueOf() // {}, not base type, call toString
obj.toString() // '[object Object]'
Number([object Object]) // NaN
Copy the code
There are many other examples that can be analyzed in a similar way.
Implicit conversion
JS is implicitly converted in the following cases,
- Comparison operation (
= =
,! =
,>
,<
) - Arithmetic operation (
+
,-
,*
,/
,%
) - Logic statements
if
,while
Where you need a Boolean value
Of course, these scenarios require implicit conversions unless the operands on both sides of the operator are of the same type.
Arithmetic operator
1. Subtraction, multiplication and division
Applying the mathematical operator (- * /) to various non-number types first converts non-number types to Number types.
100 - true // 99, first convert true to the number 1, then execute 100-1
100 - null // 100, first convert null to the number 0, then execute 100-0
1 * undefined // NaN, where undefined converts to a number NaN
2 * ['5'] // 10, ['5'] will first become '5', and then the number 5
Copy the code
2. Add
JS + can also be used to concatenate strings, so to be special, there are three rules:
- When a side for
String
Type that is recognized as string concatenation and will preferentially convert the other side to string type. - When a side for
Number
Type, the other side is the original type, the original type is converted toNumber
Type. - When a side for
Number
Type, on the other side is the reference type, which references the type andNumber
Type to string concatenation.
Above 3 points, priority from high to low
123 + '123' // 123123 (Rule 1)
123 + null // 123 (rule 2)
123 + true // 124 (Rule 2)
123 + {} // 123[object object]
Copy the code
Logical operator
if (1) {
// do something...
}
while (1) {
// Don't write it like this, it will loop forever
// do something...
}
Copy the code
- undefined
- null
- false
- + 0
- 0
- NaN
- ‘ ‘
All but the ones above are converted to false, and all are converted to true
Comparison operator
Take the == operator
- Rule 1: NaN always returns false when compared to any other type (including itself).
NaN= =NaN // false
Copy the code
- Rule 2: Boolean is converted to Number first compared to any other type.
true= =1 // true
true= ='2' // change true to 1, then refer to rule 3
true= = ['1'] ['1'] = '1'
true= = ['2'] / / false, the same as above
undefined= =false // false, first false becomes 0, then refer to rule 4
null= =false // false as above
Copy the code
- Rule 3: Compare String and Number. First convert String to Number.
123= ='123' // true, '123' becomes 123 first
' '= =0 // true, '' becomes 0 first
Copy the code
- Rule 4: Null == undefined is true. Otherwise, null, undefined, and any other comparison is false.
null= =undefined // true
null= =' ' // false
null= =0 // false
null= =false // false
undefined= =' ' // false
undefined= =0 // false
undefined= =false // false
Copy the code
- Rule 5:
The original type
andReference types
For comparison, the reference type will be the same as mentioned earlierToPrimitive
The rule is converted to the original type.
'[object Object]'= = {}// true, an object is compared to a string. The object gets a primitive value from toString
'1, 2, 3'= = [1.2.3]
[1, 2, 3] returns a primitive type value through toString
Copy the code
- Rule 6: If both are reference types, compare whether they refer to the same object
let obj1 = { name: 'lin' }
let obj2 = { name: 'lin' }
obj1 == obj2 // false
let obj3 = { name: 'lin' }
let obj4 = obj3
obj3 == obj4 // true
Copy the code
Other comparison operators implicitly use the same type conversion rules as ==, except that other comparisons are made after the conversion, such as! =, >, <.
At the end
Summary:
Personally feel that this table to understand, you can understand the type conversion mechanism in JS, as for many other weird things, don’t go to research, later fully embrace TS, these problems are not a problem.
What is something off the wall? For instance,
[] == ! [] // true[] [] = =// false{} = =! {}// false= = {} {}// false
Copy the code
Another example: you can write any JavaScript code with just these six characters
JS is a torture language, but TS is better, there are not so many weird things.
This is the 32nd day of alynn’s blog post, exporting insight techniques. Goodbye
Refer to the article
JavaScript implicit type conversion, one article is enough!
The last:
What is the difference between JS primitive types and reference types?