Web front-end, JS basic type conversion, implicit conversion, explicit conversion

foreword

In the continuous learning summary output, what I share today is the Web front-end, JS-based type conversion, implicit conversion, and explicit conversion

1. Why type conversion

JavaScript is a weak data type: JavaScript does not know which data type a variable belongs to, only after it is assigned a value.

The data obtained by using forms and prompts is of string type by default , and at this time, simple addition operations cannot be performed directly.

For example:

	<script>
	  console.log('10000' + '12000') // 输出结果   1000012000
	</script>

In this case, the data type of the variable needs to be converted. It is to convert a variable of a data type into the data type we need .

2. Implicit conversion

When some operators are executed, the system automatically converts the data type, which is called implicit conversion.

Rules for implicit conversions:

As long as one of the two sides of the number is a string, the other will be converted into a string.
Arithmetic operators other than +, such as - * /, will convert the data into a number type.

Disadvantages of implicit conversion:
the conversion type is not clear, and it can only be concluded by experience

Tip:
The + sign can be converted into a Number when it is parsed as a positive sign

   <script>
        // 内部悄悄的把 18 转换为了字符串的 '18'
        console.log('小星' + 18)
        console.log(10 + '10')  //  1010
        // - *  / 把 字符串的 '10' 转换为 数字型 10
        console.log(10 - '10') // 0
        // 小技巧
        let num = '10'
        console.log(num)
        console.log(+num)
        console.log(10 + +'10')
    </script>

operation result:
Please add a picture description

3. Explicit conversion

It is not strictly forbidden to rely too much on implicit conversions inside the system when writing programs, because the laws of implicit conversions are not clear, and most of them are based on the laws summed up by experience. In order to avoid problems caused by implicit conversion, usually the root logic needs to perform explicit conversion on the data.

convert to numeric

Number (data)
is converted to a number type. If there are non-numbers in the string content, the result will be NaN
(Not a Number) when the conversion fails

parseInt(data)
keeps only integers

parseFloat(data)
can retain decimals

Convert to character type:
String (data)
variable.toString (hexadecimal)

   <script>
        // Number(数据)
        console.log(Number('10.01'))
        // 转换为数字型，只保留整数，没有四舍五入
        console.log(parseInt('10'))
        console.log(parseInt('10.111'))
        console.log(parseInt('10.999px'))
        // 转换为数字型，会保留小数
        console.log(parseFloat('10.999'))

        // 区别：
        // 1.Number() 只能放数字类型的字符，不能放abc这样的
        // 否则返回的是 NaN  
        console.log(Number('10.01abc'))
        // parseFloat 经常用于过滤px单位
        console.log(parseFloat('100px'))

    </script>

operation result:
Please add a picture description

4. Summary

1. The concept of type conversion
One data type is converted into another type. JavaScript is a weak data type. In many cases, data types need to be converted when calculating

2. Implicit conversion
The system automatically converts

3. Explicit conversion
Write your own code to tell the system what type of Number to convert to
: if there are non-numbers in the string content, you will get NaN
String

insert image description here

Finally share a sentence:

One cannot see one's own face without tools. The ideal tool is a mirror, which in reality helps us realize that we are not others.
"Parchment" Carnegie

That's all for this sharing! ! !

Welcome to leave a message to discuss in the comment area! !