JavaScript数据类型
学习目的:
1.说出五种简单的数据类型
2.typeof获取变量类型
3.说出1-2种转换为数值型的方法
4说出一到两种转换为字符型的方法
5说出什么是隐式转换
1为什么需要数据类型?
不同数据占用的存储空间不同,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,定义了不同的数据类型。
2变量的数据类型
js的数据类型是只有在程序运行过程中,根据等号右边的值来确定的。
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> <script> var num = 10;//num属于数字型 // js的数据类型只是在程序运行过程中,根据等号右边的值来确定的 var str ='pink';//str 字符串型 // js是动态语言 变量数据类型可以变化的 var x = 10;//x是数字型 x = 'pink';//x是字符型 </script> </head> <body> </body> </html>
3数据类型的分类:
简单数据类型
| 简单数据类型 | 说明 | 默认值 |
| Number | 数字型,包含整形值和浮点型值,如21 0.21 | 0 |
| Boolean | 布尔型 如ture,false,等价于0和1 | false |
| String | 字符串型,如 张三 咱恶魔你js中,字符串都带引号 | "" |
| Undefined | var a;声明了a但是没有赋值,此时a=undefined | undefined |
| Null | var a = null;声明了a为空值 | null |
(1)Number
1. 0 开头八进制 0x开头十六进制
2. 数字范围 :JavaScript中的最大值和最小值
alert(Number.Max_VALUE); //数字中的最大值
alert(Number.MIN_VALUE); //数字中的最小值
3. 数字的3个特殊值
alert(Infinity); //代表无穷大
alert(-Infinity); //代表无穷小
alert(NaN); //NOT A Number 代表一个非数值
4. is NaN()这个方法用来判断非数字 并且返回一个值 如果是数字返回 false 如果不是数字返回 ture
console.log(isNaN('pink'));
代码示例:
<script>
var num = 10;//num数字型
var PI = 3.14; //PI数字型
//1.八进制 0-7 我们程序里面数字前面加0 表示八进制
var num1 = 010;
console.log(num1);//010 八进制 转换为10进制 就是8
//十六进制 0-9 a-f #ffffff 数字前面加0x表示十六进制
var num3 = 0x9;
console.log(num3);
//3.数字型的最大值
console.log(Number.MAX_VALUE);
//4.数字型的最小值
console.log(Number.MIN_VALUE);
//5.无穷大
console.log(Number.MAX_VALUE * 2);//infinity
// 6.无穷小
console.log(-Number.MAX_VALUE * 2);//-infinity
// 7.NAN非数字
console.log('pink' - 100);//NAN
//is NaN()这个方法用来判断非数字 并且返回一个值 如果是数字返回 false 如果不是数字返回 ture
console.log(isNaN('pink'));
</script>
(2)string字符串型
1. 加 "" 和 '' 都可以是字符串型 'pink' '2' 'ture' 推荐单引号
2.字符串转义字符 都是用\开头的但是这些转义字符写到引号里面
| 转义符 | 解释说明 |
| \n | 换行符,n是newline的意思 |
| \\ | 斜杠\ |
| \' | ' 单引号 |
| \" | " 双引号 |
| \t | tab缩进 |
| \b | 空格,b是blank的意思 |
(3)字符串长度
字符串是有若干字符构成的,这些字符的数量就是字符串长度。通过字符串length属性可以获取整个字符串的长度。
(4)字符串的拼接
多个字符串之间可以使用+进行拼接,其拼接方式为 字符串+任何类型=拼接之后的新字符串
程序实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1.检测获取字符串长度 length
var str = 'my name is andy';
console.log(str.length); //15
//字符串的拼接+ 只要有字符串最终结果为字符串 +号口诀,数值相加,字符相连
console.log('沙漠'+'骆驼');//字符串的 沙漠骆驼
console.log('pink老师' + 18);//字符串的 pink老师18
console.log('pink老师' + true);//字符串
console.log(12+12);//数字
console.log('12' + 12); //1212
//拼接字符加强
var age = 18;
// 变量写到字符串里面,是通过和字符串相连的方式实现的
console.log('我'+age+'岁');
//小技巧 变量和字符串的口诀:隐隐加加来实现的
//程序交互效果
var age = prompt('请输入年龄');
alert('您今年已经'+age+'岁了')
</script>
</head>
<body>
</body>
</html>
(5)Boolean布尔型
4获取变量的数据类型
(1)typeof 获取变量的数据类型
<script>
var num = 10 ;
console.log(typeof num); //number
var str = 'pink';
console.log(typeof str);//string
var flag = true;
console.log(typeof flag);//boolean
var vari = undefined;
console.log(vari);//undefined
var timer = null;
console.log(timer);//object
//prompt 取过来的值是字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);
</script>
5数据类型的转换
使用表单,prompt获取过来的数据默认是字符串类型的 此时就不能直接简单进行加法运算,而需要转换变量的数据类型。俗话来说,就是把一种数据类型的变量转换为另一种数据类型。
转换为字符串型
转换为数字型
转换为布尔型
(1)转换为字符串
| 方式 | 说明 | 案例 |
| toString() | 转成字符串 | var num=1;alter(num.toString()); |
| String()强制转换 | 转成字符串 | var num=1;alert(String(num)); |
| 加号拼接字符 | 和字符串拼接的结果都是字符串 | var num=1;alert(num+"我是字符串"); |
代码示例:
<script>
// <!-- 1.把数字型转换为字符串型 -->
var num = 10;
var str = num.toString();
console.log(typeof str);
// 2.我们利用string(变量)
console.log(typeof String(num));
// 3.利用+拼接字符串的方法实现转换效果
console.log(typeof (num + ''));//+的方法也称为隐式转换。
</script>
(2)转换为数字型(重点)
| 方式 | 说明 | 案例 |
| parseInt(string)函数 | 将string类型转成整数数值型 | parseInt('78') |
| parseFloat(string)函数 | 将string类型转成浮点数数值型 | parseFloat('78.21') |
| Number()强制转换函数 | 将string类型转换为数值型 | Number('12') |
| js隐式转换(- * /) | 利用算术运算隐式转换为数值型 | '12'-0 |
代码示例:
<script>
// var age = prompt('请输入您的年龄');
//1.parseInt(age)可以把字符型转换成数值型,但是得到的是整数
console.log(typeof parseInt(age));//number
console.log(parseInt('3.14')); //取整3
console.log(parseInt('3.94')); //取整3
console.log(parseInt('120px')); //120会去掉px这个单位
console.log(parseInt('rem120px')); //NaN
//2.paseFloat(变量)可以把字符型的转换为数字型 得到的是小数 浮点数
console.log(parseFloat('3.14'));//3.14
console.log(parseFloat('rem120px')); //NaN
console.log(parseFloat('120pxhhh')); //120
//3.利用Number(变量)
var str = '123';
console.log(Number(str));
//4.利用算术运算 - * /隐式转换
console.log('12' - 0);//12
console.log('120' - '112');//8
</script>
数据类型转换小案例:
1 <script> 2 //输入出生年份算出年龄 3 //弹出输入框 4 //变量保存起来 减去变量值 5 //弹出警示框 6 var year = prompt('请输入出生年份'); 7 parseInt(year); 8 var age = 2020 - parseInt(year); 9 alert(age); 10 //简单减法器 11 var firstNumber = prompt('请输入第一个数值'); 12 var secondNumber = prompt('请输入第二个数值'); 13 var result = parseInt(firstNumber) - parseInt(secondNumber); 14 alert(result); 15 </script>
(3)转换Boolean型
| 方式 | 说明 | 案例 |
| Boolean | 其他类型转换为布尔型 | Boolean(ture); |
代表空,否定的之都会被转换成false 如'',0,NaN,null,undefined
其余的值都会被转换为ture.
代码示例:
<script>
// 代表空,否定的之都会被转换成false 如'',0,NaN,null,undefined
// 其余的值都会被转换为ture.
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(123));//ture
</script>
6扩展:
js是解释性语言,运行及时编译,运行一行解释一行 执行一样(吃火锅)
java是编译语言 编译完毕生成执行代码 再执行(做菜一起吃)

浙公网安备 33010602011771号