<!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>js数据类型与数据类型的转换</title>
</head>
<body>
<script>
/*
1.js数据类型分为两大类
基本数据类型(值类型)
number: 数字
string: 字符串
boolean: 布尔值
undefined: 未定义
null: 空值
复杂数据类型(引用类型)
array: 数组
function: 函数
object: 对象
*/
// 1.number: 数学中的一切数字 (显示为蓝色)
// 作用:负责数学计算
console.log(206); //整数
console.log(9.9); //小数
console.log(-11); //负数
console.log(Infinity); //无穷大
console.log('-------------------------------------------------------------------');
// 2.string: 一切以 引号(单引号'' 双引号"" 反引号``)包起来的内容 (显示为黑色)
// 作用: 用于展示网页的文本
console.log('206');
console.log('我爱你');
console.log('-206');
console.log('我"爱"你们'); //我"爱"你们
/* 需求: 弹出一个输入框,让用户输入姓名和年龄. 然后在控制台打印: 大家好,我的姓名是xxx,我的年龄是xxx*/
let name = prompt("请输入您的姓名")
let age = prompt("请输入您的年龄")
// 错误写法: 这样无法获取name的数据,而是把'name'和'age'作为字符串的一部分
console.log('大家好,我的姓名是name,我的年龄是age');
// 解决方案1: 使用 + 连接符
// + 号只要遇到字符串,就会变成连接符
console.log('大家好,我的姓名是' + name + ',我的年龄是' + age);
// 解决方法2(推荐): 使用反引号``
/* 反引号``: 模板字符串,一般用于拼接字符串
语法: ${变量名}
注意点: ${变量名} 只能在``里生效
*/
console.log(`大家好,我的姓名是${name},我的年龄是${age}`);
console.log('-------------------------------------------------------------------');
// 3.boolean: 布尔值 只有两个值 true(真) / false(假) (显示为蓝色)
// 作用: 表示事物的对立面 true:条件成立 false:条件不成立
console.log(true);
console.log(false);
console.log('-------------------------------------------------------------------');
// 4.underfined: 未定义 变量有声明但未赋值,默认值是underfined (显示为灰色)
// 作用: 开发中一般通过判断变量是不是underfined,来判断这个变量有没有数据
let num
console.log(num); //underfined
console.log('-------------------------------------------------------------------');
// 5.null: 空值 空值是程序员手动给的,表示暂时不知道赋什么值 (显示为灰色)
// 作用: 开发中我有一个变量要存储数据,但这个数据暂时不知道,需要经过计算才知道具体存什么数据,可以先给个null
let nul = null
console.log(nul); //null
console.log('-------------------------------------------------------------------');
console.log('-------------------------------------------------------------------');
/* 检测数据类型:
语法: typeof 数据
结果: 告诉你这个数据是什么类型('string' 'number' 'boolean')
*/
console.log(typeof '123'); //'string'
console.log(typeof 123); //'number'
console.log(typeof 'false'); //'string'
console.log(typeof false); //'boolean'
console.log(typeof undefined); //'undefined'
console.log(typeof null); //'object'
console.log('-------------------------------------------------------------------');'
console.log('-------------------------------------------------------------------');
console.log('-------------------------------------------------------------------');
/*
1.隐式转换: 当运算符左右两边数据类型不一致时,编译器会自动转成一致后计算
开发中尽量不要使用隐式转换,因其转换规则很复杂,代码不严谨,阅读性不高
1.1转string: 连接符 +
1.2转number: 数学正号 + 数学运算: + - * /
*/
// 1.1转string: +
console.log(1 + '1'); //'1'+'1'='11'
// 1.2转number
console.log('5'); //'5'
console.log(+'5'); //5
// let age = +prompt('请输入年龄')
// console.log(age); //18 (number)
// 1.3转number: + - * /
console.log('10' / 2); //5
// + : 数学加法
console.log(1 + true); //1+1=2
console.log('-------------------------------------------------------------------');
/*
2.显示转换: 程序员主动使用js语法来转换 (推荐: 阅读性高)
2.1转number
字符串转整数: parseInt(数据)
字符串转小数: parseFloat(数据)
其他类型转数字: Number(数据)
*/
let str = '123.5.6.a'
// 字符串转整数: parseInt(数据)
// 解析整数,遇到非数字结束解析
console.log(parseInt(str)) //123
//字符串转小数: parseFloat(数据)
//解析小数,可以识别第一个小数点,遇到非数字结束解析
console.log(parseFloat(str)) //123.5
//其他类型转数字: Number(数据)
//只要有非数字字符,一律得到NaN
console.log(Number(str)); //NaN
console.log(Number(true)); //1
console.log(Number(false)); //0
console.log(Number(undefined)); //NaN
console.log(Number(null)); //0
//NaN: not a number 不是一个数字
//NaN是number类型中的特殊值,表示数学运算结果是错误的,得不到数字
console.log('张三' - 100); //NaN 结果错误
//NaN无法与任何数据进行计算,结果一律是NaN
console.log(NaN * 0); //NaN
console.log('-------------------------------------------------------------------');
/*2.2转string:两种语法
常用: String(数据)
可以转undefined和null
少用: 变量名.toString()
不可以转undefined和null
*/
let num = 10
console.log(num); //10
console.log(typeof num); //'number'
//1.String(数据)
console.log(String(num)); //'10'
console.log(typeof String(num)); //'string'
console.log(String(null)); //'null'
//2.变量名.toString()
console.log(num.toString()); //'10'
// console.log(undefined.toString()); //报错
console.log('-------------------------------------------------------------------');
/*2.2转布尔类型:一种语法
Boolean(数据):由于布尔类型只有两个值true和false,因此任何数据转布尔类型只会得到两种情况
1.得到false:八种数据
undefined
null
"" (空字符串)
0
-0
NaN
false
document.all
2.得到true: 除false八种之外任意数据
*/
console.log(Boolean(undefined)); //false
console.log(Boolean(null)); //false
console.log(Boolean("")); //false
console.log(Boolean(0)); //false
console.log(Boolean(-0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(false)); //false
console.log(Boolean(document.all)); //false
console.log(Boolean(2 * 4)); //true
console.log('-------------------------------------------------------------------');
/* 需求: 弹出一个输入框,让用户输入今年的年龄,然后告诉用户五年后多大 */
let age = prompt('请输入您今年多少岁')
console.log(age); //'24'
console.log(typeof age); //string
let age5 = parseInt(age) + 5
alert(`五年后你${age5}岁了`)
</script>
</body>
</html>
