JS-类型转换

大猩猩爱吃薯片

已于 2023-11-11 20:24:25 修改

阅读量43

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-11-11 17:11:25 首次发布

本文链接：https://blog.csdn.net/zxzx1289/article/details/134350404

版权

本文介绍了JavaScript中的类型转换，包括隐式转换规则（如+运算符导致的字符串转数字），显式转换方法（如Number(),parseInt(),parseFloat()），以及在处理用户输入和计算总价时的应用实例。

摘要由CSDN通过智能技术生成

1、为什么需要类型转换

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script>
		 console.log('10' + '20')//输出1020
	</script>
	</body>
</html>

此时需要转换变量的数据类型。

通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。

2、隐式转换

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

规则： 1.+ 号两边只要有一个是字符串，都会把另外一个转成字符串

2. 除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

缺点： 1.转换类型不明确，靠经验才能总结

小技巧：1. +号作为正号解析可以转换成数字型

2. 任何数据和字符串相加结果都是字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script>
		 console.log(11 + 11)//22
		 console.log('11' + 11)//1111
		 console.log(11 - 11)//0
		 console.log('11' - 11)//0
		 console.log(1 * 1)//1
		 console.log('1' * 1)//1
		 console.log(typeof '123')//string
		 console.log(typeof +'123')//number
		 console.log(+'11' +11)//22
	</script>
	</body>
</html>

3、显式转换

概念： 自己写代码告诉系统该转成什么类型

转换为数字型

Number(数据) 1 . 转成数字类型

2.如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字

3.NaN也是number类型的数据，代表非数字

parseInt(数据) 1.只保留整数

parseFloat(数据) 1. 可以保留小数

转换为字符型:

String(数据)

变量.toString(进制)

综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			h2{
				text-align: center;
			}
			table{
				height: 80px;
				margin: 0 auto;
				border-collapse: collapse;
				text-align: center;
			}
			table, th, td{
				border:1px solid  black;
			}
			th{
				padding: 5px 30px;
			}
		</style>
	</head>
	<body>
		<h2>订单确认</h2>
	<script>
		 let price = +prompt('请输入商品价格')
		 let num = +prompt('请输入商品数量')
		 let address = prompt('请输入收货地址')
		 let total = price * num
		 document.write(`
		 <table>
		 <tr>
		 	<th>商品名称</th>
		 	<th>商品价格</th>
		 	<th>商品数量</th>
		 	<th>总价</th>
		 	<th>收货地址</th>
		 </tr>
		 <tr>
		 	<td>苹果</td>
		 	<td>${price}</td>
		 	<td>${num}</td>
		 	<td>${total}</td>
		 	<td>${address}</td>
		 </tr>
		 </table>
		 `)
	</script>
	</body> 
</html>

高级软件人才培训专家