一、为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

二、变量的数据类型

变量是用来存储的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定（根据等号右边的值）。

var age = 10;//这是一个数字型
var name = '孙悟空';//这是一个字符串型
//js是动态语言，变量的数据类型可以变化
var x = 10;//x是数字型
x = '老孙';//x是字符串型

三、数据类型的分类

js把数据类型分为两类：

1. 简单数据类型（Number，String，Boolean，Underfined，Null）
2. 复杂数据类型（object）

1、简单数据类型（基本数据类型）

简单数据类型

• 说明 默认值
• Number 数字型，包含整型值和浮点型值，如21、0.21 0
• Boolean 布尔值型，如true、false，等价于1和0 false
• String 字符串类型，如"张三" 注意js里面，字符串都带引号 ""
• Underfined var a；声明了变量a但是没有给值，此时a=underfined underfined
• Null var a = null;声明了变量a为空值 null

1.1数字型Number

js里的数字型既可以用来保存整数值，也可以保存小数（浮点数）

var age = 18;//整数
var Age = 21.3747//小数（浮点数）

1.1.1八进制（0~7）

我们程序里面数字前面加0，表示八进制

var num1 = 010;
console.log(num1);//在console.log中默认输出十进制
//这样就能将八进制换成十进制

1.1.2十六进制（0~9 a~f）

数字的前面加0x表示十六进制

vae num2 = 0x9;
console.log(num2);//将十六进制转换成十进制

1.1.3数字型范围

js中数值的最大和最小值

vae num2 = 0x9;
console.log(num2);//将十六进制转换成十进制

1.1.4数字型三个特殊值

alert(Infinity);//Infinity
alert(-Infinity);//-Infinity
alert(NaN);//NaN

• Infinity,代表无穷大，大于任何值
• -Infinity，代表无穷小，小于任何值
• NaN，Not a number，代表一个非数值

-------以isNaN来判断非数字，并且返回一个值，如果是数字，返回的是false，如果是非数字，返回的是true

console.log(isNaN(12))//返回false
console.log(isNaN('孙悟空'))//返回true

1.2字符串型String

字符串型可以是引号中的任何文本，语法为双引号" "和单引号' '

var strMsg = "孙悟空";//使用双引号表示字符串
var strMsg2 = "齐天大圣";//使用单引号表示字符串

常见错误

var staMsg = 六耳猕猴;//报错，没用引号，会被认为是js代码，但js没有这些语法

因为HTML标签里面的书写使用的是双引号，js这里我们推荐使用单引号

1.2.1字符串的嵌套

js可以用单引号嵌套双引号，或者用双引号嵌套单引号（外单内双，外双内单）

var strMsg = '我是"齐天大圣"孙悟空';//可以用' '包含" "
var strMsg2 = "我是'齐天大圣'孙悟空";//可以用" "包含' '

//常见错误

var badQuotes = 'What on earth?";//报错，不能单双引号搭配使用

1.2.2字符串转义符

类似于HTML中的特殊字符，字符串中也有特殊字符，我们称之为转义符

转义符都是以\开头的，常用转义符及其说明如下：

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

1.2.3案例：弹出网页警示框

内容：

随着直播间"来财，来，来财，来..."的声音不断响起，

抖音直播间审核员发现不对劲，

立马就把他直播间封了。

alert('随着直播间"来财，来，来财，来..."的声音不断响起，\n
抖音直播间审核员发现不对劲，\n
立马就把他直播间封了。');

1.2.4字符串长度以及拼接

1.2.4.1字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度

var name = 'my name is Sunwukong';

效果为：

1.2.4.2字符串拼接

多个字符串之间可以使用+进行拼接，其拼接方式为字符串＋任何类型=拼接之后的新字符串

拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

（1）字符串的拼接

console.log('齐天大圣' + '孙悟空');

效果为：

（2）字符串和数字的拼接

console.log('孙悟空'+72);

（3）数字会直接相加

console.log(12 + 12);//24

（4）数字与字符相连

console.log('12' + 12);//1212

+号口诀：数值相加，字符相连

（5）也可以加变量进去

var age = 18;
console.log('我' + age + '岁');//我18岁

1.2.4.3案例：显示年龄

让用户输入年龄，输出您今年多少岁

var age = prompt('请输入您的年龄');
var str = '您今年已经' + age +'岁了');
alert(str);

1.3布尔型Boolean

布尔类型有两个值：true和false，其中true为真（对），false为假（错）

var flag = true;
var flag1 = false;
console.log(flag + 1);//true参加加法当1来看
console.log(flag1 + 1);//false参加加法当0来看

1.4未定义数据类型undefined

var str;
console.log(str);//undefined
var variable = undefined;
console.log(variable + 'love');//undefinedlove
console.log(variable + 1);//NaN undefined和数字相加，最后的值为NaN

1.5空值null

var space = null;
console.log(space + 'love');//nulllove
console.log(space + 1);//1 null和数字相加，结果还是这个数字

2、typeof检测数据类型

var num = 10;
console.log(typeof num);//number
var str = 'love';
console.log(typeof str);//string
var flag = true;
console.log(typeof flag);//boolean

var age = prompt('请输入您的年龄');
console.log(age);//输出18
console.log(typeof age);//结果是string

那么prompt取过来的值是字符型的

3、通过控制台颜色判断数字类型

console.log(18);
console.log('18');
console.log(true);
console.log(undefined);
console.log(null);

每种数据类型有自己的颜色，数字型和布尔型是蓝色的，字符串类型是黑色的，undefined和null是灰色的

4、字面量

字面量是在源代码中的一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值

• 数字字面量：8,9,10
• 字符串字面量：'孙悟空',"齐天大圣"
• 布尔字面量：true，false

5、数据类型转换

通俗来讲，就是把一个数据类型转换为另一个数据类型

5.1转换为字符串

• 方式 说明 案例
• toString 转换成字符串 var num = 1;alert(num.toString());
• String()强制类型转换 字符串 var num = 1;alert(String(num));
• 加号拼接字符串（隐式转换 ) 和字符串拼接的结果都是字符串 var num = 1;alert(num + '我是字符串');

5.2转换为数字型（重点）

• 方式 说明 案例
• parseInt(string)函数 将string类型转成整数数值型 parselnt('78')
• parseFloat(string)函数 将string类型转成浮点数数值型 parseFloat('78.21')
• Numver()强制类型转换函数 将string类型转成数值型 Number('12')
• js隐式转换（- * /） 利用算数运算隐式转换为数值型 '12' - 0

//parseInt把字符型转变为整数数值型
console.log(parseInt('3.14'));//3取整
console.log(parseInt('3.94'));//3取整,不会四舍五入
console.log(parseInt('120px'));//120，会去掉px单位
console.log(parseInt('rem120px'));//NaN，转换成数字型时第一个不是数字，直接输出NaN
//parseFloat把字符型转变为整数数值型
console.log(parseFloat('3.14'));//3.14
console.log(parseFloat('120px'));//120，会去掉px单位
console.log(parseFloat('rem120px'));//NaN，转换成数字型时第一个不是数字，直接输出NaN
//利用Number(变量)
var str = '123';
console.log(Number(str));//123
console.log(Number('12'));//12
//利用了算数运算- * /隐式转换
console.log('12' - 0);//12
console.log('12' - '10');//2
console.log('12' * 1);//12

5.2.1案例

5.2.1.1计算年龄

此案例要求在页面中弹出一个输入框，我们输入出生年份后，能计算出我们的年龄

var year = prompt('请输入您的出生年份:');
var age = 2025 - year;
alert('您今年' + age + '岁了');

5.2.2.2简单加法计算器

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

var num1 = prompt('请输入第一个值');
var num2 = prompt('请输入第二个值');
var result = parseFloat(num1) + parseFloat(num2);
alert('您的结果是'+result);

5.3转换为布尔型

• 方式 说明 案例
• Boolean（）函数 其他类型转换成布尔值 Boolean（'true'）;

代表空、否定的值会被转换成false，如' '、0、NaN、null、undefined

其余值都会被转换成true