JavaScript基本数据类型

上述一章我们讲到JS数据类型分为基本数据类型与引用数据类型，这张我们主要讲基本数据类型

基本数据类型-String字符串

字符串是我们开发中经常使用的一种数据类型, 主要是双引号 "" 或者单引号 ''

注意事项

1. 单引号与双引号不能混用， 必须配对使用
2. 同类引号不能嵌套：双引号里不能再放双引号，单引号里不能再放单引号。
3. 单引号里可以嵌套双引号；双引号里可以嵌套单引号。

转义字符

在字符串中我们可以使用\作为转义字符。如果你想表示一些特殊符号，可以使用\进行转义。

• \' 表示 ' 单引号
• \" 表示 " 双引号
• \\ 表示\
• \r 表示回车
• \n 表示换行。n 的意思是 newline。
• \t 表示缩进。t 的意思是 tab，制表符。
• \b 表示空格。b 的意思是 blank。

字符串属性与方法

字符串长度

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

var str="I'm 'dany'"
console.log(str.length)  //10

由此可见，字符串的 length 属性，在判断字符串的长度时，会认为：

• 一个中文算一个字符，一个英文算一个字符
• 一个标点符号（包括中文标点、英文标点）算一个字符
• 一个空格算一个字符

字符串拼接

使用+进行拼接

多个字符串之间可以使用加号 + 进行拼接。

拼接规则：拼接前，会把与字符串相加的这个数据类型转成字符串，然后再拼接成一个新的字符串。

字符串 + 任意数据类型 = 拼接之后的新字符串;
var str1 = 'hello' + 'world';
var str2 = 'hello' + 3.14;
var str3 = 'hello' + true;
var str4 = 'hello' + null;
var str5 = 'hello' + undefined;

var obj = { name: 'hello', age: 28 };
var str6 = 'hello' + obj;

console.log(str1);  // helloworld
console.log(str2);  // hello3.14 
console.log(str3);  //hellotrue 
console.log(str4);  // hellonull
console.log(str5);  // helloundefined
console.log(str6);  //hello[object Object]

模块字符串

ES6 中引入了模板字符串，让我们省去了字符串拼接的烦恼。下面一起来看看它的特性。

在模板字符串中插入变量

以前，让字符串进行拼接的时候，是这样做的：（传统写法的字符串拼接）

var name = 'tom';
var age = '26';
console.log('name:' + name + ',age:' + age); //传统写法

这种写法，比较繁琐，而且容易出错。

现在，有了 ES6 语法，字符串拼接可以这样写：

var name = 'tom';
var age = '26';

console.log('我是' + name + ',age:' + age); //传统写法
console.log(`我是${name},age:${age}`); //ES6 写法。注意语法格式

注意，上方代码中，倒数第二行用的符号是单引号，最后一行用的符号是反引号（在 tab 键的上方）。

在模板字符串中插入表达式

var a = 10;
var b = 5;
console.log(`this is ${a+b}`) // 15

基本数据类型-Boolean

布尔型有两个值：true 和 false。主要用来做逻辑判断： true 表示真，false 表示假。布尔值直接使用就可以了，千万不要加引号。

布尔型和数字型相加时， true 按 1 来算 ，false 按 0 来算。

基本数据类型-Number

在 JS 中，只要是数，就是 Number 数值型的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是 Number 类型的。包括接下来要讲的Infinity、-Infinity、NaN 等特殊数值也是 Number 类型的。

数值范围

ECMAScript 并不能表示世界上所有的数值。

//最大正数值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
console.log(Number.MAX_VALUE) //1.7976931348623157e+308
//最小正数值：Number.MIN_VALUE，这个值为： 5e-324 ，或者 2的负1074 次方。它是能够在浮点精度范围内表示的最小正数（不是最小负数）。小于这个数的正数会被转成0。
console.log(Number.MIN_VALUE) //5e-324

如果使用 Number 表示的变量超过了最大值，则会返回 Infinity。

• Infinity：无穷大（正无穷）。比如 1/0 的值就是无穷大。
• -Infinity：无穷小（负无穷）

注意：typeof Infinity的返回结果是 number。

NaN

NaN：是一个特殊的数字，表示 Not a Number，非数值。在进行数值运算时，如果得不到正常结果，就会返回 NaN。

注意事项：

1. typeof NaN的返回结果是 number。
2. Undefined 和任何数值计算的结果为 NaN。NaN 与任何值都不相等，包括 NaN 本身。
3. 关于 isNaN() 函数，可以看后续要将的内容——数据类型转换。

隐式转换

看如下这个例子

var a = 23;
var b = "10"
console.log(a+b) // 2310   在变量中加入字符串进行拼接，可以被同化为字符串。
console.log(a-b) // 13    也就是说，-、*、/、%这几个符号会自动进行隐式转换
console.log(a/b) // 2.3

其他进制数字

数字不仅有10进制，也有其他进制。

• 16 进制的数字，以0x开头
• 8 进制的数字，以0开头
• 2 进制的数字，0b开头（不是所有的浏览器都支持：chrome 和火狐支持，IE 不支持）

浮点数的运算

在 JS 中，整数的运算基本可以保证精确；但是小数的运算，可能会得到一个不精确的结果。所以，千万不要使用 JS 进行对精确度要求比较高的运算。

如下：

var c = 3.14 + 0.2
console.log(c) // 3.3400000000000003

这是因为，计算机在做运算时，所有的运算都要转换成二进制去计算。然而，有些数字转换成二进制之后，无法精确表示。比如说，0.1 和 0.2 转换成二进制之后，是无穷的，因此存在浮点数的计算不精确的问题。

基本数据类型-undefined

Undefined 类型的值只有一个，就是 undefind。比如 var a = undefined。

使用 typeof 检查一个 undefined 值时，会返回 undefined。undefined 的出现有以下几种情况。

1. 变量已声明，未赋值（未初始化）

   var name;
   console.log(name)  //undefined
   console.log(typeof(name))  //undefined
   

   注意事项：

   1、不要显式地将变量赋值为 undefined，不太规范。

   2、变量在定义时，尽量做一下初始化（赋值操作），而不是只声明一个变量。上面的写法 1 就是属于只声明一个变量，也不太推荐这种写法。

   如果变量刚开始没有值，我们可以将其赋一个默认值（空字符串、false、0、null 等值），这有利于代码书写的语义化

2. 变量未声明

   console.log(typeof(name)) 
   

3. 函数无返回值时

   如果一个函数没有返回值，那么，这个函数的返回值就是 undefined。

   或者，也可以这样理解：在定义一个函数时，如果末尾没有 return 语句，那么，其实就是 return undefined。

   function foo() {}
   
   console.log(foo()); // 打印结果：undefined
   

4. 调用函数时，未传参

调用函数时，如果没有传实参，那么，对应形参的值就是 undefined。

举例：

function foo(name) {
    console.log(name);
}

foo(); // 调用函数时，未传参。执行函数后的打印结果：undefined

实际开发中，如果调用函数时没有传参，我们可以根据需要给形参设置一个默认值：

function foo(name) {
    name = name || 'qianguyihao';
}
foo();

等学习了 ES6 之后，上方代码也可以这样写：

function foo(name = 'qianguyihao') {}

foo();

基本数据类型-Null

Null 类型的值只有一个，就是 null。比如 var a = null。

null 专门用来定义一个空对象。例如：let a = null，又例如 Object.create(null)。

如果你想定义一个变量用来保存引用类型（也就是对象），但是还不确定放什么内容，这个时候，可以在初始化时将其赋值为 null。

从语义上讲，null表示一个空对象，所以使用 typeof 检查一个 null 值时，会返回 object

undefined 实际上是由 null 衍生出来的，所以null == undefined的结果为 true。

但是 null === undefined 的结果是 false。它们虽然相似，但还是有区别的，其中一个区别是，和数字运算时：

• 10 + null 结果为 10。
• 10 + undefined 结果为 NaN。

规律总结：

• 任何值和 null 运算，null 可看做 0 运算。
• 任何数据类型和 undefined 运算都是 NaN。

数据类型转换

string转化

变量的数据类型转换：将一种数据类型转换为另外一种数据类型。

如果你需要在不同的数据类型之间进行某些操作，那就需要用到数据类型转换。比如：

• 将字符串类型转为数字类型。
• 将数字和字符串做减法操作。
• 判断非 Boolean类型的值，是真还是假。

通常有三种形式的数据类型转换：

• 转换为字符串类型
• 转换为数字型
• 转换为布尔型

类型转换分为两种：显式类型转换、隐式类型转换。

显示类型转换

显式类型转换：手动将某种数据类型，强制转换为另一种数据类型。也就是说，通过调用特定函数或运算符显式地将一个数据类型转换为另一个数据类型。

常见的显示类型转换方法，有这几种：

• toString()
• String()
• Number()
• parseInt(string)
• parseFloat(string)
• Boolean()

toString()

变量.toString();
常量.toString(); // 这里的常量，不要直接写数字，但可以是其它常量；
//该方法不会影响到原变量，它会将转换的结果返回。当然我们还可以直接写成a = a.toString()，这样的话，就是直接修改原变量。

// base data
var a1 = 'hello';
var a2 = 5;
var a3 = true;

// 
var a4 = [1, 2, 3];
var a5 = { name: 'tom', age: 18 };

// undefined ? null
var a6 = null;
var a7 = undefined;

console.log(a1.toString()); // "hello"
console.log(a2.toString()); // "5"
console.log(a3.toString()); // "true"
console.log(a4.toString()); // "1,2,3"
console.log(a5.toString()); // [object Object]

console.log(a6.toString()); // ??:Uncaught TypeError: Cannot read properties of undefined'
console.log(a7.toString()); // ??:Uncaught TypeError: Cannot read properties of null

多数情况下，toString()不接收任何参数；当然也有例外：Number 类型的变量，在调用 toString()时，可以在方法中传递一个整数作为参数。此时它会把数字转换为指定的进制，如果不指定则默认转换为 10 进制

String()

String(变量/常量);

该方法不会影响到原数值，它会将转换的结果返回。

使用 String()函数做强制类型转换时：

• 对于 Number、Boolean、String、Object 而言，本质上就是调用 toString()方法，返回结果同 toString()方法。
• 但是对于 null 和 undefined，则不会调用 toString() 方法。它会，将 undefined 直接转换为 “undefined”，将 null 直接转换为 “null”。

使用String()函数转为字符串的规则如下：

原始值	转换后的值
布尔值：true、false	字符串：‘true’、‘false’
数字	字符串
undefined	字符串：‘undefined’
null	字符串：‘null’
对象	字符串：‘object’

隐式类型转换

隐式类型转换：这是JS在运行时会自动执行的一种类型转换，不需要明确的代码指示。JS 在某些情况下会隐式地将一个数据类型转换为另一个数据类型，以完成某些操作或比较。

常见的隐式类型转换，包括下面这几种：

• isNaN() 函数
• 自增/自减运算符：++、—-
• 运算符：正号+a、负号-a
• 运算符：加号+
• 运算符：-、*、/、%
• 比较运算符：<、>、 <=、 >=、==等。比较运算符的运算结果都是布尔值：要么是 true，要么是 false。
• 逻辑运算符：&&、||、! 。非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算。&&、||的运算结果是原值，!的运算结果为布尔值。

重点：隐式类型转换，内部调用的都是显式类型转换的方法。

Number转化

Number()

var result = Number(变量/常量);

使用 Number() 函数转为数字的规则如下：

原始值	转换后的值
字符串	（1）字符串去掉首尾空格后，剩余字符串的内容如果是纯数字，则直接将其转换为数字。 （2）如果字符串是一个空串或者是一个全是空格的字符串，则转换为 0。 （3）字符串去掉首尾空格后，剩余字符串包的内容只要含了其他非数字的内容（小数点按数字来算），则转换为 NaN。怎么理解这里的 NaN 呢？可以这样理解，使用 Number() 函数之后，如果无法转换为数字，就会转换为 NaN。
布尔值：true、false	true 转成 1；false 转成 0
undefined	NaN
null	0

console.log(Number("123"))  //123
console.log(Number(" 123 "))  //123
console.log(Number(" 123a ")) // NaN
console.log(Number(" a123 "))  // NaN
console.log(Number(" 123a34 ")) // NaN

隐式类型转换——运算符：加号 +

（1）字符串 + 其他数据类型 = 字符串

任何数据类型和字符串做加法运算，都会先自动将那个数据类型调用 String() 函数转换为字符串，然后再做拼串操作。最终的运算结果是字符串。

比如：

result1 = 1 + 2 + '3'; // 字符串：33

result2 = '1' + 2 + 3; // 字符串：123

（2）Boolean + 数字 = 数字

Boolean 型和数字型相加时， true 按 1 来算 ，false 按 0 来算。这里其实是先调 Number() 函数，将 Boolean 类型转为 Number 类型，然后再和 数字相加。

（3）null + 数字 = 数字

等价于：0 + 数字

（4）undefined + 数字 = NaN

计算结果：NaN

（5）任何值和 NaN 运算的结果都是 NaN。

隐式类型转换——运算符：-、*、/、%

任何非 Number 类型的值做-、*、/、%运算时，会将这些值转换为 Number 然后再运算(内部调用的是 Number() 函数），运算结果是 Number 类型。

任何数据和 NaN进行运算，结果都是NaN。

比如：

var result1 = 100 - '1'; // 99

var result2 = true + NaN; // NaN

隐式类型转换：正负号 +a、-a

注意，这里说的是正号/负号，不是加号/减号。

任何值做+a、-a运算时， 底层调用的是 Number() 函数。不会改变原数值；得到的结果，会改变正负性。

代码举例：

const a1 = '123';
console.log(+a1); // 123
console.log(-a1); // -123

const a2 = '123abc';
console.log(+a2); // NaN
console.log(-a2); // NaN

const a3 = true;
console.log(+a3); // 1
console.log(-a3); // -1


const a4 = false;
console.log(+a4); // 0
console.log(-a4); // -0

const a5 = null;
console.log(+a5); // 0
console.log(-a5); // -0

const a6 = undefined;
console.log(+a6); // NaN
console.log(-a6); // NaN

使用 parseInt()函数：字符串 -> 整数

语法：

const result = parseInt(需要转换的字符串)

parseInt()：将传入的数据当作字符串来处理，从左至右提取数值，一旦遇到非数值就立即停止；停止时如果还没有提取到数值，就返回NaN。

parse 表示“转换”，Int 表示“整数”。例如：

parseInt('5'); // 得到的结果是数字 5

按照上面的规律，使用 parseInt() 函数转为数字的规则如下：

原始值	转换后的值
字符串	（1）只保留字符串最开头的数字，后面的中文自动消失。 （2）如果字符串不是以数字开头，则转换为 NaN。 （3）如果字符串是一个空串或者是一个全是空格的字符串，转换时会报错。
布尔值：true、false	NaN
undefined	NaN
null	NaN

Number() 函数和 parseInt() 函数的区别：

就拿Number() 和 parseInt()/parseFloat()来举例，二者在使用时，是有区别的：

• Number() ：千方百计地想转换为数字；如果转换不了则返回 NaN。
• parseInt()/parseFloat() ：提取出最前面的数字部分（开头如果是空格，则自动忽略空格）；没提取出来，那就返回 NaN。

parseInt()具有以下特性：

（1）parseInt()、parseFloat()会将传入的数据当作字符串来处理。也就是说，如果对非 String使用 parseInt()、parseFloat()，它会先将其转换为 String 然后再操作。【重要】

比如：

var a = 168.23;
console.log(parseInt(a)); //打印结果：168  （因为是先将 a 转为字符串"168.23"，然后然后再操作）

var b = true;
console.log(parseInt(b)); //打印结果：NaN （因为是先将 b 转为字符串"true"，然后然后再操作）

var c = null;
console.log(parseInt(c)); //打印结果：NaN  （因为是先将 c 转为字符串"null"，然后然后再操作）

var d = undefined;
console.log(parseInt(d)); //打印结果：NaN  （因为是先将 d 转为字符串"undefined"，然后然后再操作）

（2）只保留字符串最开头的数字，后面的中文自动消失。例如：

console.log(parseInt('2017在公众号上写了6篇文章')); //打印结果：2017

console.log(parseInt('2017.01在公众号上写了6篇文章')); //打印结果仍是：2017   （说明只会取整数）

console.log(parseInt('aaa2017.01在公众号上写了6篇文章')); //打印结果：NaN （因为不是以数字开头）

（3）自动截断小数：取整，不四舍五入。

例 1：

var a = parseInt(5.8) + parseInt(4.7);
console.log(a); //9

例 2：

var a = parseInt(5.8 + 4.7);
console.log(a); // 10

（4）带两个参数时，表示在转换时，包含了进制转换。

代码举例：

var a = '110';

var num = parseInt(a, 16); // 【重要】将 a 当成 十六进制 来看待，转换成 十进制 的 num

console.log(num); // 272

如果你对打印结果感到震惊，请仔细看上面的代码注释。就是说，无论 parseInt() 里面的进制参数是多少，最终的转换结果是十进制。

我们知道，八进制的数字是用0开头进行表示。比如"070"这个字符串，如果我调用 parseInt() 转成数字时，有些浏览器会当成 8 进制解析，有些会当成 10 进制解析。

所以，比较建议的做法是：可以在 parseInt()中传递第二个参数，来指定当前数字的进制。例如：

var a = '070';

a = parseInt(a, 8); //将 070 当成八进制来看待，转换结果为十进制。
console.log(a); // 打印结果：56。这个地方要好好理解。

我们来看下面的代码，打印结果继续震惊：

var a = '5';

var num = parseInt(a, 2); // 将 a 当成 二进制 来看待，转换成 十进制 的 num

console.log(num); // 打印结果：NaN。因为 二进制中没有 5 这个数，转换失败。

parseFloat()函数：字符串 --> 浮点数（小数）

parseFloat()的作用是：将字符串转换为浮点数。

parseFloat()和 parseInt()的作用类似，不同的是，parseFloat()可以获得小数部分。

代码举例：

var a = '123.456.789px';
console.log(parseFloat(a)); // 打印结果：123.456

parseFloat() 的几个特性，可以参照 parseInt()。

Boolean转换

其他的数据类型都可以转换为 Boolean 类型。无论是隐式转换，还是显示转换，转换结果都是一样的。有下面几种情况：

使用 Boolean() 函数转为数字的规则如下：

原始值	转换后的值
字符串	空串的转换结果是false，其余的都是 true。 全是空格的字符串，转换结果也是 true。 字符串'0'的转换结果也是 true。
数字	0 和 NaN的转换结果 false，其余的都是 true。比如 Boolean(NaN)的结果是 false。
undefined	false
null	false
对象	引用数据类型会转换为 true。 注意，空数组[]和空对象{}，转换结果也是 true，这一点，很多人不知道。

小结：空字符串’'、0、NaN、undefined、null会转换为 false；其他值会转换为 true。

重中之重来了：

转换为 Boolean 的上面这几种情况，极其重要，开发中会频繁用到。比如说，我们在项目开发中，经常需要对一些非布尔值做逻辑判断或者逻辑运算，符合条件后，才做下一步的事情。这个逻辑判断就是依据上面的四种情况。

举例：（接口返回的内容不为空，前端才做进一步的事情）

const result1 = '';
const result2 = { a: 'data1', b: 'data2' };

// 逻辑判断
if (result1) {
    console.log('因为 result1的内容为空，所以代码进不了这里');
}

// 逻辑运算
if (result2 && result2.a) {
    // 接口返回了 result2，且 result2.a 里面有值，前端才做进一步的事情
    console.log('代码能进来，前端继续在这里干活儿');
}

这里再次强调一下，空数组[]和空对象{}转换为 Boolean 值时，转换结果为 true。

我们在下一篇内容《运算符》中，还会详细讲非布尔值的逻辑运算。

1. 隐式类型转换：逻辑运算

当非 Boolean 类型的数值和 Boolean 类型的数值做比较时，会先把前者临时进行隐式转换为 Boolean 类型，然后再做比较；且不会改变前者的数据类型。举例如下：

const a = 1;

console.log(a == true); // 打印结果：true
console.log(typeof a); // 打印结果：number。可见，上面一行代码里，a 做了隐式类型转换，但是 a 的数据类型并没有发生变化，仍然是 Number 类型

console.log(0 == true); // 打印结果：false

2. 使用 !!

使用 !!可以显式转换为 Boolean 类型。比如 !!3的结果是 true。

3. 使用 Boolean()函数

使用 Boolean()函数可以显式转换为 Boolean 类型。

隐式类型转换：isNaN() 函数

语法：

isNaN(参数)

解释：判断指定的参数是否不是数字（NaN，非数字类型），返回结果为 Boolean 类型。不是数字时返回 true，是数字时返回 false。

在做判断时，会进行隐式类型转换。也就是说：任何不能被转换为数值的参数，都会让这个函数返回 true。

执行过程：

（1）先调用Number(参数)函数；

（2）然后判断Number(参数)的返回结果是否为数值。如果不为数字，则返回结果为 true；如果为数字，则返回结果为 false。

代码举例：

console.log(isNaN('123')); // 返回结果：false。

console.log(isNaN(null)); // 返回结果：false

console.log(isNaN('abc')); // 返回结果：true。因为 Number('abc') 的返回结果是 NaN

console.log(isNaN(undefined)); // 返回结果：true

console.log(isNaN(NaN)); // 返回结果：true