Operator type conversion in JavaScript (graphic tutorial)

Recently, I found that the question of operator type conversion often appears in front-end interview questions, so here is a summary of operator type conversion examples in JavaScript. Friends in need can refer to it

First of all, we Let’s do some questions first! For the sake of unification, I will not write these questions together. In interview questions, these questions are often mixed up, which will confuse you even more. In order to make it easier to demonstrate, I have written some questions here in modules. You can Take a look!

Implicit conversion of operator string
Multiplication

 console.dir("-------以下乘法---------");
 console.dir(5*"5");
 console.dir(5*"a");
 console.dir(5*NaN);
 console.dir(5*null);
 console.dir(5*undefined);
 console.dir(5*5);
 console.dir("-------以上乘法---------");

Division

 console.dir("-------以下除法---------");
 console.dir(5/"5");
 console.dir(5/"a");
 console.dir(5/NaN);
 console.dir(5/null);
 console.dir(null/5);
 console.dir(5/undefined);
 console.dir(5/5);
 console.dir(5/0);
 console.dir(0/5);
 console.dir(0/0);
 console.dir("-------以上除法---------");

Remainder , Modulus

 console.dir("-------以下取余、求模--------");
 console.dir(16%"5");
 console.dir(5%"a");
 console.dir(5%NaN);
 console.dir(5%null);
 console.dir(null%5);
 console.dir(5%undefined);
 console.dir(5%5);
 console.dir(5%0);
 console.dir(0%5);
 console.dir(0%0);
 console.dir("-------以上取余、求模---------");

Addition

 console.dir("-------以下加法--------");
 console.dir(16+"5");
 console.dir(5+"a");
 console.dir(5+NaN);
 console.dir(5+null);
 console.dir(5+undefined);
 console.dir(5+5);
 console.dir("两个数的和是"+5+5);
 console.dir("两个数的和是"+(5+5));
 console.dir("-------以上加法--------");

Subtraction

 console.dir("-------以下减法--------");
 console.dir(16-"5");
 console.dir(5-"a");
 console.dir(5-NaN);
 console.dir(5-null);
 console.dir(5-undefined);
 console.dir(5-5);
 console.dir(5-true);
 console.dir(5-"true");
 console.dir(5-"");
 console.dir("两个数的差是"+5-5);
 console.dir("两个数的差是"+(5-5));
 console.dir("-------以上减法--------");

Relational operator

 console.dir("-------以下关系操作符--------");
 console.dir(16>"5");
 console.dir("16">"5");
 console.dir(5<"a");
 console.dir(5>=NaN);
 console.dir(5<NaN);
 console.dir(NaN>=NaN);
 console.dir(5>=null);
 console.dir(5>=undefined);
 console.dir(5>=5);
 console.dir(5>=true);
 console.dir(5>="true");
 console.dir(5>="");
 console.dir("Brick">"alphabet");
 console.dir("brick">"alphabet");
 console.dir("-------以上关系操作符--------");

Multiplication

 console.dir(5*"5"); //25
 console.dir(5*"a");//NaN
 console.dir(5*NaN);//NaN
 console.dir(5*null);0
 console.dir(5*undefined);//NaN
 console.dir(5*5);//25

Let’s talk about the implicit conversion principle of multiplication:

1. If the two values ​​​​are both numbers, then multiply them directly Operation, (I believe everyone is familiar with it, it is the same as primary school mathematics, and you must pay attention to the sign of the number). If the product value exceeds the numerical representation range of ECMAscript, then Infinity (positive infinity) or -Infinity (negative infinity) is returned
2 . If a number is NaN, then the result is NaN
3. If Infinity is multiplied by 0, the result is NaN
4. If one operator is a number and the other is not a numeric value, then use the Number() function first , convert it, and multiply the converted value with the number. If the converted result appears NaN, then the result is NaN.
Division

 console.dir(5/"5");//1  将字符转化为数字进行相除
 console.dir(5/"a");//NaN  将“a”用Number()函数进行转化，出来的值是NaN，结果就是NaN
 console.dir(5/NaN);//NaN
 console.dir(5/null);//Infinity null用Number()函数进行转化，结果是0，那么5/0是正无穷
 console.dir(null/5);//0 同上0/5是0
 console.dir(5/undefined);//NaN  undefined 用Number()进行转化，结果是NaN
 console.dir(5/5);//1
 console.dir(5/0);//Infinity
 console.dir(0/5);//0
 console.dir(0/0);//NaN //0除以0结果是NaN

Let’s talk about the implicit conversion principle of division:

is similar to multiplication, the only extra one is 0/0 and the result is NaN
Remainder and modulus

Remainder is most commonly used in projects when finding odd and even numbers. We often use a value and 2 to find the remainder. If the result is 0, then the number is even, and if the result is 1, then the number is odd.

Look at the above question:

 console.dir(16%"5"); //1 将字符串5通过Number()转化为5然后进行求余
 console.dir(5%"a");//NaN
 console.dir(5%NaN);//NaN
 console.dir(5%null);//NaN 将null 通过Number()转化，结果是0，然后计算5%0 ，结果是NaN
 console.dir(null%5);//0 同上0%5 取余，结果是0
 console.dir(5%undefined);//NaN
 console.dir(5%5);//0
 console.dir(5%0);//NaN
 console.dir(0%5);//0
 console.dir(0%0);//NaN
console.dir(Infinity%Infinity);//NaN
console.dir(5%Infinity);//5
 console.dir(Infinity%5); //NaN

Let’s talk about the remainder implicit conversion principle:

It’s the same as multiplication, let me talk about the special place! We all know the concepts of dividend and divisor, we learned them in elementary school.

1. The dividend is infinite, and the divisor is a finite value, then the result is NaN
2. The dividend is a finite value, and the divisor is 0, then the result is NaN
3. Infinity% The result of Infinity is NaN
4. The dividend is a finite value, the divisor is an infinite value, and the result is the dividend.
5. The dividend is 0, and the result is 0
Subtraction

Look at the above example!

 console.dir(16-"5");//11
 console.dir(5-"a");//NaN
 console.dir(5-NaN);//NaN
 console.dir(5-null);//5
 console.dir(5-undefined);//NaN
 console.dir(5-5);//0
 console.dir(5-true);//4
 console.dir(5-"true");//NaN
 console.dir(5-"");//5
 console.dir(5-Infinity);//-Infinity
 console.dir(Infinity-Infinity);//NaN
 console.dir("两个数的差是"+5-5);//NaN
 console.dir("两个数的差是"+(5-5));//两个数的差是0

Let’s talk about the implicit conversion principle of subtraction:

It’s the same as above, I won’t talk about the same ones, I will talk about the ones unique to subtraction.

1. The result of Infinity-Infinity is NaN
2. The result of -Infinity-Infinity is -Infinity
3. The result of subtracting Infinity from a number is -Infinity
4. Infinity-(-Infinity )The result is Infinity
5. If the operand is an object, call the object valueOf method. If the result is NaN, then the result is NaN. If there is no valueOf method, then the toString() method is called and the resulting string is converted into a numerical value.
Relational operators

Relational operators uniformly return true or false

 console.dir(16>"5"); //true
 console.dir("16">"5");//false
 console.dir(5<"a");//false
 console.dir(5>=NaN);//false
 console.dir(5<NaN);//false
 console.dir(NaN>=NaN);//false
 console.dir(5>=null);//true
 console.dir(5>=undefined);//false
 console.dir(5>=5);//true
 console.dir(5>=true);//true
 console.dir(5>="true");//false
 console.dir(5>="");//true 
 console.dir("Brick">"alphabet");//false B的字符串编码值是66 ，而a的字符串编码是97.因此false
 console.dir("brick">"alphabet");//true 小写字母b比a大，所以是true

The following is the implicit conversion principle of relational operators:

It’s still the same as above, I won’t talk about the same ones.

If the two numbers being compared are both strings, then the string encoding values ​​corresponding to the strings will be compared.

Addition operation

The implicit conversion of addition operation, I say it last, is because the implicit conversion of addition operation is different from the previous one. All the previous operations symbols, as long as one is a number, the other one also uses Number() by default for number conversion. The addition operation is different. As long as one of the addition operations is a string, the other one will be converted into a string, and then the strings will be concatenated!

 console.dir(16+"5"); //156
 console.dir(5+"a");//5a
 console.dir(5+NaN);//NaN
 console.dir(5+null);//5
 console.dir('5'+null);//5null
 console.dir(5+undefined);//NaN
 console.dir(null+undefined);//NaN
 console.dir(5+5);//10
 console.dir("两个数的和是"+5+5);//两个数的和是55
 console.dir("两个数的和是"+(5+5));//两个数的和是10

Let’s talk about the implicit conversion principle of addition operators:

1. If one is a string, then the other one will also be converted to a string for splicing. If one is a string and the other is null or undefined, then if added, null or undefined will call the String() method to obtain the string "null" or "undefined", and then splice it.
2. If null or undefined is added to a number, then null or undefined should be converted to Number() before adding.
3. The remaining principles are similar to the others, so I won’t go into details.

Double equal sign implicit conversionRun the following code once, I believe you will understand it naturally~

var a;

console.dir(0 == false);//true

console.dir(1 == true);//true

console.dir(2 == {valueOf: function(){return 2}});//true

console.dir(a == NaN);//false
console.dir(NaN == NaN);//false

console.dir(8 == undefined);//false

console.dir(1 == undefined);//false

console.dir(2 == {toString: function(){return 2}});//true

console.dir(undefined == null);//true

console.dir(null == 1);//false

console.dir({ toString:function(){ return 1 } , valueOf:function(){ return [] }} == 1);//true

console.dir(1=="1");//true

console.dir(1==="1");//false

The above is what I compiled for everyone, I hope it will be useful to you in the future Everyone is helpful.

Related articles:

Large-scale JavaScript application architecture design patterns (advanced)

Detailed explanation in javascriptUnderstanding of undefined and null

Understanding of Javascript object literals (graphic tutorial)

The above is the detailed content of Operator type conversion in JavaScript (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!