数据类型转换

发表于 | 分类于

JavaScript 是一种动态数据类型语言。变量是没有类型的，可以随机被赋予任意类型的值。而数据本身和各种运算是有类型的，例如在做数学运算时我们就需要数据是 number 类型，但有时候实际参与数学运算的数据并不全是 number 类型，因此在进行某些运算时数据是需要转换类型的。大多数情况下，这种数据类型转换是自动的，但是有时也需要手动强制转换。

显示转换

显示转换，即通过调用一些函数方法进行强制转换。JavaScript 提供了以下几种转型函数：

  • 转换为数值类型：parseInt()、parseFloat()、Number()
  • 转换为字符串类型：toString()、String()
  • 转换为布尔值类型：Boolean()

转换为数值类型

parseInt()

该方法用于解析一个字符串，并返回一个 number 类型的整数。解析规则如下：

  1. 忽略字符串前面的空格，直至找到第一个非空字符；
  2. 如果第一个字符是 0，则忽略；
  3. 如果第一个字符不是数字或者正负号，返回NaN；
  4. 如果第一个字符是数字，则继续解析直到字符串解析完毕或者遇到一个非数字字符为止；
  5. 如果是以 0x 开头，则将其当作十六进制来解析；
1
2
3
4
5
6
parseInt('12345px');          // 12345
parseInt('hello parseInt');   // NaN
parseInt('');                 // NaN
parseInt('020');              // 20
parseInt('11.22.33');         // 11
parseInt(123.3);              // 123

parseFloat()

该方法用于解析一个字符串，并返回一个 number 类型的浮点数（小数）。解析规则与parseInt()基本相同，但也有点区别：

  1. 解析到的第一个小数点.符号是有效的；
  2. 如果字符串包含一个可解析为整数的数，则返回整数值而不是浮点数值；
1
2
3
4
5
6
parseFloat('12345px');          // 12345
parseFloat('hello parseInt');   // NaN
parseFloat('');                 // NaN
parseFloat('020');              // 20
parseFloat('11.22.33');         // 11.22
parseFloat(123.3);              // 123.2

parseInt()和parseFloat()的解析规则可以简单的理解为：从左往右依次解析，结果保留前面合法的，裁剪去后面不合法的。如果第一个就不合法，结果则为NaN。

Number()

该方法用于解析任意类型数据，并返回一个有效的 number 类型的值。解析规则如下：

数据类型 解析规则
布尔值 1. true转换为 1
2. false转换为 0
null 转换为 0
undefined 转换为NaN
字符串 1. 空字符串""转换为 0
2. 如果引号内整体为一个有效数字，则转换为对应的数字
3. 其他情况都转换为NaN		 
1
2
3
4
5
6
Number('12345px');          // NaN
Number('hello Number');     // NaN
Number('');                 // 0
Number('020');              // 20
Number('11.22.33');         // NaN
Number(123.3);              // 123.2

转换为字符串类型

toString()

该方法用于解析除了 undefined 和 null 以外的任意类型数据，并返回一个 string 类型的值。

1
2
let data = true;
data.toString();      // 'true'

String()

该方法用于解析任意类型数据，并返回一个 string 类型的值。

1
2
let data = null;
String(data);      // 'null'

转换为布尔值类型

Boolean()

该方法用于解析任意类型数据，并返回一个 boolean 类型的值。解析规则如下：

  • false
  • null
  • undefined
  • 0
  • NaN
  • ""

除了以上六种数据转换结果为false外，其他所有数据转换结果都为true。

1
2
Boolean(0);    // false
Boolean(1);    // true

隐式转换

在 JavaScript 中很多操作都会存在数据自动转换的情况。即当参与操作的数据并不是预期的类型时，程序会对数据进行隐式转换。

注意：隐式转换是得到一个转换后的新数据，不会改变原数据。

以下列举几种常见的隐式转换的情况：

转换为数字类型

进行算术运算

当对数据进行数学运算操作（加减乘除等）时，如果参与运算的数据不是 number 类型，则会将数据隐式的调用Number()方法转为数字后再进行运算。

1
2
3
4
5
6
let data1 = null;
let data2 = true;
console.log(10 - data2);      // 9
console.log(data1 + data2);   // 1
console.log(data2 * 10);      // 10
console.log(--data1);         // -1

小技巧：给任意数据减去数字 0，可快速将当前数据转为 number 类型。

进行大小比较

当对数据进行大小比较时（大于小于等于等）时，如果参与比较的数据不能直接进行比较，则会将数据隐式的调用Number转为数字后再进行比较。

1
2
3
4
console.log(true == 1);
console.log(true == 2);
console.log(123 > '13');
console.log(null < true);

isNaN()

isNaN()方法用于判断数据是否为“非数字”。但是在判断前会先将数据隐式的调用Number()方法转为数字后再进行判断。如果转换后的数据为“非数字”，则返回结果true，反之则false。 

1
2
3
4
5
console.log(isNaN('123'));        // false
console.log(isNaN('123px'));      // true
console.log(isNaN(undefined));    // true
console.log(isNaN(false));        // false
console.log(isNaN(null));         // false

转换为字符串类型

加号+除了用于数学加法运算外，还可以进行字符串的拼接。因此，当参与+操作的数据中存在一个 string 类型的值时，其他数据都会隐式的调用String()方法转换为字符串后进行拼接。

1
2
console.log(1 + '2');       // '12'
console.log('10' + true);   // '10true'

小技巧：给任意数据拼接一个空字符串，可快速将当前数据转为 string 类型且不改变数据值。

1
console.log(10 + '');     // '10'

转换为布尔值类型

当进行逻辑判断时，如果参与判断的数据不是布尔值类型，则会隐式的调用Boolean()方法转换为布尔值。

1
2
3
4
console.log(1 && 0);   // 0
if(''){   
	console.log('hello');   // 不会执行
}
我 秦始皇 打钱