The “Front End of the Day question (4)” talks about the type conversion mechanism in JS

⭐ ⭐ ⭐

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

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

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

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 stringx.toString()Returns the converted value when converted to the underlying type. Call first if it is not a stringvalueOfIf the result is not an underlying typetoString
• callx.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 statementsif,whileWhere 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 forStringType that is recognized as string concatenation and will preferentially convert the other side to string type.
• When a side forNumberType, the other side is the original type, the original type is converted toNumberType.
• When a side forNumberType, on the other side is the reference type, which references the type andNumberType 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 typeandReference typesFor comparison, the reference type will be the same as mentioned earlierToPrimitiveThe 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?