Explicit type conversion and implicit type conversion in JavaScript
explicit type conversion
Explicit type conversion, as the name suggests, is the type of his conversion, you can see what type it is at a glance, frank and honest, a real gentleman
Explicit type conversion provides us with some methods in JavaScript, let's test it through some cases
Number converted to numeric
The Number method converts the value passed in to a numeric value and returns
1. We can first look at a few simple cases, as follows:
var n1 = Number('111')
var n2 = Number('abc')
var n3 = Number(true)
var n3 = Number(false)
var n4 = Number('')
var n5 = Number(null)
var n6 = Number(undefined)
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 111
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: number 值为: NaN
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: number 值为: 1
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: number 值为: 0
console.log('类型是:', typeof n5, '值为:', n5) // 类型是: number 值为: 0
console.log('类型是:', typeof n6, '值为:', n6) // 类型是: number 值为: NaN
console.log(Number('11abc'))//NaN
console.log(Number('abc111'))//NaN
2. In the above case, we can talk about the situation where the strings abc and undefined are converted to NaN, because the value converted by the Number method must be a numeric type, but if it cannot be expressed in numbers, it is NaN, but it must be Numerical type, NaN is also a numerical type, because not a number can not be a numerical type
3. There should be nothing to doubt about the rest
parseInt integer
parseInt converts a value to an integer
1. The case is as follows:
var n1 = parseInt('1111')
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 1111
var n2 = parseInt('123abc')
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: number 值为: 123
var n3 = parseInt('123.567')
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: number 值为: 123
var n4 = parseInt(false)
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: number 值为: NaN
var n5 = parseInt('abc111')
console.log('类型是:', typeof n5, '值为:', n5) // 类型是: number 值为: NaN
console.log(parseInt(null))//NaN
console.log(parseInt(undefined))//NaN
console.log(parseInt(true))//NaN
console.log(parseInt('11 22'))//11
console.log(parseInt(' 11 22'))//11
console.log(parseInt(' 1122 '))//1122
2. From here we can find a little difference, false can be converted to a value of 0 in Number, but not in parseInt, this is because parseInt mainly converts a value into an integer, while Number will convert a value as much as possible The number is converted to a numeric type, and the number can be recognized no matter how many spaces there are in front of the number in the string, but it cannot be recognized if there is a space in the middle
3. parseInt encounters a string of numbers plus other characters. If the front part is a number, it will intercept this part from the very beginning to the first occurrence of a non-number character and convert it into an integer. So if the beginning is a non-number character Strings of numbers cannot be converted
4. Of course, this is not all of the parseInt method. This method also has a second parameter, which is more interesting, radix (base). Let’s take a look at the case first, as follows:
var n1 = parseInt('123', 16)
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 291
5. The second parameter 16 means to convert 123 to decimal based on hexadecimal. If we want to test whether this 291 is correct, we can calculate it, convert decimal to hexadecimal, and take the remainder of 16 To check the calculation, firstly, the remainder of 291 / 16 is 3, and the quotient is 18. When dividing 18 by 16, the quotient is 1, and the remainder is 2. When 1 is divided by 16, the remainder is 1, and the quotient is 0, so the calculation ends here , these should be easy to understand, reverse the order of the remainder to get the value 123, the calculation is as shown in the figure:
6. If you are still not sure, we can convert the hexadecimal system of 123 to decimal system, and convert it by multiplying the base number by the nth power of the exponent. The base number is 123, and the hexadecimal index is 16. This power is the base number The position starts from 0, similar to the index, we can get a formula, 1 * 16^2 + 2 * 16^1 + 3 * 16^0, the 0th power of any number except 0 is equal to 1, calculate The result is 291
7. Now that we have covered this point, it doesn’t make sense without mentioning the AF in hexadecimal, so let me briefly introduce, this AF is in the form of 10-15, why is it designed in this way? Because the number of hexadecimal numbers is full of 16, each number will have a range of 0-15, but only 0-9 is one digit in Arabic numerals, so in order not to cause confusion, use AF instead of 11-15, more If you are interested in the system knowledge, you can find out by yourself
pressFloat
parseFloat parses a string and returns a floating-point number, which is a decimal in layman’s terms. The rules are similar to those of parseInt
The case is as follows:
var n1 = '111.234'
n1 = parseFloat(n1)
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 111.234
var n2 = '11 22'
n2 = parseFloat(n2)
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: number 值为: 11
var n3 = ' 11 '
n3 = parseFloat(n3)
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: number 值为: 11
var n4 = '88 hello'
n4 = parseFloat(n4)
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: number 值为: 88
var n5 = 'xx22'
n5 = parseFloat(n5)
console.log('类型是:', typeof n5, '值为:', n5) // 类型是: number 值为: NaN
console.log(parseFloat(null))//NaN
console.log(parseFloat(undefined))//NaN
2. Let’s test this by ourselves, there are not many special places
String to String
This will convert all the values to strings. This should not be difficult and easy to understand, so let’s make a simple formula
1. The case is as follows:
var n1 = String(1111)
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: string 值为: 1111
var n2 = String(false)//true也一样
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: string 值为: false
var n3 = String(null)
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: string 值为: null
var n4 = String(undefined)
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: string 值为: undefined
2. String There is nothing to explain, this method is so overbearing, assimilation upon entering, it has the flavor of a novel’s top skills
Boolean Boolean value
Everyone should be familiar with this, except that the following six values are all true
1. The case is as follows:
var n1 = Boolean(0)
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: Boolean 值为: false
var n2 = Boolean('')
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: Boolean 值为: false
var n3 = Boolean(null)
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: Boolean 值为: false
var n4 = Boolean(undefined)
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: Boolean 值为: false
var n5 = Boolean(NaN)
console.log('类型是:', typeof n5, '值为:', n5) // 类型是: Boolean 值为: false
var n6 = Boolean(false)
console.log('类型是:', typeof n6, '值为:', n6) // 类型是: Boolean 值为: false
2. Well, the rest are brainless true, search all the way
toString to string
There is a little difference in how this method is used, instead of passing in the value directly, it is just that the value needs to be converted to a string and it can be called directly
1. The case is as follows:
var n1 = 111
n1 = n1.toString()
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: string 值为: 111
var n2 = null
// n2 = n2.toString() // 报错 error
var n3 = undefined
// n3.toString() // 报错 error
var n4 = true
n4.toString()
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: boolean 值为: true
2. Did you find that it is different? Let me talk about why the Boolean value call is a Boolean value. Why? First of all, if the toString method on an object prototype is called, it will return a string in the format of "[object xxx]", and xxx is the type name of the tabular data, so this is often used to judge the data type, and it is very accurate, so obviously, Here is a toString method rewritten on Boolean, so the output value is still not converted into a string. The following is an introduction to the toString method of various data types. If you don’t understand the knowledge of the prototype chain, you don’t understand this inheritance and repetition. Written, you can choose to write it down, as follows:
3. There is no toString method on null and undefined, so it will cause an error. Why there is no toString method is because of the prototype. If you don’t understand it, you can understand the relevant knowledge by yourself
4. In addition to the above, this toString can also receive a parameter, and what is interesting is that it is just the opposite of parseInt. The toString method can also receive a base parameter, which is converted to the target base based on decimal. We can write Some cases to test, as follows:
var n1 = 111
console.log(typeof n1.toString(8), n1.toString(8)) // string 157
5. The process of converting decimal to octal is the same as converting hexadecimal, using the same remainder method, 111 / 8 to get 13...7, 13 / 8 to get 5...1, 1 / 8 to get 0...1, reverse The value is 157, which is not in the check calculation process of the expanded graphics, I believe it is still very easy to understand
implicit type conversion
Implicit type conversion actually runs explicit conversion internally, but it doesn’t tell us, so it’s called implicit type conversion, so to master implicit type conversion, you must master explicit type conversion
isNaN
1. I believe everyone is familiar with this method. It is to judge whether a value is a NaN and return a Boolean value. Let’s look at a few cases first, as follows:
var n1 = '111'
console.log(isNaN(n1)) // false
var n2 = 111
console.log(isNaN(n2)) // false
var n3 = 'aaa'
console.log(isNaN(n3)) // true
var n4 = NaN
console.log(isNaN(n4)) // true
var n5 = null
console.log(isNaN(n5)) // false
var n6 = undefined
console.log(isNaN(n6)) // true
2. Here I will talk about why null and undefined are the results. isNaN internally calls Number() once and then judges whether the value is NaN. If null is converted by Number once, it becomes 0. If 0 is not NaN, it returns false and undefined It is converted to NaN by Number, so it returns true, and the rest is converted by Number first, and it should be clear when using NaN.
mathematical operator
1. First look at some cases of the ++ operator, and analyze them as follows:
var n1 = '111'
n1++
console.log(n1) // 112
var n2 = null
n2++
console.log(n2) // 1
var n3 = undefined
n3++
console.log(n3) // NaN
2. Before the ++ operator is calculated, it will call the Number method to convert the value into a number. After this layer of conversion, the calculation 111 is automatically incremented to 112, null is converted to 0, and undefined is converted to NaN. Auto-increment operation is still NaN
3. Then the rest of the symbols are similar, let’s look at some cases, as follows:
var n1 = '111'
n1--
console.log(typeof n1, n1) // number 110
var n2 = 'abc'
n2 = +n2
console.log(typeof n2, n2) // number NaN
var n3 = null
n3 = +n3
console.log(typeof n3, n3) // number 0
var n4 = '88'
n4 = -n4
console.log(typeof n4, n4) // number -88
var n5 = '99'
n5 = +n5
console.log(typeof n5, n5) // number 99
4. Still execute the Number method first, so we often use + in front of a variable to convert it to a numeric value
5. You can also look at other usages, as follows:
var n1 = '5'
var n2 = 20
var n3 = n2 - n1
console.log(typeof n3, n3) // number 15
var n4 = n1 * n2
console.log(typeof n4, n4) // number 100
var n5 = n2 / n1
console.log(typeof n5, n5) // number 4
var n6 = n2 + n1
console.log(typeof n6, n6) // string 205
6. This + sign is quite special. When there is a value on both sides of the plus sign that is a string, the String method will be called to convert both values into strings, and then spliced, and the rest will be called Number
&& || !
1. These three are relatively simple, ! is to call Boolean to convert a value into a Boolean value, && and || are converted to a Boolean value for comparison, but the returned value is not the Boolean value, but itself.
As long as "&&" is false before, no matter whether "&&" is followed by true or false, the result will return the value before "&&";
As long as "&&" is preceded by true, no matter whether "&&" is followed by true or false, the result will return the value after "&&";
As long as "||" is false before, no matter whether "||" is true or false, it will return the value after "||";
As long as "||" is true before "||", regardless of whether "||" is true or false, it will return the value before "||".
as follows:
var test1 = null
console.log(!test1) // true
var test2 = 111
console.log(!test2) // false
var test3 = 'abc'
console.log(!!test3) // true
var n1 = 0
var n2 = 111
var n3 = n1 && n2
console.log(n3) // 0
var n4 = n1 || n2
console.log(n4) // 111
1&&3 //3
1&&0 //0
3&&1 //3
3&&0 //3
0&&3 //3
2. The above case should be easy to understand at a glance, so if you want to convert a value into a Boolean value, and the Boolean value is not negated, you can use !! to convert, of course, there are many cases, && and || Not much to say about the rules
<、 > 、<=、 >=、 == 、!=
1. This is also a comparison, but if there is a number, the Number method will be called first, and the comparison is performed, as follows:
var n1 = 111
var n2 = '222'
console.log(n1 > n2) // false
console.log(n1 < n2) // true
console.log(n1 <= n2) // true
console.log(n1 >= n2) // false
2. However, if both are string types, the ASCII code value is compared
3. == and != also have implicit type conversion, as follows:
var n1 = 111
var n2 = '222'
console.log(n1 == n2) // false
var n3 = '1'
var n4 = 1
console.log(n3 == n4) // true
var n5 = true
var n6 = 0
console.log(n5 == n6) // false
4. Because of this, some interesting cases can be found, as follows:
console.log(false > true) // false
console.log(1 > 2 > 3) // false
console.log(10 > 7 < 3) // true
5. False is converted to Number to get 0, true is converted to 1, and 0 > 1 is compared to false
6.1 > 2 is false, false is converted to Number to get 0, 0 > 3 is compared to get false
7.10 > 7 gets true, true gets 1 after Number conversion, 1 < 3 compares to get true
8. Through this case, we can see that the comparison is performed sequentially, so it is impossible to directly judge whether a number is in a certain interval through two comparisons, as follows:
var n = 0
var res = null
if (-1 < n < 1) {
res = '在 -1 ~ 1 区间'
} else {
res = '不在 -1 ~ 1 区间'
}
console.log(res) // 不在 -1 ~ 1 区间
9. Let’s look at another case, as follows:
console.log(undefined < 0) // false Number(undefined)=NaN
console.log(undefined > 0) // false
console.log(undefined == 0) // false
console.log(null < 0) // false Number(null)=0
console.log(null > 0) // false
console.log(null == 0) // false
console.log(null == undefined) // true
10. Why are these values in this part, there is no reason, they are defined by the system, they are born like this, just remember these special values\
11. Of course, there is also a NaN that is not equal to itself, as follows:
console.log(NaN == NaN) // false
console.log(NaN === NaN) //false
12. So when doing business development, generally use congruent === and !== to judge
Alright, let’s stop here first, let’s order some songs and collect them with love~~~