前言

在JavaScript中，数据类型大致分为两种：

• 基本数据类型/标准数据类型
• 引用数据类型/复杂数据类型/地址数据类型

其中，基本数据类型包括：

• 布尔类型（true、false）
• 数值类型（整数、浮点数）
• 字符串类型
• undefined（未定义）
• null（空)

引用数据类型包括：

• 数组
• 对象
• 函数

在实际应用中，往往会遇到不同数据类型的数据进行运算、比较或者需要将数据转换为其他类型，所以就需要知道JS中数据类型转换的规则。

数据类型转换分为 自动数据类型转换 和 强制数据类型转换。

一、自动数据类型转换

自动数据类型转换是计算机自动完成类型转换。

1.其他类型转换为数值

在执行数学运算的时候会触发自动转换，转换规则如下：

• undefined转换为NaN
• null转换为数值0
• 空字符串转换为数值0
• 布尔值true转换为数值1，false转换为数值0
• 如果字符串是纯数字或者科学计数法，则转换为对应数值；如果含有不是数字的内容，则转换为NaN

[code]var int7 = 100 - '2e3';   //科学计数法会被解析
console.log(int7);       //输出结果为-1900

• 数组、对象、函数在进行数学运算时，除“+”以外的运算，都转换为NaN，进行“+”运算时，相当于字符串拼接

[code]console.log( 100 + [1,2,3,4,5] );  //结果  1001，2，3，4，5
console.log( 100 + {name:'张三' , age:18} );  //结果  100[object Object]
console.log( 100 + function fun(){console.log(123)} );
//结果  100function fun(){console.log(123)} )

console.log( 100 - [1,2,3,4,5] );  //NaN
console.log( 100 - {name:'张三' , age:18} );  //NaN
console.log( 100 - function fun(){console.log(123)} );  //NaN

2.其他类型转换为布尔类型

在执行if判断时，其他数据类型会自动转换成布尔类型。

规则：

• 数值0、空字符串、undefined、null、NaN转换为布尔值时，为false；
• 其他所有类型转换为布尔值，为true。

3.其他类型转换为字符串

 在执行字符串拼接时，会将其他数据类型自动转换为字符串类型。

[code]console.log('100' + 10);  //结果 10010
console.log('false' + null); //结果 falsenull
console.log('undefined' + NaN);  //undefinedNaN

字符串与含有科学计数法的数值进行拼接，科学计数法会被解析。

[code]var str = 'wuhan' + 2e3;
console.log(str);
//输出结果为wuhan2000

数组转化为字符串，是[]中的内容

[code]var str = 'wuhan' + [1,2,3,4];
console.log(str);
//输出结果为wuhan1,2,3,4

对象转化为字符串，为[object Object]

[code]var str = 'wuhan' + {name:张三 , age:18};
console.log(str);
//输出结果为wuhan[object Object]

函数转化为字符串，全部内容都是字符串内容

 

[code]var str = 'wuhan' +function fun(){ console.log();}；
console.log(str);
//输出结果为wuhanfunction fun(){ console.log();}

二、强制数据类型转换

强制数据类型转换是利用方法对变量进行类型转换。

1.强制转换为布尔类型

Boolean()方法可以将变量的类型转换为布尔值，返回值为转换结果。

【注】Boolean(）不会改变变量中存储的原始数据。

转换规则与自动转换为布尔类型相同。

[code]console.log(Boolean(undefined));  //false
console.log(Boolean(1));  //true

2.强制转换为字符串类型

（1）方法1 toString

格式：变量.toString(进制类型)

作用：将数值强制转换为字符串，并且可以定制转换的进制

【注】toString()之前不能写数值，必须写变量；进制范围为2-36。

[code]var int = 100;
console.log(int.toString(2));
//将int转化成二进制，然后按照二进制输出字符串

（2）方法二 String

格式：String(变量/数据)

作用：将变量或数据转换为字符串。

【注】String()不会改变变量中的原始数据。

转换规则与 自动数据类型转换为字符串 相同。

[code]console.log(String(null));  //null
console.log(String(NaN));  //NaN

3.强制转换为数值类型

（1）方法一 Number

格式：Number(变量/数值)

作用：将其他数据类型转换为数值类型

转换规则与 自动数据类型转换为数值 相同。

（2）方法二 parseInt

格式：parseInt(变量/数值)

作用：获取变量或者数值的整数部分

【注】如果变量的第一个字符不是数字，那么parseInt()的返回值是NaN。

[code]console.log( parseInt(true) );          //布尔值true
console.log( parseInt(false) );         //布尔值false
console.log( parseInt(null) );          //null
console.log( parseInt('') );            //空字符串
console.log( parseInt(undefined) );     //undefined
console.log( parseInt( {name:'zhangsan'} ) );     //对象
console.log( parseInt( function fun(){console.log('abc')} ) );  //函数
//显示都是NaN

针对数组：数组取整是获取数值部分，也就是[]里面的部分

[code]console.log( parseInt( [1,2,3,4,5] ) );        // 结果是 1

//1,2,3,4,5  整数部分是 1  1之后是逗号 逗号不是整数,之后的部分也就不算整数

console.log( parseInt( [null,2,3,4,5] ) );     // 结果是 NaN

//获取第一个数值的整数部分,如果有就获取,如果没有,结果是NaN

 

针对字符串：

• 如果字符串是纯数字，则直接转换成数值然后取整；
• 如果不是纯数字： 以字符开头的话，则显示NaN；
• 以数字开头，则从左开始取值，直到不是数字。

[code]console.log( parseInt( '3abc'));     //结果是3
console.log( parseInt( 'abc'));       //结果是NaN
console.log( parseInt( '3.123456e3' ) );   //结果是3，科学计数法不会被解析

 

（3）方法三 parseFloat

格式：parseFloat(变量/数值)

作用：获取变量或数值的浮点数部分

【注】如果变量的第一个字符不是数字，那么parseFloat()会返回NaN。

[code]console.log( parseFloat(true) );
console.log( parseFloat(false) );
console.log( parseFloat(null) );
console.log( parseFloat('') );
console.log( parseFloat(undefined) );
console.log( parseFloat( {name:'zhangsan'} ) );
console.log( parseFloat( function fun(){console.log('abc')} ) );
// 都是 NaN

针对数组：同parseInt。

[code]console.log( parseFloat( [1,2,3,4,5] ) );        // 结果是 1
console.log( parseFloat( [null,2,3,4,5] ) );     // 结果是 NaN

针对数值：整数部分浮点数部分都会完整获取。

[code]console.log( parseFloat(100.1234) );  /显示100.1234

 

针对字符串：从字符串左侧起解析复合浮点数的部分

 

[code]console.log( parseFloat( '3.123456e3' ) );  // 科学技术法会解析，显示为3123.456
console.log( parseFloat( '3.1223abc' ) );       //显示为3.1223
console.log( parseFloat( '3.123' ) );   //显示为3.123
console.log( parseFloat( 'n3.123' ) );   //显示为NaN

逆战fighting！！！

• 点赞
• 收藏
• 分享
• 文章举报

绝望的东北大米 发布了8 篇原创文章 · 获赞 0 · 访问量 245 私信 关注