JS显性数据类型转换和隐性数据类型转换

一、JS需要类型转换的原因

JS是一种弱类型语言,变量没有类型限制,可以随意赋值。如:

var a=5;
console.log(typeof a);//number
a='我是字符串';
console.log(typeof a);//string
如上所示,当把数字5赋值给a变量时,a变量的类型是number,当把字符串“我是字符串”赋值给变量a时,a变量的类型是string。

虽然变量没有类型限制,但运算符要求进行运算的变量的类型和运算符期望的类型一致,所以,当不同类型的变量进行加减运算时,就会进行类型转换(如,1+'a'、'3'-'1')。类型转换主要分为两种:强制(显性)类型转换和自动(隐性)类型转换。每种转换又可分为原始类型转换和对象类型转换,原始类型主要包括数字、字符串、布尔值、null、undefined等。



二、强制(显性)类型转换

强制类型转换主要是指通过String、Number和Boolean等构造方法手动转换成对应的字符串、数字和布尔值。

2.1、将其他类型转为字符串

字符串是JS的基本数据类型之一,使用String对象的构造方法可以将任意类型的数据转换为字符串,其中,这里的任意类型主要分为两大类:原始(基本)类型和对象类型。基本类型的转换相对简单,转换方法如下:

基本数据类型String类型
数字对应的数字字符串
true字符串true
false字符串false
null字符串null
undefined字符串undefined
如下,均输出对应的字符串值:

console.log(String(123));//"123"
console.log(String(true));//"true"
console.log(String(false));//"false"
console.log(String(null));//"null"
console.log(String(undefined));//"undefined"

对象类型的转换稍微复杂些,对象参与基本类型数据运算时,首先是要将对象转换为基本类型。转换方法如下:

1、调用toString()方法,如果返回基本类型的值,则用String()构造方法转换该值。

2、如果toString()方法返回的不是基本类型,则再调用valueOf()方法,如果返回基本类型的值,则用String()构造方法转换该值。

3、如果valueOf()方法返回的也不是基本类型,就抛出错误,如谷歌抛出:Uncaught TypeError: Cannot convert object to primitive value


如下,为了方便查看,重写了String的toString()和valueOf()方法:

例1、当String对象的toString()方法返回基本类型时

//重写Date对象的toString()
Date.prototype.toString=function(){
	console.log('执行了toString(),这里返回数字1');
	return 1;
};
//重写Date对象的valueOf()方法
Date.prototype.valueOf=function(){
	console.log('执行了valueOf()方法,这里返回数字2');
	return 2;
};
var date=new Date();
var str=String(date);
输出结果:

执行了toString(),这里返回数字1

列2、当toString()方法返回非基本类型时,再次调用valueOf()方法
//重写Date对象的toString()
Date.prototype.toString=function(){
	console.log('执行了toString(),这里返回数字1');
	return {};
};
//重写Date对象的valueOf()方法
Date.prototype.valueOf=function(){
	console.log('执行了valueOf()方法,这里返回数字2');
	return 2;
};
var date=new Date();
var str=String(date);//先调用toString()方法,由于返回的不是基本数据类型,再次调用valueOf()方法
输出结果:

执行了toString(),这里返回数字1
执行了valueOf()方法,这里返回数字2

例3、toString()和valueOf()都返回的不是基本数据类型,则抛出异常
//重写Date对象的toString()
Date.prototype.toString=function(){
	console.log('执行了toString(),这里返回数字1');
	return {};
};
//重写Date对象的valueOf()方法
Date.prototype.valueOf=function(){
	console.log('执行了valueOf()方法,这里返回数字2');
	return {};
};
var date=new Date();
var str=String(date);//先调用toString()方法,由于返回的不是基本数据类型,再次调用valueOf()方法,但还是返回非基本数据类型,所以抛出异常
输出结果:

执行了toString(),这里返回数字1
执行了valueOf()方法,这里返回数字2
Uncaught TypeError: Cannot convert object to primitive value


也可以采用如下方式验证:

var obj={
	valueOf:function(){
		console.log('执行了valueOf()方法,这里返回数字2');
		return 2;
	},
	toString:function(){
		console.log('执行了toString(),这里返回对象');
		return 1;
	}
};
String(obj);

2.2、将其他类型转换成数字

使用Number构造函数转化任意类型的值时,也分为两种:一种是将基本类型的值转换成数字,一种是将对象型的值转换为数字。基本类型的数据转换数字的规则如下:

基本数据类型数字类型
数字字符串对应的数字
true1
false0
null0
undefinedNaN
空字符串0
不可完全被解析为数值的字符串NaN

如下:

console.log(Number(123));//123
console.log(Number('123'));//123
console.log(Number('123a'));//NaN
console.log(Number(''));//0
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(undefined));//NaN
console.log(Number(null));//0
console.log(Number(' \t\n 3.23322\t '));//Number可以自动去掉两头空白符,输出3.23322
注:Number构造函数将字符串转换为数字时,字符串必须完全被为数字,即只要有一个字符无法转为数值,则整个字符串都会被转为NaN。如果想不精确转换,可以使用parseInt()函数,parseInt()函数将最大限度的将字符串转换为数字。如:

console.log(parseInt('123abc456'));//123
console.log(Number('123abc456'));//NaN

对象类型转换为数字,和上面对象转换为字符串类似,只是转为数字时是先调用valueOf()方法,再调用tostring()方法:

1、首先调用对象自身的valueOf()方法,如果返回基本类型的值,则用Number构造函数进行转换。

2、如果valueOf()返回的不是基本类型的值,则再调用toString()方法,如果返回基本类型的值,值用Number构造函数进行转换。

3、如果toString()返回的不是基本类型的值,则抛出异常。

验证方法与上面转为字符串的类似,如:

 var obj={
	valueOf:function(){
		console.log('执行了valueOf()方法,这里返回数字2');
		return 2;
	},
	toString:function(){
		console.log('执行了toString(),这里返回对象');
		return 1;
	}
};
Number(obj); 
输出结果:

执行了valueOf()方法,这里返回数字2

2.3、将其他类型转换为布尔值

使用Boolean构造函数转换其他类型的数值时,除了下面几种情况返回false外,其他的值都返回true。

1、null

2、0、-0或者+0

3、NaN

4、''  空字符串

5、undefined

如:

console.log(Boolean(null));//false
console.log(Boolean(0));//false
console.log(Boolean(-0));//false
console.log(Boolean(+0));//false
console.log(Boolean(''));//false
console.log(Boolean(NaN));//false
console.log(Boolean(undefined));//false
console.log(Boolean({}));//true
console.log(Boolean([]));//true
console.log(Boolean("蝈蝈"));//true
console.log(Boolean(new Boolean(false)));//true

三、自动(隐性)类型转换

自动类型转换就是不需要人为强制的进行转换,js会自动将类型转换为需要的类型,所以该转换操作用户是感觉不到的,因此又称为隐性类型转换。自动类型转换实际上和强制类型转换一样,也是通过String()、Number()、Boolean()等构造函数进行转换,只是该操作是JS自己自动完成的而已。自动类型转换的规则和强制类型转换的规则一致,所以这里不再进行描述。下面列举几个例子:

3.1、转换为数字

在所有加减乘除等需要数字类型的地方,JS会自动使用Number构造函数对变量进行转换。

console.log('1'-'2');//-1
console.log(1+'2');//12 加号+比较特殊,其他类型和字符串相加都会转换成字符串
console.log('1'-true);//0
console.log('1'*{});//NaN
console.log('1'-'a');//NaN

3.2、转换为字符串

字符串自动转换主要表现为字符串的拼接,字符串和其他类型用加号(+)拼接时,其他类型都自动转换为字符串。

console.log('1'+'2');//12
console.log('1'+'a');//1a
console.log('1'+1);//11
console.log('a'+null);//anull
console.log('1'+undefined);//1undefined
console.log('a'+{});//a[object Object]
console.log('a'+true);//atrue

3.3、转换为布尔值

当在任意需要布尔类型的地方(如,if条件出、三元运算符条件等),系统都会自动调用Boolean()构造函数将值转换为Boolean类型。null、0、-0、+0、'' 空字符串、undefined、NaN这些都会转换为false,其他的值都会转换为true。












已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页