第二章数据类型和类型转换

第二章:数据类型和类型转换

一 ,数据类型简介和检测

从四个方面入手:

• 为什么需要数据类型
• 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>

1. 为了理解NaN不是数字的数字类型这句话,举一个生活的例子来说明.
2. 比如一个人,他特别的坏,坏到了极点,那很多人就会说,这个人压根不是人,人哪有这么坏的.
3. 但实际上是个人吗?他是人这个类别,但是大多人不把他当人看.
4. 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同时具备这三种特性。