第二章:数据类型和类型转换
一 ,数据类型简介和检测
从四个方面入手:
- 为什么需要数据类型
- Js中数据类型的分类
- js中变量的类型
- 如何检测变量和值的类型
1.为什么需要数据类型
- 在现实生活中为什么要将东西分类?因为不同东西有不同的特性,我们需要用不同的方式对待它.比如用肥皂洗衣服,但你会用它洗苹果吗,肯定不会呀.
- 那么在程序中也是一样,程序需要处理大量的不同的数据,如果用同一种方式是肯定处理不了的.所以在计算机中同样需要将数据分为不同类型,然后用不同的方式处理和计算.
我们来看一段js代码
<script>
var a=1+1; //2
var b="1"+"1"; //11
console.log(a,b); //2 11
</script>
- 计算机如何知道1+1的结果是2,而"1"+"1"的结果是11呢?
- 就是通过数据类型判断的,上面的1+1是数字的1+1,就会按照数字运算规则来计算.
- 而下面的1+1是字符串的"1"+“1”,那么就会按照字符串的拼接来操作.结果就是11.
通过这个例子,我们知道
数据类型背后,隐藏的是编译器或者解释器对数据处理方法的定义,把数据分成不同的数据类型,然后用不同的处理方式进行处理.
所以我们需要了解JS中有几种不同的数据类型,他们有什么特性,计算机是如何处理这一类型的数据.
2.JS中数据类型的分类
在Javascript中,从大的层面讲,分为两种数据类型.
-
7种基本数据类型
- String 字符串类型
- Number 数字类型
- Boolean 布尔类型
- Null 类型
- Undefined 未定义
- Symbol 符号
- Bigint 任意精度的整数
-
引用数据类型
- Object 对象
3.变量的类型
-
在js中,变量的数据类型是由变量中存储的值的数据类型来决定的.
<script> var num=1; //num 的类型是数字类型 var scr='1个苹果' //scr的类型是字符串类型 </script>
-
同时JS是一种弱类型的语言,也不用提前声明变量的类型.
-
代码运行时,变量的数据类型是由JS引擎根据=右边变量的数据类型来判断的.
-
运行完毕后,变量就确定了数据类型.
-
也就是说相同的变量在不同的时刻可以是不同的类型.
<script>
var a='小明'; // 此时a是 String字符串类型
a=23; // 此时a就是 number 数字类型
a=true; //此时a就是布尔类型
</script>
4.typeof操作符
- JS中还有许多数据类型,我们需要有一种手段来确定鼻梁的数据类型,那么typeof运算符就可以做到.
- 使用typeof运算符可以检测值或变量的类型.
- 用法:
- 检测值类型 typeof值: 或 typeof(值)
- 检测变量类型typeof变量名: 或typeof(变量名)
- 如果typeof标测的是一个表达式,则一定要带上括号,如typeof(2+‘2’);
4.1.检测值的值类
如下代码,typeof检测返回值的类型,然后cconsole.log把值的类型在控制台输出.
<script>
console.log(typeof 1); //number
console.log(typeof "艾编程"); //string
console.log(typeof '1'); //string
console.log(typeof(1)); //number
console.log(typeof (2+'2')); //string
</script>
4.2 检查变量的类型
<script type='text/javascript'>
var a=1,b='艾编程';
console.log(typeof a); // number
console.log(typeof b); // string
</script>
4.3 注意区分变量和值
变量是下面能用 ‘’ 单引号或" " 双引号包裹的,用 ’ ’ 或" "包裹的是字符串
<script type='text/javascript'>
var a=1;
console.log(typeof 'a'); // string
console.log(typeof a); // number
</script>
4.4 typeof返回值的类型
typeof返回值的类型都是字符串类型
<script>
console.log(typeof 1); // number
console.log(typeof typeof 1); // string
</script>
二. 5种基本数据类型
在接下来的数据类型学习中,我们主要学习number. String. Boolean. null. undefined 的5种基本数据类型.
关于BigInt 和Symbol 在后面的ES6中再学习.
1.Number数字类型
关于数字类型,我们从以下5个方面讲:
- 什么是数字类型的数据
- 不同进制的数字
- 数值中的最大值和最小值
- 数字型的三个特殊值
- isNaN()方法
1.1 什么是Number数字类型
-
所有数字都是Number类型,包括整数(正负数)和浮点数(小数) ;
-
在表达小于1的数时,小数点前面的0可以去掉,比如0.2可以写成2.
<script> var a = 100; var b = 219; var c = 0.2333; //0.2333是浮点数(小数) var d = 0.2; //.22表示0.22 是浮点数(小数) console.log(typeof a); // number console.log(typeof b); //number console.log(typeof c); // number console.log(typeof d); // number </script>
1.2不同进制的数字
- 最常见的进制有二进制,八进制,十进制,十六进制.
- 不过我们用的最多的是十进制,逢十进一.
- 在js中不同进制的数字是如何表示的
1.21 二进制数
-
二进制数以0b开头
-
二进制数字序列范围0-1,逢2进一
<script type="text/javascript"> var a=0b10; var b=0b101; console.log(a,b); // 2 5 </script>
不同进制在线转换工具:https://tool.lu/hexconvert/
1.2.2 八进制数
-
八进制数值以0开头
-
八进制数字序列范围是0-7,逢8进一
<script type='text/javascript'> var a = 012; var b = 024; var c = 09; // 这里的09是10进制,因为8进制中最大数不能超过7 console.log(a,b); // 10 20 </script>
1.2.3 十六进制
-
十六进制数以0x开头
-
十六进制序列范围0-9以及A-F
<script> var a=0xa; var b=0x14; console.log(a,b); </script>
1.3 科学计数法
- 对于非常大或非常小的数,我们可以用科学计数法来表示.
- e7表示10的7次方,小数点向右移动7个位置.
- e-7表示0.1的7次方,小数点向左移动7个位置.
<script>
var a=3.15e7;
var b=3.2e-4;
console.log(a); //31500000
console.log(b); //0.00032
</script>
1.4 数字中最大值和最小值
- 由于内存的限制,js中不支持表示这个世界上所有数值.js中能表示的
- 最小数保存在Number.MIN_VALUE中.
- 最大数保存在Number.MAX_VALUE中.
<script>
console.log(Number.MAX_VALUE); //最大值 1.7976931348623157e+308
console.log(Number.MIN_VALUE); //最小值 5e-324
</script>
1.5 正无穷和负无穷大
- 因为计算机内存限制,js中不支持表示这个世界上所有数值.js中能表示的
- 如果计算机的数值超过了js能表示正数范围,则会以 infinity 正无穷来表示.
- 如果计算机的数值超过了js能表示负数范围,则会以 -infinity 正无穷来表示.
<script>
console.log(Number.MAX_VALUE*2); //Infinity
console.log(-Number.MAX_VALUE*2); //-Infinity
</script>
1.6 NaN
- NaN(Not anumber) 不是一个数字
- NaN用typeof检测,得到的结果是number,说明NaN是一个数字类型
- 可以理解为NaN不是数字的数字类型
<script>
console.log(typeof NaN); // number
</script>
- 为了理解NaN不是数字的数字类型这句话,举一个生活的例子来说明.
- 比如一个人,他特别的坏,坏到了极点,那很多人就会说,这个人压根不是人,人哪有这么坏的.
- 但实际上是个人吗?他是人这个类别,但是大多人不把他当人看.
- NaN他是数字类型,但是它不能代表任何数字含义,所以它不是一个数字.
NaN的作用
- NaN表示本来要返回的数值操作失败了
- 两个数值做运算,如果操作失败了,就会返回NaN,而不是抛出错误
- 用0除任意数值在其它语言中通常会导致错误,聪儿终止代码运行
- 但是在js中不会,而是返回NaN
关于NaN的运算
- 0除以0的结果是NaN
- 在数学运算中,如果得不到数字的结果,其结果往往是NaN
- 任何数与NaN做运算,都会得到NaN,除了与字符串拼接
<script>
var a=0/0;
var b="a"-"b";
var c='我'-'你';
var d=NaN+1;
var str=NaN+'1';
console.log(a,b,c,d,str); //NaN NaN NaN NaN "NaN1"
</script>
- NaN自己不与自己相等
<script>
console.log(NaN==NaN); //false
</script>
1.7 isNaN()
- 这个函数接收一个参数,可以是任意数据类型,然后判断这个参数是否’不是数值’
- 特别注意:isNaN并不是用来判断这个参数是不是NaN这个值
- 如果参数是数值,则返回false,否则返回true.
<script>
console.log(isNaN(1)); // false 1是一个数字,所以返回false
console.log(isNaN('我')); //true '我'不是一个数字 所以返回true
console.log(isNaN(NaN)); //true NaN不是一个数字
console.log(isNaN(Infinity)); //false infinity 是数字
</script>
1.8 Number数字类型总结
相关知识点 | 说明 |
---|---|
什么是数字类型的数据 | 所有数字都是Number类型,包括整数(正负数)和浮点数(小数); |
不同进制的数字 | 二进制以0b开头 八进制以0开头 十六进制以0x开头 |
科学计数法 | 5e4 表示50000 5e-4表示0.0005 |
数字中的最大值和最小值 | 最大值 Number.MAX_VALUE 最小值 Number.MIN_VALUE |
数字型的三个特殊值 | 正无穷 Infinity 负无穷 -Infinity NaN 不是数字的数字类型 |
NaN | 不是数字的数字类型 |
isNaN | 判断一个值或变量是否为非数字的类型 不是数值 返回 true 是数值 返回 false |
2.String字符串类型
2.1 定义字符串
用英文状态下的""双引号 或 ''单引号 包裹起来值就是字符串类型的值
<script>
var a='123';
var b="123";
console.log(a,b); //123 123
console.log(typeof a,typeof b); // string string
</script>
2.2分清数字和字符串
- 数字11和字符串‘11’在语义上是不同的,前者表达一个数量,后者表达一个文本
<script>
typeof 11; // number
typeof '11'; //string
</script>
2.3 双引号和单引号嵌套
- 双引号里面可以嵌套 ''单引号 ,单引号也可以嵌套""双引号
<script>
var str1="刘宇宁,我想对你说:'你才是我最爱的人'";
var str2='刘宇宁,我想对你说:"你才是我最爱的人"';
console.log(str1);
console.log(str2);
</script>
- 但双引号里面不能直接嵌套双引号,单引号也不能直接嵌套单引号,以下是错误写法.
因为单引号或双引号,在匹配的时候,都是以就近原则来进行匹配的.
2.4 转义字符</font>
如果需要在字符串中使用特殊字符,可以用转义字符 \ 转义
转义符 | 解释说明 |
---|---|
\n | 换行符,n是newline的意思 |
\ | 反斜杠\ |
’ | '单引号 |
" | "双引号 |
\t | tab缩进 |
<script>
var str1="刘宇宁,我想对你说:\"你才是我最爱的人\"";
var str2='刘宇宁,我想对你说:\'你才是我最爱的人\'';
var str1="刘宇宁,我想对你说:\n你才是我最爱的人";
var str4='刘宇宁,我想对你说:\\你才是我最爱的人';
</script>
2.5 字符串的拼接
- +号 可以用来拼接两个或多个字符串
<script>
var x='我'+'爱'+'你';
console.log(x); //我爱你
</script>
- 字符串与任何类型拼接,得到的都是字符串
<script>
var x='1'+3; //13
var a=NaN+'1'; //NaN1
var b=Infinity+'1'; //Infinity1
console.log(x,a,b);
</script>
- 字符串与变量拼接
<script>
var a='张三';
var b='小李';
var str=a+'对'+b+'表白了';
console.log(str); //张三对小李表白了
</script>
变量不能添加引号
2.6 空字符串
空字符串,直接书写空的 ''单引号 或 ""双引号 表示空字符串
<script>
var a='';
var str="";
//要区分 var str=' ' 与 var str='' 前者是加了一个空字符,后者没有
</script>
空字符串有什么用
- 可以用来转换数据类型
<script>
var a=1;
a=a+'';
console.log(typeof a); //string
</script>
- 可以提前预设变量保存值为字符串类型,如果不设置为’',有可能会出现错误的结果
<script>
//生成任意6位数的验证码
var result='';
for (var i = 0; i<6; i++) {
/*parseInt(Math.random() *10 )生成0-9之间的正数*/
result=result+parseInt(Math.random()*10);
}
console.log(result);//生成结果为 任意0-9之间的6位数 775247
</script>
<script>
var result;
for (var i = 0; i <6; i++) {
result=result+parseInt(Math.random()*10);
}
console.log(result); //NaN
</script>
2.7 length属性
通过length属性,可以获取整个字符串的长度
<script>
var a='英文的I LOVE YOU 是什么意思!'
console.log(a.length); // 20
var str1='';
var str2=' ';
console.log(str1.length); // 0
console.log(str2.length); // 1
</script>
<script>
var str='我就是我,不一样的烟火';
console.log(str.length); // 11
</script>
2.7 总结
内容 | 描述 |
---|---|
字符串类型的定义 | 用英文状态下的""双引号 或 ''单引号 包裹起来值就是字符串类型的值 |
双引号和单引号嵌套 | " “双引号里可以嵌套’ ‘单引号,’ '单引号里也可以嵌套”“双引号 ”"双引号里不能直接嵌套双引号,’ ‘单引号里不能直接嵌套单引号’’ |
转义字符\ | 如果需要在字符串中使用特殊字符,可以用转义字符 \ 转义 |
字符串的拼接 | +号 可以用来拼接两个或多个字符串 字符串与任何类型拼接,得到的都是字符串 字符串与变量拼接 |
空字符串 | 空字符串,直接书写空的 ‘‘单引号 或 ""双引号 表示空字符串 空字符串有什么用 可以用来转换数据类型 可以提前预设变量保存值为字符串类型,如果不设置为’’,有可能会出现错误的结果 |
length属性 | 通过length属性,可以获取整个字符串的长度 |
3.BooLean类型
布尔(George-Boole) 是英国19世纪数学家以及逻辑学家
- 布尔值主要是用来做逻辑判断
- 布尔类型只有两个值:true(真)和false(假)
- 如果给true(真)和false(假) 加上""双引号或’'单引号,那就变成字符串了
<script>
//检测 true和false 的数据类型
console.log(typeof true); //boolean
console.log(typeof false); //boolean
//区分,true和false 在布尔值中是不加引号的,加了引号就变成字符串类型的值了
console.log(typeof 'true'); //string
console.log(typeof 'false'); //string
//布尔值主要用来做逻辑判断
console.log( 1>2); //false
console.log( 3>2); //true
</script>
4.null空类型
- null类型只有一个值,就是null
- null表示一个空对象指针
- 用typeof检测null的类型,得到的是 object
<script>
console.log(typeof null); //object
</script>
虽然typeof null 得到值为object,但是null是基本数据类型,这是一个历史遗留问题,如果要深究,那就只能用下面这段话来解释(以下内容来自: 你不知道的javascript上卷=103页)
- 不同的对象在底层都表示为二进制,在javascript中二进制前三位都为0的话会被判断为object类型,null的二进制表示全为0,自然前三位也为0,所以执行typeof时会返回object。
- 面试中会问到这个点,想通过这个点,看你平时学习是否会研究底层,会阅读相关JS书籍
4.1 null的作用
- 如果一个变量被声明后,将来是用来保存对象值的,那建议用null来初始化,不要使用其他值.
<script>
var obj=null; //obj赋初始值为null,表示obj是用来保存对象变量
obj={
name:'刘宇宁',
age:30
}
</script>
- 当我们需要将对象,数组,事件监听进行销毁时,我们就可以把它设置为null,只有把它们设置为null时,JS垃圾回收器才会把它们当成垃圾,进行垃圾回收。
<script type="text/javascript">
var obj=null;
obj={
name:'刘宇宁',
age:30
};
// 当我们对其赋值为null的时候,obj与堆内存中的空间关系被斩断。
// 由于对内存中的空间没有人引用,所以这块空间成了javascript中所谓的垃圾
obj=null;
</script>
什么才被称为垃圾,在我们现实生活中,你用完后不会用的,就可以当成垃圾处理掉,在JS中也是一样的,如果某些数据被判断为永远不会被应用,那就会被当成垃圾回收掉。
关于垃圾回收,目前只需要了解概念
5.undefined
- undefined类型,只有一个值,那就是undefined
- 当声明一个变量,但是并不给变量赋值时,它的值就是undefined
<script>
console.log(typeof undefined); //undefined
</script>
<script>
var a;
console.log(a); // a的值是undefined
console.log(typeof a); // 变量a的类型是undefined
</script>
我们经常在调试中或报错中会发现有些值打印是undefined,就说明这个变量定义了,没有赋值,或赋值不成功。
6. 5种基本数据类型总结
基本数据类型 | 说明 | 注意点 |
---|---|---|
number | 所有数字都是Number类型,包括整数(正负数)和浮点数(小数) | NaN(Not anumber) 不是一个数字 isNaN用来检测一个值或变量是否为非数字 |
string | 用英文状态下的""双引号 或 ''单引号 包裹起来值就是字符串类型的值 | " “双引号里可以嵌套’ ‘单引号,’ '单引号里也可以嵌套”“双引号 ”"双引号里不能直接嵌套双引号,’ ‘单引号里不能直接嵌套单引号’’ |
boolean | 布尔值主要是用来做逻辑判断 布尔类型只有两个值:true(真)和false(假) | true和false都是小写 同时不用加引号 |
undefined | undefined类型 var a;声明了变量a,没有赋值,此时变量a的值为undefined | 当控制台输出结果为undefined时,表明变量没有赋值或赋值不成功。 |
null | null类型 var obj=null; 声明了变量obj,同时赋值为null | typeof null ; 得到的结果是object 当一个变量未来是用来保存对象的值时,我们可以给他赋初始值null |
三. 数据类型转换
JavaScript是一种动态类型语言(dynamically typed language).这意味着你在声明变量时可以不必指定数据类型,而数据类型会在代码执行时会根据需要自动转换.
JS中通常会有三种方式的数据类型转换
- 其他类型 —> 数值
- 其他类型 —> 字符串
- 其他类型 —> 布尔值
1.其他类型转换为数字类型
将其他数据类型转换为数字型,有以下四种方法
函数 | 说明 | 实例 |
---|---|---|
Number()函数 强制转换1 | 将非数字类型转换为数字 | Number(‘’); //0 Number(’ '); //0 |
paresint()函数 | 将字符串转换为数字 | paresint(‘a123’); //NaN paresint(‘200px’); //200 |
parseFloat()函数 | 将字符串转换为浮点数 | parseFloat(‘3.14元’); //3.14 parseFloat(‘圆周率3.14’); //NaN |
(+ - * /)js隐式转换 | 利用算术运算隐式转换为数字型 |
1.1 Number()函数
Number()函数,用来将非数字类型转换为数字
字符串转数字
- 只有: ’ '空字符串,字符串中有前后包含空格,纯数字类字符串,2进制或16进制表示的数字,科学计数表示法能转换成数字,其他都转换成NaN.
- 以上规则,只针对基本数据类型而言
- Number([])函数 结果是0
- Number(())函数 结果是NaN
<script>
Number('12.3'); //12,3
Number('-12'); //-12
Number('2e3'); //2000
Number('0b11'); //3
Number('0110'); //110
Number('0x14'); //20
Number('ab'); //NaN
Number('2023年'); //NaN
Number(''); //0
Number(' '); //0
</script>
boolean转换为数字
<script>
Number(true); //1
Number(false); //0
</script>
null和undefined转换为数字
<script>
Number(null); //0
Number(undefined); //NaN
</script>
1.2 parselnt(函数)
parselnt(函数),主要是将字符串类型转换成整数数字
转换规则
- 从第一个非空字符开始转换,如果第一个字符不是数值,加号+或者减号-,parselnt立即返回NaN
- 这就意味着空字符串也会返回NaN
- 如果第一个非空字符是数值,加号+或者减号-,则继续检测,直到字符串末尾,或碰不到非数值字符,就停止.
<script>
parseInt(' 78.3'); //78
parseInt('a12'); //NaN
parseInt(' '); //NaN
parseInt(' -12.4'); //-12
parseInt('-123.4'); //-123
parseInt('ab123'); //NaN
parseInt('2021年'); //2021
parseInt('true'); //NaN
parseInt('200px'); //200
</script>
- parselnt(函数)不能识别二进制,八进制,但是它可以识别十六进制
<script>
parseInt('0b10'); //0
parseInt('0110'); //110
parseInt('0x14'); //20
parseInt('0x14年'); //20
</script>
- parselnt(函数),还有第二个参数,可以指定以什么进制数来转换
<script>
parseInt('10',2); //2
parseInt('10',8); 8
parseInt('10',10); //10
parseInt('10',16); //16
parseInt('10年',2);//2
parseInt('10年',8); //8
parseInt('10年',10); //10
parseInt('10年',16); //16
</script>
1.3 parseFloat(函数)
- 他的转换原则和parselnt(函数)一样,唯一两点区别在于
- parseFloat(函数),主要是将字符串类型转换为浮点数
<script>
parseFloat(''); //NaN
parseFloat('3.14'); //3.14
parseFloat('3.2.32'); //3.2
parseFloat('3.14元'); //3.14
parseFloat('圆周率3.14'); //NaN
</script>
- parseFloat(函数),它不能识别进制数
<script>
parseFloat('0b10'); //0
parseFloat('0110'); //110
parseFloat('0x14'); //0
</script>
1.4 JS隐式转换 (+ - * /)
- 利用算术运算隐式将其他类型转换为数字型
- 在单个字符串前面加上+号,可以将字符串转成数字,多个字符串,是字符串拼接
typeof +'1'; // number
更多内容在以后讲表达式和操作符再说
2. 其他类型转换成字符串
将其他数据类型转换成字符串类型,有以下3种方式
方法或函数 | 说明 | 实例 |
---|---|---|
String()函数 强制转换 | 其他类型转换成字符串 | String(0b10); //“2” String(NaN); // “NaN” |
toString()方法 | 数字和boolean类型转换为字符串 | 0b10.toString(); // “2” NaN.toString(); // “NaN” |
+ ‘’ 空字符串拼接 | 所有类型与 ‘’ 空字符串拼接得到的都是字符串类型 | typeof(1+“”); //“string” |
以上方法或函数,将任何类型转换为字符串,都会转换成长得相同的字符串,除了科学计数法和非10进制数字会将其转换为10进制值的字符串。
2.1 String()函数
- 数字转换成字符串
<script>
String(123); //"123"
String('2.14');//"2.14"
String('2e4'); //"2e4"
String('0b10'); //“0b10"
String('null'); //"null"
String('Infinity'); //"Infinity"
</script>
- 布尔值转换为字符串
<script>
String(true); //"true"
String(false); //"false"
</script>
- undefined和null转换为字符串
<script>
String(undefined); //"undefined"
String(null); //"null"
</script>
2.2 toString() 方法
- 数字转换为字符串
<script>
(123).toString(); // "123"
2e4.toString(); // "20000"
0b10.toString(); // "2"
NaN.toString(); // "NaN"
Infinity.toString(); // "Infinity"
</script>
- boolean类型转换为字符串
<script>
true.toString(); // "true"
false.toString(); //"false"
</script>
注意事项:
null和undefined 没有toString()这个方法
2.3 + ''空字符串
<script>
true+''; // "true"
false+''; // "false"
NaN+''; //"NaN"
0+''; //‘0’
0b10+''; // ‘2’
</script>
3. 其他类型转换成boolean布尔类型
其他数据类型转换成boolean布尔类型只有一种方法,那就是通过boolean()函数来实现
函数 | 说明 | 实例 |
---|---|---|
boolean()函数 | 其他数据类型转换成boolean布尔类型 | Boolean(‘’); // false |
3.1 boolean() 函数
转换原则:
- 代表空,否定的值会被转换为false,如:‘’,0,NaN,null,undefined
- 除了上面列出的5个值,其他值字都转换成true
字符串转换为布尔类型
<script>
Boolean(''); // false
Boolean(' '); //true
Boolean('NaN'); // true
Boolean('false'); // true
</script>
数字类型转换成布尔类型
<script>
Boolean(NaN); // false
Boolean(0); // false
Boolean(Infinity); //true
</script>
null和undefined转换成布尔类型值
<script>
Boolean(null);
Boolean(undefined);
</script>
4.数据类型转换总结
4.1 其他类型转数据
-
其他类型转换成数字,由种方式:Number()函数,parselnt(函数),parseFloat(函数),JS隐式转换 (+ - * /)
-
Number()函数,可以将所有类型转换成数字,转换原则:
- ’ '空字符串,字符串中只包含空格,纯数字类字符串,2进制或16进制表示的数字,科学计数表示法能转换成数字,其他都转换成NaN.
-
parselnt(函数),parseFloat(函数),只能将字符串类型转换成整数数字,转换原则:
- 从第一个非空字符开始转换,如果第一个字符不是数值,加号+或者减号-,parselnt立即返回NaN
- 如果第一个非空字符是数值,加号+或者减号-,则继续检测,直到字符串末尾,或碰不到非数值字符,就停止.
- parselnt(函数),主要是将字符串类型转换成整数数字。而parseFloat(函数),主要是将字符串类型转换为浮点数。
4.2 其他类型转字符串
- 将任何类型转换为字符串,都会转换成长得相同的字符串,除了科学计数法和非10进制数字会将其转换为10进制值的字符串。
- 将其他数据类型转换成字符串类型,有以下3种方式:String()函数,toString()方法 ,+ ‘’ 空字符串拼接。
- null和undefined 没有toString()这个方法
4.3 其他类型转布尔值
- 利用boolean()函数来实现其他数据类型转换成boolean布尔类型
- 代表空,否定的值会被转换为false,如:‘’,0,NaN,null,undefined,其他值均为true
4.4 常见的类型转换
原始值 | 转换为 数字 | 转换为 字符串 | 转换为 布尔值 |
---|---|---|---|
false | 0 | “false” | false |
true | 1 | “true” | true |
0 | 0 | “0” | false |
“0” | 0 | “0” | true |
‘’ | 0 | ‘’ | false |
’ ’ | 0 | ’ ’ | true |
“30” | 30 | “30” | true |
null | 0 | “null” | false |
undefined | NaN | “undefined” | false |
NaN | NaN | “NaN” | false |
Infinity | Infinity | “Infinity” | true |
四 本章重难点
1.重点内容
1.1 JavaScript中有哪些基本数据类型值?它们的typeof检测结果是什么?
7种 | 类型名 | typeof检测结果 | 事例 |
---|---|---|---|
基本类型值 | Number数字类型 | number | 6 |
基本类型值 | String数字类型 | string | 做自己的光 |
基本类型值 | Boolean布尔类型 | boolean | true/false |
基本类型值 | undefined | undefined | undefined |
基本类型值 | null类型 | object | null |
基本类型值 | Symbol类型 | symbol | var a= Symbol(“唯一性”)‘ |
基本类型值 | BigInt任意精度的整数 | bigInt | var a=BigInt(10); |
1.2 字符串与变量拼接,如何处理?
<script>
var age=10;
var str='大家好,我今年'+age+'岁了'; //大家好,我今年10岁了
console.log(str);
</script>
1.3 说出NaN,null,undefined三个值的特殊点?
-
NaN
- NaN不是一个数字
- typeof检测NaN,得到的是number,也就是NaN是数字类型
- 一些数字运算产生不了的结果会得到NaN,但不会报错。如:‘我’-'你’得到NaN
-
undefined
- 当声明一个变量,但没有被赋值时,其默认值是undefined
- undefined的数据类型就是undefined
- undefined类型只有一个值,就是undefined
- undefined转换成数字为NaN,转换成字符串是‘undefined’,转换成boolean类型为false
- undefined没有toString()这个方法,转字符串只能调用String()函数转
-
null
- null类型只有一个值,就是null
- null表示一个空对象指针
- 用typeof检测值为object
- 它通常在编程的时候用于销毁一些数据,如:销毁数组,对象,事件监听等
1.4 isNaN的用法?
- 这个函数接收一个参数,可以是任意数据类型,然后判断这个参数是否’不是数值’.
- 特别注意:isNaN并不是用来判断这个参数是不是NaN这个值.
- 如果参数是数值,则返回false,否则返回true.
1.5 各种类型的值相互转换的方法和转换规律
答案:(参考上面的4,数据类型转换总结)
2.难点内容
2.1 猜猜一下表达式结果
<script>
parseInt('2.3' + '3.5'); // 2
Boolean('false'); //true
0/0 // NaN
2/0 //Infinity
</script>
五 综合案例
1.简单计算器
需求分析:
- 当用户在浏览器·打开页面时,弹出一输入框,要求用户输入数字,用户确认后,再弹出一输入框,再输入一个数字,确认后,最后弹出两次输入的数字之和。
代码实现思路
使用prompt()函数弹出输入框,让用户输入两个数字
- 对用户输入两个数字进行加法运算,而由于用户输入的内容是字符串类型,所以必须先转为数字类型,才能做加法运算。
- 最后用alert()显示结果
- 程序虽小,却体现了普遍计算机程序的执行步骤:用户输入—>计算机处理—>显示结果
<script>
//用户输入两个数字
// var a = prompt('请输入第一个数字');
// var b = prompt('请输入第二个数字');
var a = Number(prompt('请输入第一个数字'));
var b = Number(prompt('请输入第二个数字'));
// 计算两个数字的和
var sum = a + b;
//弹出结果
//alert(sum);
alert('数字'+a+'加上数字'+b+"的和是:"+sum);
</script>
六. 扩展知识
1.Javascript为何称为弱类型的动态脚本语言
在前面我们一直说,Javascript是一种运行在客户端的脚本语言(Script是脚本的意思)。
本质上Javascript是一种弱类型的动态脚本语言。接下来我们分别来解释下,何为弱类型,何为动态,何为脚本语言。
1.1何为动态语言和静态语言
- 在声明变量时,不需要确定变量类型的语言,称为动态语言。比如:JavaScript,Python,Ruby,PHP等
- 在声明变量时,需要就需要确定变量类型的语言,称为静态语言。比如:Java,C,C++,C#.
我们来看下面两段代码,一个是JS代码,一个是Java代码
<script>
//JS代码
var a=2;
typeof a; // number
a='做自己的光'; typeof a; //string
</script>
-
JS在声明变量声明时,并不需要确定变量的类型,其类型是在代码执行的过程中,由于变量对应值的类型来动态决定的,所以JS在执行过程中,需要检查数据的类型。
//Java中变量定义 int a = 1; float b = 1.68; string c = '做自己的光'; boolean = true;
-
Java在声明变量时,就需要确定好变量的类型。
1.2 何为弱类型语言和强类型语言
- 支持隐式类型转换的语言,称为弱类型语言
- 不支持隐式类型转换的语言,成为强类型语言
var a='4';
var b=1;
console.log(a-b); //3
- 刚开始,变量a的类型为number数字类型,当代码执行到a=‘做自己的光’时,JS内部自动把变量a的类型悄悄的转换成了string字符串类型的。这种自动把数据类型进行转换操作称为隐式类型转换。
弱类型语言: C,C++,JavaScript,PHP,VB,Perl
强类型语言: Java,C#,Python,Ruby
1.3 何为脚本语言
- 所谓脚本语言,是指不需要提前编译,而是在运行过程中边编译,边执行。
- 而JS本质上是在运行过程中边编译,边执行的,JS是由JS解释器(JS引擎)来逐步进行解释和执行的
- 所以JS也被称为解释型语言
大部分后台语言都是编译型语言,也就是要先编译再执行,而js是解释型语言,边编译边执行。
我们来举个例子,区分下,何为编译性语言,何为解释性语言。
比如现在你有一个英文稿子要解释,
- 如果是编译型,那就是找个翻译人员把这个稿子先全部翻译完成,然后再拿着翻译稿来学习。
- 如果是解释型语言,就是找个翻译在旁边读一句英语,给你翻译一句。
所以编译性是一开始慢,后面快,而解释是刚开始快,但过程中是慢的。
什么是JS解释器
要理解什么是解释器,就需要我们了解浏览器的两大组成部分:渲染引擎和js引擎。
- 渲染引擎用来解析HTML与css,俗称内核,比如Chome浏览器的blink。老版本的webkit。
- Js以前也称为js解释器,用来读取网页中的JavaScript代码,对其处理后运行。比如chrome浏览器的V8引擎。
浏览器本身并不会执行js代码,而是通过内置JavaScript解释器来编译和执行js代码,js引擎执行代码时,逐行解释每一句源码(转化为机器语言),然后由计算机去执行。
如果你理解了何为动态语言和为弱类型语言,何为脚本语言,你就明白为什么js称为弱类型的动态脚本语言,因为js同时具备这三种特性。
68;
string c = ‘做自己的光’;
boolean = true;
* Java在声明变量时,就需要确定好变量的类型。
#### <font size=4>1.2 何为弱类型语言和强类型语言</font>
* 支持隐式类型转换的语言,称为弱类型语言
* 不支持隐式类型转换的语言,成为强类型语言
```js
var a='4';
var b=1;
console.log(a-b); //3
- 刚开始,变量a的类型为number数字类型,当代码执行到a=‘做自己的光’时,JS内部自动把变量a的类型悄悄的转换成了string字符串类型的。这种自动把数据类型进行转换操作称为隐式类型转换。
弱类型语言: C,C++,JavaScript,PHP,VB,Perl
强类型语言: Java,C#,Python,Ruby
1.3 何为脚本语言
- 所谓脚本语言,是指不需要提前编译,而是在运行过程中边编译,边执行。
- 而JS本质上是在运行过程中边编译,边执行的,JS是由JS解释器(JS引擎)来逐步进行解释和执行的
- 所以JS也被称为解释型语言
大部分后台语言都是编译型语言,也就是要先编译再执行,而js是解释型语言,边编译边执行。
我们来举个例子,区分下,何为编译性语言,何为解释性语言。
比如现在你有一个英文稿子要解释,
- 如果是编译型,那就是找个翻译人员把这个稿子先全部翻译完成,然后再拿着翻译稿来学习。
- 如果是解释型语言,就是找个翻译在旁边读一句英语,给你翻译一句。
所以编译性是一开始慢,后面快,而解释是刚开始快,但过程中是慢的。
什么是JS解释器
要理解什么是解释器,就需要我们了解浏览器的两大组成部分:渲染引擎和js引擎。
- 渲染引擎用来解析HTML与css,俗称内核,比如Chome浏览器的blink。老版本的webkit。
- Js以前也称为js解释器,用来读取网页中的JavaScript代码,对其处理后运行。比如chrome浏览器的V8引擎。
浏览器本身并不会执行js代码,而是通过内置JavaScript解释器来编译和执行js代码,js引擎执行代码时,逐行解释每一句源码(转化为机器语言),然后由计算机去执行。
如果你理解了何为动态语言和为弱类型语言,何为脚本语言,你就明白为什么js称为弱类型的动态脚本语言,因为js同时具备这三种特性。