一、数据类型简介
1.1 变量的数据类型
JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在运行过程中,类型会被自动确定。
js的变量数据类型是只有在运行过程中,根据等号右边的值来确定的。
JavaScript拥有动态类型,同时也意味着相同的变量可作用不同的类型。
1.2 数据类型的分类
JS把数据类型分为两类:
- 简单数据类型
- 复杂数据类型
二、简单数据类型(基本数据类型)
简单数据类型 | 说明 | 默认值 |
Number | 数字型,包含 整型和浮点型,如18、0.25 | 0 |
Boolean | 布尔值类型,如true、false,等价于1和0 | false |
String | 字符串类型,如"张三",字符串都带引号 | "" |
Undefined | var a;声明变量a,但没有给值,此时a = undefined | undefined |
Null | var a = null,声明了变量a为空值 | null |
2.1 数字型Number - 数字型进制
JS中八进制前面加0,十六进制前面加0x
2.1.1 数字型范围
JavaScript中数值的最大和最小值
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
2.1.2 数字型三个特殊值
- Infinity,代表无穷大,大于任何数值
- -Indinity,代表无穷小,小于任何数值
- NaN,代表一个非数值
2.1.3 isNaN()
用来判断一个变量是否为非数字的类型,返回true或者false
2.1.4 案例练习 - 弹出页面警示框
alert('这是个页面警示框');
2.2 字符串型String
字符串型可以是引号中的任意文本,其语法为双引号""和单引号''
2.2.1 字符串引号嵌套
JS可以用单引号嵌套双引号,或者双引号嵌套单引号(外双内单,外单内双)
2.2.2 字符串转义符
转义符都是 "\" 开头的,常用的转义符及其说明如下:
转义符 | 解释说明 |
\n | 换行符,n是newline的意思 |
\ \ | 斜杠\ |
\ ' | ‘ 单引号 |
\" | " 双引号 |
\t | tab 缩进 |
\b | 空格,b是blank的意思 |
2.2.3 字符串长度
字符串是由若干个字符组成的,这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度
2.2.4 字符串拼接
- 多个字符串之间可以使用+进行拼接,其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
- 拼接前会把与字符串相加的任何类型转成字符串。再拼接成一个新的字符串
- 数值相加,字符相连
2.2.5 字符串拼接加强
- 将字符串和变量来拼接
- 变量不能添加引号
2.2.6 案例练习 - 显示年龄
弹出输入框,输入用户年龄,之后弹出一个警示框显示"您今年是xx岁"(xx表示刚才输入的年龄)
var age = prompt('请输入您的年龄');
var str = '您今年是' + age + '岁';
alert(str);
页面效果展示 - 字符串拼接 - 显示年龄
2.3 布尔型Boolean
布尔类型有两个值:true和false
布尔型和数字型相加的时候,true的值为1,false的值为0
2.4 Undefined和Null
一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时,注意结果)
一个声明变量给null值,里面存的值为空
三、 获取变量数据类型
3.1 获取检测变量的数据类型
typeof可以用来获取检测变量的数据类型
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);
3.2 字面量
字面量表示如何表达这个值
- 数字字面量:8,9,10
- 字符串字面量:"JavaScript",'JS'
- 布尔字面量:true,false
四、数字类型转换
4.1 什么是数据类型转换
使用表单、prompt获取过来的数据类型默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型 - 把一种数据类型的变量转换成另外一种数据类型
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
4.2 转换为字符串
方式 | 说明 | 案例 |
toString() | 转换成字符串 | var num=1; alter(num.toString()); |
String() 强制转换 | 转换成字符串 | var num=1; alter(String(num)); |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num=1; alter(num+"字符串"); |
- toString()和String()使用方式不一样
// 1.把数字型转换为字符串型 变量.toString()
var num = 20;
var str = num.toString();
console.log(str);
console.log(typeof str);
// 2.利用 String(变量)
console.log(String(num));
// 3.利用 + 凭借字符串的方法实现转换效果 隐式转换
console.log(num + '');
4.3 转换为数字型(重点)
方式 | 说明 | 案例 |
parseInt(string)函数 | 将string类型转换成整数数值型 | parseInt('18') |
parseFloat(string)函数 | 将string类型转换成浮点数数值型 | parseFolat('10.25') |
Number()强制转换函数 | 将string类型转换为数值型 | Number(''20) |
js 隐式转换( - * /) | 利用算术运算隐式转换为数值型 | '18' - 0 |
- 注意parseInt和parseFloat单词的大小写
- 隐式转换是我们在进行算数运算的时候,JS自动转换了数据类型
// 1.parseInt(变量) 可以把 字符型的转换为数字型 得到的是整数
console.log(parseInt('3.14')) // 结果 3取整
console.log(parseInt('100px')); // 结果 100 会去掉px单位
console.log(parseInt('rem120px')); // 结果 NaN
// 2.parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数
console.log(parseFloat('3.14')); // 结果 3.14
console.log(parseFloat('100px')); // 结果 100 会去掉px单位
console.log(parseFloat('rem120px')); // 结果 NaN
4.3.1 案例练习(一) - 简单加法器
计算两个数值,用户输入第一个值后,继续弹出第二个输入框输入第二个值最后通过弹窗显示出两次输入值相加的结果
var num1 = prompt('请您输入第一个值');
var num2 = prompt('请您输入第二个值');
var result = parseFloat(num1) + parseFloat(num2);
alert('结果为:' + result);
页面效果展示 - 简单加法器
4.3.2 案例练习(二) - 计算年龄
var year = prompt('请您输入您的出生年份');
var age = 2022 - year;
alert('您今年已经' + age + '岁');
页面效果展示 - 计算年龄
4.4 转换为布尔型
方式 | 说明 | 案例 |
Boolean()函数 | 其他类型转换成布尔值 | Boolean('true'); |
- 代表空、否定的值会被转换为false,如''、0、NaN、null、undefined
- 其余值都会被转换为true
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean('小王')); //true
console.log(Boolean(12)); //true