4.17 强制转换布尔类型+自动类型转换+自增减计算和三目计算+练习京东计算

本文探讨了JavaScript中的强制布尔转换、自动类型转换、自增减运算及三目运算，并通过实例介绍了如何应用这些知识进行京东商品价格计算。同时，文章提供了4.17日的学习打卡内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

强制转换布尔类型+字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var num = 0
			var str = String(num)
			console.log(str,typeof str)
			//转成boolear
//			var bool = Boolean(num)
//			console.log(bool,typeof bool)
			//转换成字符串 ： String
			//转成布尔类型：boolean
			  //转成 false的情况; 0 -0   “” null undefined NaN
			  
			  var str1 = null
			  var str2 = undefined
			  var str3 = NaN
			  var bool = Boolean(num)
			  var boo2 = Boolean(str1)
			  var boo3 = Boolean(str2)
			  var boo4 = Boolean(str3)
			  console.log(bool,boo2,boo3,boo4)
		</script>
	</body>
</html>

自动类型转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a =0 //数字
			var b = '5'//字符串类型
			console.log(a - b)//把b转换成数字类型来进行计算
			console.log(a + b)//把a转换成字符串进行计算
			
//			类型转换:1.强制转换--> 主动转换
//			      2.自动类型转换-->系统帮我们转换
            if(a){ //true
            	console.log(a)
            }
            //重点：  转换成false的情况下必须记住 
		</script>
	</body>
</html>

自增减计算和三目计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
//			var a = 1 ;
//			a++  //在原来1的基础上自己加1
//			alert(a)
//			var b = 5
//			b--
//			b--
//			alert(b)
			
			//  ++a 和  a++的区别的顺序问题
			var x =1 ;
			var y = x;
			x=y++;
			y=x++;
			x=++y;
			console.log(x,y);
			//总结：++在变量后面参与赋值的话 先赋值再自加
			//不过++放在前面还是后面 运行完的结果都会加或者减1
			var c = 1;
			c++ //c
			alert(c)
			
			//三目运算符
//			if(num >=60){
//				alert('及格')
//			}else{
//				alert('不及格')
//			}
             var num = prompt('分数')
            num>=60?alert('及格'):alert('不及格')
            //如果？ 前面的表达式结果为true 执行？号后面的语句 如果？前面表达式结果为false 执行冒号后面的语句
            //单条语句
		</script>
	</body>
</html>

练习京东商品计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				text-align: center;
			}
			input:nth-of-type(2){
				color: red;
				width: 50px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<input type="button" value="-" id="btn1" />
		<input type="text" value="10" id="num" />
		<input type="button" value="+" id="btn2" />
		<script type="text/javascript">
			//表示的是减去数量的按钮
			var oBtn1 = document.getElementById('btn1')
			//表示的是加去数量的按钮
			var oBtn2 = document.getElementById('btn2')
			//装数量input
			var oNum = document.getElementById('num')
			//给减法绑定事件
			oBtn1.onclick = function(){
				//点击一次减1应该拿到num的值
				var num = oNum.value
				num--
				if(num == 0 ){
					oNum.value = 1
				}else{
					oNum.value = num
				}
			}
			oBtn2.onclick = function(){
				var num = oNum.value
				num++
				if (num == 20) {
					oNum.value = 20
				}else{
					oNum.value = num
				}
			}
				
		</script>
	</body>
</html>

4.17学习打卡！！！