- 数据类型的确认
简单数据类型 | 说明 | 默认值 |
Number | 数字型,包括整形和浮点型 | 0 |
Boolean | 布尔值类型,true、false等价于1和0 | false |
String | 字符串类型,在js中字符串都带有引号 | " " |
Undefined | 只声明不赋值,就会显示undefined | undefined |
Null | 空值 | null |
- 数字型Number
<!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>Document</title>
<script>
//数字型Number
var num = 10 ; //num数字型。
//1.数字型进制
//八进制 0 ~ 7 数字前面加0 表示八进制
var num1 = 010;
console.log(num1);// 010 八进制 转换为 10进制 就是8
var num2= 012;
console.log(num2);
//十六进制 0 ~ 9 a ~ f (a=10,b=11...以此类推 #fffff 数字前面加0x表示十六进制。)
var num3 = 0x9;
console.log(mun3)
var num4 = 0xa;
console.log(num4);
//2.数据型范围
//数字型的最大值
console.log(Number.MAX_VALUE);
//数字型的最小值
console.log(Number,MIN_VALUE);
//数字型三个特殊值。
//无穷大
console.log(Number.MAX_VALUE * 2); //Infinity 无穷大
//无穷小
console.log(-Number.MAX_VALUE * 2); //Infinity 无穷小
//非数字
console.log('momo' - 100); //输出NaN,Nan表示非数字
</script>
</head>
<body>
</body>
</html>
- 字符串型String
<!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>Document</title>
<script>
var str = '我是一名本科学生'
//var str = '我是一名本科学生'要是想在本科加上双引号直接加上会显示错误
//例如var str = '我是一名'本科'学生' 这样系统会显示报错
//var str = '我是一名"本科"学生' 或 var str = "我是一名'本科'学生"
//这样都是正确的
console.log(str);
var str1 = '我是一名"本科"学生'
console.log(str1);
var str2 = "我是一名'本科'学生"
console.log(str2);
//若要换行,在js中并不是用上/Br来换行
var str3 = "我是一名本科\n学生"
console.log(str3);
</script>
</head>
<body>
</body>
</html>
字符串转义符
转义符 | 解释说明 |
\n | 换行符 |
\\ | 斜杠\ |
\' | ' 单引号 |
\" | " 双引号 |
\t | tab缩进 |
\b | 空格 |
- 字符串长度以及拼接
<!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>Document</title>
<script>
//1.检测获取字符串的长度 length
var str='my name is Momo';
console.log(str.length); // 15
//2.字符串的拼接+
//只要有字符串和其他类型相拼接,最终结果是字符串类型
console.log('本科'+'学生'); // '本科学生'
console.log('momo'+18);// 'momo18'
console.log(12+34); // 46
console.log('12'+34); // '1234'
</script>
</head>
<body>
</body>
</html>
<!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>Document</title>
<script>
console.log('momo'+18);// momo18
console.log('momo'+18+'岁');
var age = 18;
console.log('momo age岁');//错误
console.log('momo'+age+'岁');//正确
// 变量不要写到字符串里面,是通过加号 字符串相连的方式实现的
</script>
</head>
<body>
</body>
</html>
- 布尔型
<!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>Document</title>
<script>
var flag1 = true; // flag1 布尔型
var flag2 = false; // flag2 布尔型
console.log(flag1+1); // true 参加加法运算当1来看
console.log(flag2+1); // false 参加加法运算当0来看
// 如果一个变量声明未赋值 就是undefined 未定义数据类型
var str;
console.log(str);
var variable = undefined;
console.log(variable + 'momo');// undefibedmomo
console.log(variable + 1); // NaN undeibed 和数字相加最后的结果是NaN
// Null 空值
var space = null;
console.log(space + 'momo'); // nullmomo
console.log(space + 1); // 1
</script>
</head>
<body>
</body>
</html>
- 获取检测变量的数据类型
我们可以通过typeof 判断字符类型
<!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>Document</title>
<script>
var num = 5;
console.log(typeof num); //number
var str = 'momo'
console.log(typeof str); //string
var timer = null;
console.log(typeof timer); //object
var flag = true;
console.log(typeof flag); //boolean
var vari = undefined;
console.log(typeof vari); //undefined
//可以通过typeof 判断字符类型
//prompt 取过来的值是 字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);
</script>
</head>
<body>
</body>
同时我们也可以通过控制台的输出来辨别其数据类型
<!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>Document</title>
</head>
<body>
<script>
console.log(5);
console.log('5');
console.log(false);
console.log(undefined);
console.log(null);
//可以通过控制台中显示的颜色来判断其数据类型,
//黑色的5表示字符串型,绿色的5表示数值型(浏览器不同颜色不一样,不一定是绿色,有的是蓝色)
//深一点的颜色是布尔型,浅灰色即为undefined和null
</script>
</body>
</html>
- 字面值
字面量是在源代码中一个固定的表示方法
数字字面量:25,5,15
字符串字面量:"momo","joey"
布尔字面量:true,false
- 转换为数字型
<!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>Document</title>
<script>
var age = prompt('请输入您的年龄');
//parseInt(变量) 可以把字符型的转换为数字型 得到的是整数
//console.log(parseInt('3.14'));结果是3
console.log(parseInt(age));
console.log(parseInt('10kg')); //10会去掉kg单位
console.log(parseInt('momo10kg')); //NaN
//parseFloat(变量)可以把字符型转换为数字型 得到是小数 浮点数
console.log(parseFloat('3.14')); //结果是3.14
console.log(parseFloat('10kg')); //10会去掉kg单位
console.log(parseFloat('momo10kg')); //NaN
//利用了算数运算 - * / 隐形转换
console.log('12'- 0); //12
console.log('123' - '120'); //3
console.log('123' * 1);
//利用 Number(变量)
var str = '123';
console.log(Number(str));
console.log(Number('12'));
//前两个是重点
</script>
</head>
<body>
</body>
</html>
- 转换为字符串类型
<!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>Document</title>
<script>
//把数字型转换为字符串型
var num = 5;
var str = num.toString();
console.log(str);
console.log(typeof str);
//利用String(变量)
console.log(String(num));
//利用 + 拼接字符串的方法实现转换效果
console.log(num + '');
</script>
</head>
<body>
</body>
</html>
- 转换为布尔型
<!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>Document</title>
</head>
<body>
<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
// 只有上面这五个的值为false
console.log(Boolean(098));
console.log(Boolean(890));
console.log(Boolean('890'));
</script>
</body>
</html>