三、JavaScript 数据类型

一、变量的数据类型

<script>
	// int num = 10;  java
	// var num; // 这里的 num 我们是不确定属于哪种数据类型的
	var num = 10; // num 属于数字型
	// js 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
	var str = 'pink';  //str 字符串型
	// js 是动态语言  变量的数据类型是可以变化的
	var x = 10; // x 是数字型
	x = 'pink'; // x 字符串型
</script>

二、数字型Number

<script>
	var num = 10; // num 数字型
	var PI = 3.14; // PI 数字型
	// 1. 八进制  0 ~ 7  我们程序里面数字前面加0 表示八进制
	var num1 = 010;
	console.log(num1); // 010 八进制 转换为 十进制 就是 8
	// 2. 十六进制  0 ~ 9  a ~ f   #ffffff  数字的前面加 0x 表示十六进制
	var num2 = 0x9;
	console.log(num2);  // 9
	var num3 = 0xa;
	console.log(num3);  // 10
	// 3. 数字型的最大值
	console.log(Number.MAX_VALUE);  // 1.7976931348623157e+308
	// 4. 数字型的最小值
	console.log(Number.MIN_VALUE);  // 5e-324
	// 5. 无穷大
	console.log(Number.MAX_VALUE * 2); // Infinity 无穷大
	// 6. 无穷小
	console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
	// 7. 非数字
	console.log('pink老师' - 100);  // NaN
</script>

三、isNaN

<script>
	// isNaN() 这个方法用来判断非数字  并且返回一个值  如果是数字返回的是 false 如果不是数字返回的是true
	console.log(isNaN(12));  // false
	console.log(isNaN('pink老师'));  // true
</script>

四、字符串型String

转义符	解释说明
\n	换行符, n 是newline的意思
\\	斜杠\
\’	’ 单引号
\"	" 双引号
\t	tab缩进
\b	空格, b是blank的意思

<script>
	// 'pink'  'pink老师'  '12'  'true'
	// JS 嵌套 （外双内单，外单内双）
	var str = '我是一个"高富帅"的程序员';
	console.log(str);
	// 字符串转义字符  都是用 \ 开头  但是这些转义字符写在引号里面
	var str = "我是一个'高富帅'的\n程序员";
	console.log(str);
</script>

弹出警示框案例

<script>
	alert('酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。\n我审视四周，这里，是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声:"收破烂啦～"');
</script>

字符串拼接

<script>
	// 1. 检测获取字符串的长度  length
	var str = 'my name is andy';
	console.log(str.length);  // 15
	// 2. 字符串的拼接 + 只要有字符串和其他类型相拼接 最终的结果是字符串类型
	console.log('沙漠' + '骆驼'); // 字符串的 沙漠骆驼
	console.log('pink老师' + 18); //'pink老师18'
	console.log('pink' + true); //pinktrue
	console.log(12 + 12); // 24
	console.log('12' + 12); //'1212'
</script>

字符串拼接加强

<script>
	console.log('pink老师' + 18);  // pink老师18
	console.log('pink老师' + 18 + '岁');
	var age = 19;
	console.log('pink老师age岁');
	// 我们变量不要写到字符串里面，是通过和 字符串相连的方式实现的
	console.log('pink老师' + age + '岁');
	// 变量和字符串相连的口诀：引引加加
	console.log('pink老师' + age + '岁');
</script>

显示年龄案例

<script>
	// 弹出一个输入框（prompt)，让用户输入年龄（用户输入)
	// 把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接（程序内部处理)
	// 使用alert语句弹出警示框（输出结果)
	var age = prompt('请输入您的年龄');
	var str = '您今年已经' + age + '岁了';
	alert(str);
</script>

五、布尔型Boolean

<script>
	var flag = true; // flag 布尔型
	var flag1 = false; // flag1 布尔型
	console.log(flag + 1); // true 参与加法运算当1来看
	console.log(flag1 + 1); // false 参与加法运算当0来看
	// 如果一个变量声明未赋值 就是 undefined 未定义数据类型
	var str;
	console.log(str);
	var variable = undefined;
	console.log(variable + 'pink'); // undefinedpink
	console.log(variable + 1);  //NaN  undefined 和数字相加 最后的结果是 NaN
	// null 空值
	var space = null;
	console.log(space + 'pink'); //nullpink
	console.log(space + 1); // 1
</script>

六、获取变量数据类型

<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(typeof vari); // undefined
	var timer = null;
	console.log(typeof timer); // object
	var age = prompt('请输入您的年龄');
	console.log(age);
	console.log(typeof age);  // string
</script>

七、转换

转换为字符型

<script>
	// 1. 把数字型转换为字符串型 变量.toString()
	var num = 10;
	var str = num.toString();
	console.log(str);  // 10
	console.log(typeof str);  // string
	// 2. 我们利用 String(变量)
	console.log(String(num));  // 10
	// 3. 利用 + 拼接字符串的方法实现转换效果 隐式转换
	console.log(num + '');  // 10
</script>

转换为数字型

<script>
	// var age = prompt('请输入您的年龄');
	// 1. parseInt(变量)  可以把 字符型的转换为数字型  得到是整数
	// console.log(parseInt(age));
	console.log(parseInt('3.14')); // 3 取整
	console.log(parseInt('3.94')); // 3 取整
	console.log(parseInt('120px')); // 120 会去掉这个px单位
	console.log(parseInt('rem120px')); //NaN
	// 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数
	console.log(parseFloat('3.14')); // 3.14
	console.log(parseFloat('120px')); // 120 会去掉这个px单位
	console.log(parseFloat('rem120px')); //NaN
	// 3. 利用 Number(变量)
	var str = '123';
	console.log(Number(str));
	console.log(Number('12'));
	// 4. 利用了算数运算 - * / 隐式转换
	console.log('12' - 0); // 12
	console.log('123' - '120'); // 3
	console.log('123' * 1); //123
</script>

计算年龄案例

<script>
	// 弹出一个输入框（prompt)，让用户输入出生年份（用户输入)
	// 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄(程序内部处理)
	// 弹出警示框（alert)，把计算的结果输出(输出结果)
	var year = prompt("请输入你的年份");
	var age = 2021 - year;
	alert('你今年' + age + '岁');
</script>

简单加法器案例

计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。

<script>
	// 先弹出第一个输入框，提示用户输入第一个值  保存起来
	// 再弹出第二个框，提示用户输入第二个值保存起来
	// 把这两个值相加，并将结果赋给新的变量（注意数据类型转换)
	// 弹出警示框（alert)，把计算的结果输出(输出结果)
	var num1 = prompt('请输入第一个值：');
	var num2 = prompt('请输入第二个值：');
	var result = parseFloat(num1) + parseFloat(num2);
	alert('你的结果是：' + result);
</script>

转换为布尔型

代表空、否定的值会被转换为false ，如" "、0、NaN、null、undefined
其余值都会被转换为true

<script>
	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('-------------------------');
	console.log(Boolean('123'));  // true
	console.log(Boolean("你好"));  // true
</script>

八、课后作业

一次询问并获取用户的姓名、年龄、性别、并打印用户信息

<script>
	var v1 = prompt('请输入你的姓名：');、
	var v2 = prompt('请输入你的年龄：');
	var v3 = prompt('请输入你的性别：');
	alert('你的姓名是：' + v1 + '\n你的年龄是：' + v2 + '\n你的性别是：' + v3);
</script>