Web前端,JS基础之类型转换、隐式转换、显式转换

前言

持续学习总结输出中,今天分享的是Web前端,JS基础之类型转换、隐式转换、显式转换

1、为什么要类型转换

JavaScript是弱数据类型: JavaScript也不知道变量到底属于那种数据类型,只有赋值了才清楚。

使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算。

例如:

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

此时需要转换变量的数据类型。就是把一种数据类型的变量转换成我们需要的数据类型

2、隐式转换

某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。

隐式转换的规则:

  • 号两边只要有一个是字符串,都会把另外一个转成字符串
    除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

隐式转换的缺点:
转换类型不明确,靠经验才能总结

小技巧:
+号作为正号解析可以转换成Number

   <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>

运行结果:
请添加图片描述

3、显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的,因为隐式转换规律并不清晰,大多是靠经验总结的规律。 为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。

转换为数字型

Number(数据)
转成数字类型
如果字符串内容里有非数字,转换失败时结果为 NaN(Not a Number)即不是一个数字
NaN也是number类型的数据,代表非数字

parseInt(数据)
只保留整数

parseFloat(数据)
可以保留小数

转换为字符型:
String(数据)
变量.toString(进制)

   <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>

运行结果:
请添加图片描述

4、总结

1. 类型转换的概念
一种数据类型转成别的类型, JavaScript是弱数据类型,很多情况计算的时候,需要转换数据类型

2. 隐式转换
系统自动做转换

3. 显式转换
自己写代码告诉系统转成什么类型
Number:字符串内容里有非数字得到NaN
String

在这里插入图片描述

最后分享一句话:

人不借助工具是看不到自己脸的。理想中工具是镜子,现实中帮我们认识到自己的事他人。
《羊皮卷》卡耐基

本次的分享就到这里了!!!

欢迎在评论区留言讨论!!

猜你喜欢

转载自blog.csdn.net/qq_37255976/article/details/125188781