1、控制台输出语句
console.log(typeof 123) //number类型
console.log(typeof '123') //string类型
console.log(typeof true)//返回布尔类型
console.log(typeof []) //返回object对象类型
console.log(typeof null)//返回object对象类型
数据类型转换:
使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算。
分为隐式转换:
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换
规则:
+号两边只要有一个是字符串,都会把另外一个转成字符串
除了+以为的算数运算符 比如 - * /都会把数据类型转换成数字(number)类型
console.log( 11 - '11') //输出0
console.log( 11 * '11') //输出121
console.log( 11 / '11') //输出1
缺点:
转换类型不明确,靠经验才能总结
小技巧:
+号作为正号解析可以转换成Number
**
显示转换 ;常用的是 转换为数字型(number)和字符串型(string)
**
显示转换概念:我想转什么类型
// Number 是强制转换为数字类型
console.log(Number('11')) //返回11
// parseInt 转换为数字型,只保留整数,没有四舍五入
console.log(parseInt('11.11')) //返回11
// parseFloat 转换为数字型,会保留小数
console.log(parseFloat('11.11')) //返回11.11
console.log(Number('10111.abc')) //返回Nan Number()只能放数字类型的字符,不能放其他如abc
console.log(parseFloat('11.11abc')) //返回11.11 parseFloat()经常过滤 单位。只能过滤数字开头的单位
字符串型(string)分为:
String(数据)
console.log(String(10))// 返回字符串类型 10
变量.toSring(进制)
let age = 10
console.log(age.toString()) // 返回字符串类型 10
console.log(age.toString(2)) //返回字符串类型 二进制 1010
// 类型转换小案例
// 输入两个数,计算两者的和,打印到页面中
let num1 = +prompt('请输入第一个数:')
let num2 = +prompt('请输入第二个数:')
// let sum = num1+num2
// document.write('结果是:' + (num1+num2)) //打印结果是 1222 错误写法
document.write('结果是:'+(num1+num2)) //打印结果数字类型
案例—用户订单信息案例
需求:用户输入商品价格和商品数量,以及收获地址,可以自动打印订单信息
// 分析
// 1、需要输入3个数据,所以需要3个变量来存储 price num address
// 2、需要计算总的价格total
// 3、页面打印生成表格,里面填充数据即可
// 4、记得最好使用模板字符串 ${}
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table{
margin: 0 auto;
text-align: center;
border-collapse: collapse;
}
table th,td{
border: 1px solid #000;
padding: 15px;
}
table caption {
margin: 15px 0;
}
</style>
<!-- <table>
<caption>
<h2>订单的确认</h2>
</caption>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收获地址</th>
</tr>
<tr>
<th>小米</th>
<th>1999元</th>
<th>3</th>
<th>5997元</th>
<th>图木舒克</th>
</tr>
</table> -->
</div>
</head>
<body>
<script>
//1、 输入 num price address 三个变量
let num = +prompt('请输入商品价格:')
let price = +prompt('请输入购买商品数量:')
let address = prompt('请输入商品地址:')
// 2、需要计算总的价格 total
let total = price * num
document.write(total)
// 3、渲染表格 填充数据 用反引字符 ``
document.write(`
<table>
<caption>
<h2>订单的确认</h2>
</caption>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收获地址</th>
</tr>
<tr>
<th>小米</th>
<th>${num}元</th>
<th>${price}</th>
<th>${total}元</th>
<th>${address}</th>
</tr>
</table>
`)
</script>
</body>
</html>