JavaScript基本数据类型

数据类型简介和检测#

JavaScript中两大类数据类型

• 基本数据类型：Number、String、Boolean、 Undefined和Null
• 复杂数据类型：Object、Array、Function、 RegExp、Date、Map、Set、 Symbol等等

typeof运算符

1
typeof 5; // number
2
typeof '慕课网'; // string
3
var a = 12;
4
var b =
5
'慕课网';
6
console.log(typeof a); // number
7
console.log(typeof b); // string

5种基本数据类型的typeof检测结果：

Number（数字）类型#

• 所有数字不分大小、不分整浮、不分正负，都是数字类型

  1
  typeof 925; //number
  2
  typeof 3.13; //number
  3
  typeof -6; //number

小数中0可以省略

• 介于0和1之间的小数，可以不书写0

  1
  .5; //0.5
  2
  typeof .5; //number

科学计数法

• 较大数或较小数（绝对值较小）可以写成科学计数法

  1
  3e8; //300000000
  2
  typeof 3e8; //number
  3
  3e-4; //0.0003
  4
  typeof 3e-8; //number

不同进制的数字

• 二进制数值以0b开头

  1
  0b10 // 2
  2
  0b1111 // 15

• 八进制数值以0开头

  1
  017 // 15

• 十六进制数字以0x开头

  1
  0xf // 15

一个特殊的数字型值NaN

• NaN是英语“not a number”的意思，即“不是一个数”，但它 是一个数字类型的值

  1
  typeof NaN; //number

• 0除以0的结果是NaN，事实上，在数学运算中，若结果不能得到数 字，其结果往往都是NaN

• NaN有一个“奇怪”的性质：不自等。这个知识点将在后续课程中 讲解

String（字符串）类型#

• 字符串就是“人类的自然语言”

• 字符串要用引号包裹，双引号或者单引号均可

  1
  typeof "慕课网"; // string
  2
  typeof '慕课网'; // string

分清数字和字符串

• 数字11和字符串’11’在语义上是不同的，前者表达一个数量， 后者是一个文本

  1
  typeof 11; //number
  2
  typeof '11'; //string

字符串的拼接

• 加号可以用来拼接多个字符串

  1
  'imo' + 'oc' // 'immoc'

字符串和变量的拼接

• 要将一个变量的值“插入”到字符串中，要“斩断链接”

  1
  var year = 2022;
  2
  var str ='北京冬季奥运会在' + year + '年召开';

• 新版ES中增加了反引号表示法，可以更方便进行变量插值，后续 将进行介绍

空字符串

• 一些时候需要使用空字符串，直接书写闭合的引号对即可

  1
  var str ='';

字符串的length属性

• 字符串的length 属性表示字符串的长度

  1
  '我喜欢JS'.length // 5
  2
  '我喜欢JS，我也喜欢HTML'.length // 14
  3
  ''.length // 0

字符串的常用方法

• “方法”就是能够打点调用的函数，字符串有丰富的方法

  方法	功能
  charAt()	得到指定位置的字符
  substring()	提取子串
  substr()	提取子串
  slice()	提取子串
  toUpperCase()	将字符串转换为大写
  toLowerCase()	将字符串转换为小写
  indexOf()	检索字符串，返回指定内容首次出现的位置

charAt()方法

• charAt()方法可以得到指定位置的字符

  1
  '我喜欢JS，我也喜欢HTML'.charAt(0) // '我'
  2
  '我喜欢JS，我也喜欢HTML'.charAt(11) // 'T'
  3
  '我喜欢JS，我也喜欢HTML'.charAt(74) // ''

substring()、substr()和slice()

• substring(a, b) 方法得到从a开始到b结束（不包括b处）的子串

  1
  '我喜欢JS，我也喜欢HTML'.substring(3, 5) // 'JS'
  2
  '我喜欢JS，我也喜欢HTML'.substring(10, 14) // 'HTML'

• substring(a, b) 方法如果省略第二个参数，返回的子串会一直到字符串 的结尾

  1
  '我喜欢JS，我也喜欢HTML'.substring(6) // '我也喜欢HTML'

• substring(a, b) 中，a可以大于b，数字顺序将自动调整为小数在前

  1
  '我喜欢JS，我也喜欢HTML'.substring(5, 3) // 'JS'

• substr (a, b)中，将得到从a开始的长度为b的子串

  1
  '我喜欢JS，我也喜欢HTML'.substr(3, 2) // 'JS'

• substr(a, b)中，b可以省略，表示到字符串结尾

  1
  '我喜欢JS，我也喜欢HTML'.substr(3) // 'JS，我也喜欢HTML

• substr (a, b)中，a可以是负数，表示倒数位置

  1
  '我喜欢JS，我也喜欢HTML'.substr(-4, 2) // HT'

• slice(a, b)方法得到从a开始到b结束（不包括b处）的子串

  1
  '我喜欢JS，我也喜欢HTML'.slice(3, 5) // 'JS'

• slice(a, b)的参数a可以是负数

  1
  '我喜欢JS，我也喜欢HTML'.slice(-4, -1) // 'HTM'

• slice(a, b)中，参数a必须小于参数b

  1
  '我喜欢JS，我也喜欢HTML'.slice(5, 2) // ''

对比总结

• substring(a, b)和slice(a, b)功能基本一致，都是得到从a开始到b 结束（不包括b）的子串，区别：

  ① substring()可以自动交换两个参数位置，而slice()不行；

  ②slice()的参数a可以是负数，而substring()不行。

• substr(a, b)中参数b是子串长度，而不是位置编号

toUpperCase()和toLowerCase()

• toUpperCase() 转为大写

• toLowerCase() 转为小写

  1
  'i love you'.toUpperCase(); // 'I LOVE YOU'
  2
  'IMOOC'.toLowerCase(); // 'imooc'

indexOf()

• indexOf()方法返回某个指定的字符串值在字符串中首次出现的位置

• 如果要检索的字符串值没有出现，则该返回 -1

  1
  'abcdeb'.indexOf('b') // 1
  2
  'abcdeb'.indexOf('de') // 3
  3
  'abcdeb'.indexOf('m') // -1

Boolean（布尔）类型#

• 布尔（Boole·George）英国19世纪数学家及逻 辑学家。

• 布尔型值只有两个：true和false，分别表示真和 假

  1
  typeof true; //boolean
  2
  typeof false; //boolean

Undefined类型#

undefined是什么

• 一个没有被赋值的变量的默认值是undefined，而undefined 的类型也是undefined

• 即：undefined又是值，又是一种类型，这种类型只有它自己 一个值

  1
  typeof undefined; //undefined

变量声明提升的情况

• 在变量声明提升时，变量的值也是undefined。

Null类型#

null类型是什么

• null表示“空”，它是“空对象”
• 当我们需要将对象销毁、数组销毁或者删除事件监听时，通常将 它们设置为null。

用typeof检测null结果是object

• 使用typeof检测null值，结果是object，这点尤其要注意
• 类型和typeof检测结果并不总是一一对应，比如数组用 typeof检测结果也是object

数据类型转换#

其他值 → 数字

使用Number()函数：

字符串 → 数字：纯数字字符串能变为数字，不 是纯数字的字符串将转为NaN

1
Number('123'); // 123
2
Number('123.4'); // 123.4
3
Number('123年'); // NaN
4
Number('2e3'); // 2000
5
Number(''); // 0

布尔值 → 数字：true变为1，false变为0

1
Number(true); // 1
2
Number(false); //

undefined和null → 数字：undefined变为NaN null变为0

1
Number(undefined); // NaN
2
Number(null); // 0

使用parseInt() 函数：

parseInt()函数的功能是将字符串转为整数

1
parseInt('3.14'); // 3  parseInt()将自动截掉第一个非数字字符之后的所有字符
2
parseInt('3.14是圆周率'); // 3 所有文字都将被截掉
3
parseInt('圆周率是3.14'); // NaN  如果字符串不是以数字开头，则转为NaN
4
parseInt('3.99'); // 3 parseInt()函数不四舍五入

使用parseFloat() 函数

parseFloat()函数的功能是将字符串转为浮点数

1
parseFloat('3.14'); // 3.14 parseFloat()可以将小数字符串转为数字小数
2
parseFloat('3.14是圆周率'); // 3.14 parseFloat()将自动截掉第一个非数字字符、非小数点之后的所有字符
3
parseFloat('圆周率是3.14'); // NaN  如果字符串并不是以数字开头，则转为NaN
4
parseFloat('3.99'); // 3.99  不四舍五入

其他值 → 字符串

使用String()函数：

数字 → 字符串：变为“长得相同”的字符串。 科学计数法和非10进制数字会 转为10进制的值。

1
String(123); // '123'
2
String(123.4); // '123.4'
3
String(2e3); // '2000'
4
String(NaN); // 'NaN'
5
String(Infinity); // 'Infinity'
6
String(0xf); // '15'

布尔值 → 字符串：变为“长得相同”的字符串

1
String(true); // 'true'
2
String(false); // 'false'

undefined和null → 字符串：变为“长得相同”的字符串

1
String(undefined); // 'undefined'
2
String(null); // 'null'

使用toString()方法：

几乎所有值都有toString()方法，功能是将值转为字符串

其他值 → 布尔值

使用Boolean ()函数

数字 → 布尔值：0和NaN转为false，其他数字 都转为true

1
Boolean(123); // true
2
Boolean(0); // false
3
Boolean(NaN); // false
4
Boolean(Infinity); // true
5
Boolean(-Infinity); // true

布尔值 → 布尔值：空字符串变为false，其他都转 为true

1
Boolean(''); // false
2
Boolean('abc'); // true
3
Boolean('false'); // true

undefined和null → 布尔值：转为false

1
Boolean(undefined); // false
2
Boolean(null); // false