【JavaScript】三、数据类型

文章目录

1、数据类型
- 1.1 基本数据类型：数字型number
- 1.2 基本数据类型：字符串类型
- 1.3 基本数据类型：布尔类型
- 1.4 基本数据类型：未定义undefined
- 1.5 基本数据类型：空类型null
2、查看数据类型
- 2.1 从控制台看
- 2.2 typeof 运算符
3、类型转换
- 3.1 隐式转换
- 3.2 显式转换
4、案例
5、常见错误

1、数据类型

内存中，不同类型的数据，所占空间大小不同，为了充分高效利用存储空间，引入数据类型，JS数据类型有两大类：

在这里插入图片描述

1.1 基本数据类型：数字型number

可以是整数、小数、正数、负数，统称为数字类型

javascript">let age = 18
let price = 88.99

注意：

JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，才能确认
Java是强数据类型，如 int a = 3 必须是整数

数字类型做算术运算时，顺序和其他语言一样：

javascript">console.log(1 + 2 * 3)		//7console.log(10 - 8 / 2)		//6// %取余，常用来判断某个数字是否能被整除
console.log(2 % 5 + 4 * 2)	//10

关于NaN：

NaN 代表一个计算错误，它是一个不正确的或者一个未定义的数学操作所得到的结果

javascript">console.log('老师' - 2)		//NaN

NaN 是粘性的，任何对 NaN 的操作都会返回 NaN

javascript">console.log(NaN + 2)		//NaN

1.2 基本数据类型：字符串类型

通过单引号(’ ') 、双引号(" ")或反引号(``) 包裹的数据都叫字符串
单引号和双引号没有本质上的区别，推荐使用单引号

在这里插入图片描述

单引号/双引号可以互相嵌套，但是不以自已嵌套自已，外双内单和外单内双都可以

关于字符串的拼接，除了 + ，还可以使用模板字符串，语法：

外层用反引号``
变量用${}包住

javascript">let name = 'zhangsan'
let age = 18
// + 拼接
document.write('大家好，我叫' + name + '，今年' + age + '岁')
// 模板字符串写法
document.write(`大家好，我叫${name}，今年${age}岁`)

1.3 基本数据类型：布尔类型

固定值，true和false

javascript">let isCool = true
console.log(isCool)

1.4 基本数据类型：未定义undefined

未定义是比较特殊的类型，只有一个值 undefined
只声明变量，未赋值的情况下，变量的默认值为 undefined
一般不直接给某个变量赋一个undefined的值

javascript">let age
console.log(age)  //输出undefined

声明一个变量后，常通过检测这个变量是不是undefined，就判断用户是否有数据传递过来

1.5 基本数据类型：空类型null

JS中的 null 仅仅是一个代表无、空或值未知的特殊值

javascript">let obj = null
console.log(obj)	//null

null 和 undefined 区别：

undefined 表示没有赋值
null 表示赋值了，但是内容为空

计算上，二者也有区别：

javascript">console.log(undefined + 1)  // NaN
console.log(null + 1) 		// 1

总之，null 理解为尚未创建的对象，将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

2、查看数据类型

2.1 从控制台看

javascript"><body><script>let age = 18let uname = 'zhangsan'let flag = falselet paramconsole.log(age)console.log(uname)console.log(flag)console.log(param)</script>
</body>

在这里插入图片描述

可以发现：数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

2.2 typeof 运算符

使用typeof 运算符，有两种写法：

作为运算符： typeof x (常用的写法)
函数形式: typeof(x)

以上两种写法结果都一样，因此直接用运算符方式就行：

在这里插入图片描述

运行：

在这里插入图片描述

3、类型转换

JS是弱类型的，使用表单、prompt 获取过来的数据默认是字符串类型的，不能直接做算术运算，需要做类型转换

3.1 隐式转换

指系统内部自动将数据类型进行转换，规则：

+ 号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符比如 - * /，等都会把数据转成数字类型
+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

在这里插入图片描述

做个小练习：输入2个数，计算两者的和，打印到页面中

javascript"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let num1 = prompt('input the first number')let num2 = prompt('input the second number')let result = Number(num1) + Number(num2)document.writeln(`the result is ${result}`)</script>
</body></html>

复杂了，直接用 + ，prompt方法获取到数据后，前面有个加号，直接转成数值型

在这里插入图片描述

3.2 显式转换

指自己写代码告诉系统该转成什么类型，转换成数字型可以通过：

Number(数据)：转成数字类型，如果字符串内容里有非数字，转换失败时结果为NaN(Not a Number)即不是一个数字
parseInt(数据) ：只保留整数
parseFloat(数据) ：可以保留小数

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

javascript"><body><script>console.log(parseInt('12px'))        //12console.log(parseInt('12.34px'))     //12console.log(parseInt('12.99px'))     //12console.log(parseInt('abc12.99px'))  //NaNconsole.log(parseFloat('12px'))        //12console.log(parseFloat('12.34px'))     //12.34console.log(parseFloat('12.99px'))     //12.99console.log(parseFloat('abc12.99px'))  //NaN</script>
</body>

在这里插入图片描述

转换成字符型，可以通过：

String(数据)
变量.toString(进制)

4、案例

用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

在这里插入图片描述

实现思路：先HTML+CSS画页面，再写JS变活，JS这块，document操作先不用，用document.write可以向html的body中输出标签以及模板字符串来实现：

javascript"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h2 {text-align: center;}table {border-collapse: collapse;margin: 0 auto;height: 80px;text-align: center;}th {padding: 5px 30px;}table,th,td {border: 1px solid #000;}</style>
</head><body><h2>订单确认</h2><script>// 输入let price = +prompt('input product price:')let num = +prompt('input product nums:')let address = prompt('input your address:')// 计算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>