JavaScript 数据类型之间的转换

 

目录

1、其它类型值转字符串

2、数值类型转数字模式

3、设置数字显示的小数位数

4、非数字值转换为数字

5、其他值转换为布尔值

6、四种基本对象构造器

7、把对象转换为值

8、强制数据类型转换

---

1、其它类型值转字符串

其它类型值转换为字符串是编程中常见行为。当值与空字符串相加时，JavaScript 会自动把值转换为字符串 。

1.1 使用加号（+）运算符

//把数字转换为字符串
var a = 123456;    a = a + "";    alert(typeof a);    //返回类型为string

//把布尔值转换为字符串，返回字符串 "true" 或 "false"
var a = true;    a = a + '';    alert(a);    //返回字符串 "true"

//把数组转换为字符串，返回数组元素列表，以逗号分隔
var a = [1,2,3];    a = a + '';    alert(a);        //返回字符串"1, 2, 3"

//把函数转换为字符串，返回函数结构的代码字符串
var a = function(){return 1;}    a = a + '';    alert(a);    //返回字符串 "var a = function(){ return 1 }"

如果把 JavasScript 内置对象转换为字符串，则只返回构造函数的基本结构代码，而自定义的构造函数、则与普通函数一样，返回函数结构的代码字符串。

1.2 使用 toString() 方法

原始值在调用 toString() 方法时，JavaScript 会自动把它们装箱为对象，然后再调用 toString() 方法，把它们转换为字符串：

var a = 123456;    a.tostring();    alert(a);    //返回字符串 "123456"

注：使用加号运算符转换字符串，实际上也是调用 toString() 方法来完成。

2、数值类型转数字模式

数值类型 Number 扩展了 toString() 方法，允许传递一个整数参数，该参数可以设置数字的显示模式。数字默认为十进制显示模式，通过设置参数可以改变数字模式。

（1）默认模式，toString() 方法会直接把数值转换为数字字符串。例如：

var a = 1.000;    alert(a.toString());    //返回字符串"1"
var b = 0.0001;    alert(b.toString());    //返回字符串"0.0001"
var c = le-4;    alert(c.toString());    //返回字符串"0.0001"

toString() 方法能够直接输出整数和浮点数，保留小数位，小数位末尾的零会被清除。但是对于科学计数法，则在条件许可的情况把它转换为浮点数，否则就使用科学计数法方式输出字符串。例如：

var a = le-14;    alert(a.tostring());    //返回字符串"le-14;"

在默认模式下，无论数值采用什么模式，toString() 方法返回的都是十进制的数字。因此，对于八进制、二进制或十六进制数值，toString() 方法都会先把它们转换为十进制数值之后再输出。例如：

var a = 010;    //八进制数值10
var b = 0×10;   //十六进制数值10
alert (a.tostring());    //返回字符串"8"
alert (b.tostring());    //返回字符串"16"

（2）如果设置参数，则 toString() 方法会根据参数把数值转换为对应进制的值之后再输出。例如：

var a = 10;    //十进制数值10
alert(a.tostring(2));    //返回二进制数字字符串 "1010"
alert(a.tostring(8));    //返回八进制数字字符串 "12"
alert(a.toString(16));   //返回二进制数字字符串 "a"

3、设置数字显示的小数位数

使用 toString() 方法把数值转换为字符串时，无法保留小数位，下面看几个可以保留小数位的方法。

（1）toFixed()函数：toFixed() 能够把数值转换为字符串，并显示小数点后的指定位数。例如：

var a = 10;
alert(a.toFixed(2));    //返回字符串 "10.00"
alert(a.toFixed(4));    //返回字符串 "10.0000"

（2）toExponential()函数：toExponential() 方法专门用来把数字转换为科学计数法形式的字符串。例如：

var a = 123456789；
a1ert(a.toExpOnential(2));    //返回字符串"1.23e+8"
alert(a.toExponential(4));    //返回字符串"1.2346e+8"

（3）toPrecision()函数：toPrecision() 方法是指定有效数字的位数，而不仅仅是指小数位数。例如：

var a = 123456789；
a1ert(a.toExpOnential(2));    //返回字符串"1.2e+8"
alert(a.toExponential(4));    //返回字符串"1.2345e+8"

4、非数字值转换为数字

把非数字的原始值转换为数字：parselnt() 可以把值转换为整数，parseFloat() 可以把值转换为浮点数。

parselnt() 和 parseFloat() 函数对字符串类型的值有效，其他类型的值调用这两个函数都会返回 NaN。在转换字符串为数字之前，它们都会对字符串进行分析，以验证转换是否继续，具体分析如下。

（1）使用 parseInt() 

在开始转换时，parselnt() 函数会先查看位置 0 处的字符，如果该位置不是有效数字，则将返回 NaN，不再深入分析。如果位置 0 处的字符是数字，则将查看位置 1 处的字符，并进行同样的测试，依此类推，在整个验证过程中，直到发现非数字字符为止，此时 parselnt() 函数将把前面分析合法的数字字符转换为数值，并返回。例如：

alert(parseInt("123abc"));    //返回数字123
alert(parseInt("1.73"));      //返回数字1
alert(parseInt(".123"));      //返回值NaN

浮点数中的点号对于 parselnt() 函数来说是属于非法字符的，因此不会转换它，并返回。

如果以 0 为开头的数字字符串，则 parselnt() 函数会把它作为八进制数字处理，先把它转换为数值，然后再转换为十进制的数字返回。如果以 0x 为开头的数字字符串，则 parselnt() 函数会把它作为十六进制数字处理，先把它转换为数值，然后再转换为十进制的数字返回。

var d= "010";      //八进制数字字符串
var e = "0x10";    //十六进制数字字符串
alert(parseInt(d));    //返回十进制数字8
alert(parseInt(e));    //返回十进制数字16

parselnt() 也支持基模式，可以把二进制、八进制、十六进制等不同进制的数字字符串转换为整数。基模式由 parselnt() 函数的第二个参数指定。

//以下代码把十六进制数字字符串"123abe"转换为十进制整数：
var a = "123abc";
alert(parseInt(a,16));    //返回值十进制整数1194684

//以下代码把二进制、八进制和十进制数字字符串转换为整数：
alert(parseInt("10",2));    //把二进制数字10转换为十进制整数为2
alert(parseInt("10",8));    //把八进制数字10转换为十进制整数为8
alert(parseInt("10",10));    //把十进制数字10转换为十进制整数为10

如果第一个参数是十进制的值，包含 0 前缀，为了避免被误解为八进制的数字，则应该指定第二个参数值为10，即显式定义基，而不是采用默认基。

alert(parseInt("010"));    //把八进制数字10转换为十进制整数为8
a1ert(parseInt("010",8));  //把八进制数字010转换为十进制整数为8
alert(parseInt("010",10)); //把十进制数字010转换为十进制整数为10

（2）使用 parseFloat() 

parseFloat() 与 parselnt() 用法基本相同。它能够识别第一个出现的小数点号，而第二个小数点则被视为非法

alert(parseFloat("1.234.5"));    //返回数值1.234

此外，数字必须是十进制形式的字符串，而不能够使用八进制或十六进制的数字字符串。同时对于数字前面的 0（八进制数字标识）会忽略，而对于十六进制形式的数字，则返回 0 值。例如：

alert(parseFloat("123"));       //返回数值123
alert(parseFloat("123abc"));    //返回数值123
alert(parseFloat("010"));       //返回数值10
alert(parseFloat("0x10"));      //返回数值。
alert(parseFloat("×10"));       //返回数值NaN

（3）使用乘号运算符

加号运算符不仅能够执行数值求和运算，还可以把字符串连接起来。由于 JavaScript 处理字符串连接操作的优先级要高于数字求和运算。因此，当数字字符串与数值使用加号连接时，将优先执行连接操作，而不是求和运算。例如：

var a = 1;    //数值
var b = "1";  //数字字符串
alert(a+b);   //返回字符串 "11"

在执行表达式 a+b 的运算时，变量 a 先被转换为字符串，然后进行连接操作，所以结果为字符串 “11”，而不是数值 2。因此，我们通常使用加号运算符把一个值转换为字符串。不过，如果让变量 b 乘以 1，则加号运算符就以求和进行计算了。例如：

var a = 1;    //数值
alert(a + ( b * 1 ));    //返回数值2

如果让一个数字字符串变量乘以 1，则 JavaScript 解释器能够自动把数字字符串转换为数值，然后再继续求和运算。

5、其他值转换为布尔值

在 JavaScript 中，任何数据都可以被自动转换为布尔值，这种转换往往都是自动完成的。例如，把值放入条件或循环结构的条件表达式中，或者参与到逻辑运算时，JavaScript 解释器都会自动把它们转换为布尔值。用户也可以手动进行转换，具体方法如下。

（1）使用双重逻辑非

任何一个值如果在前面加上一个逻辑非运算符，JavaScript 都会把这个表达式看作是逻辑运算。执行运算时，先把值转换为布尔值，然后再执行逻辑非运算。如果再给这个表达式添加一个逻辑非运算符，所得的布尔值就是该值被转换为布尔型数据的真实值。

var a = !0;    /*返回true*/                var a = !!0;    //返回false
var b = !1;    /*返回false*/               var b = !!1;    //返回true
var c = !NaN;  /*返回true*/                var c = !!NaN;  //返回false
var d = !null; /*返回true*/                var d = !!null; //返回false
var e = !undefined;    /*返回true*/        var e = !!undefined;    //返回false
var f = ![];   /*返回false*/               var f = !![];   //返回true
var g = !{};   /*返回false*/               var g = !!{};   //返回true

（2）使用Boolean() 构造函数转换

使用 Boolean() 构造函数转换的方法如下：

var a = 0;    a = new Boolean(a);    //返回false
var b = 1;    b = new Boolean(b);    //返回true

不过这种方法会把布尔值包装为引用型对象，而不再是原始值了。使用 typeof 运算符检测如下：

var a = 0;
var b = !!a;                alert(typeof b);    //返回 boolean
var c = new Boolean(a);     alert(typeof c);    //返回 object

6、四种基本对象构造器

JavaScript 包含有 String、Number、Function、Boolean 四种基本对象构造器，它们是构造 JavaScript 对象系统的基础。

在下面这个示例中，变量 a 和 b 的值都是 1，但是它们属于不同数据类型，其中 a 为数值，而 b 为对象。

var a = 1;    //直接赋值
var b = new Number(1);  //通过Number构造函数装箱后赋值
alert(typeof a);        //返回number，说明其值为值类型的数值
alert(typeof b);        //返回object，说明其值为引用类型的对象

在下面这个示例中，为 Object 对象定义一个扩展方法 test() ，该方法能够检测当前对象数据类型是否为 Object 对象的实例，当前对象的构造器是否为 Number 或 String 。

Object.prototype.test = function(){    //扩展object构造器的方法test()
    alert(typeof this);      //显示当前对象的数据类型
    alert(this instanceof Object);        //显示当前对象是否为对象的实例
    alert(this.constructor == Number);    //显示当前对象的构造器是否为Number
    alert(this.constructor == String);    //显示当前对象的构造器是否为String
}

如果定义一个数值变量，使用点运算符调用 test() 方法：

var a = 1;    //数值变量
alert(typeof a);    //返回number数值类型
a.test();     //调用检测方法

可以看到，变量 a 调用检测方法后，变量 a 的类型为引用型对象，而不再是值类型的数值。该对象为 Object 对象的实例，是 Number 对象的实例，但不是 String 对象的实例。

如果定义一个字符串变量，使用点运算符调用 test() 方法：

var b = "string"    //字符串变量
alert(typeof b);    //返回string字符串类型
b.test();           //调用检测方法

可以看到，变量 b 调用检测方法后，变量 b 的类型为引用型对象，而不再是值类型的字符串。该对象为 Object 对象的实例，是 String 对象的实例，但不是 Number 对象的实例。

7、把对象转换为值

（1）对象在逻辑运算环境中的转换

如果把非空对象用在逻辑运算环境中，则对象被转换为 true。这包括所有类型的对象，即使是值为 false 的包装对象也为 true。以下代码创建3个不同类型的对象，然后在逻辑与运算中，可以看到它们全部为 true。

var a = new Boolean(false);    
var b = new Number(0);    
var c = new String("");    
a && alert(a);    //a转换为布尔值为true，但是提示它的字符串转换值为 "false"
b && alert(b);    //b转换为布尔值为true，但是提示它的字符串转换值为 "0"
c && alert(c);    //c转换为布尔值为true，但是提示它的字符串转换值为 ""

（2）对象在数值运算环境中的转换

如果对象用在数值运算环境中，则对象会被自动转换为数字，如果转换失败，则返回值 NaN。

下面代码使用 Boolean() 构造器把布尔值 true 转换为布尔型对象，然后再通过 a-0 数值运算，把布尔型对象转换为数字 1。

var a = new Boolean(true);    //把true封装为对象
alert(a.valueOf());           //测试该对象的值为true
alert(typeof (a.valueof()));  //测试值的类型为boolean
a = a - 0;                    //投放到数值运算环境中
alert(a);                     //返回值为1
alert(typeof a);              //再次测试它的类型，则为number

（3）数组在数值运算环境中的转换

当数组被用在数值运算环境中时，数组将根据包含的元素来决定转换的值。

（a）如果为空数组，则被转换为数值 0。当数组为空时，JavaScript 将调用 toString() 方法把数组转换为空字符串，然后再将空字符串强制转换为数值 0。

（b）如果数组仅包含一个数字元素，则被转换为该数字的数值。例如：

var a = [5]；
alert(a);    //返回数值5
alert(typeof a);    //返回类型为number

（c）如果数组包含多个元素，或者仅包含一个非数字元素，则返回 NaN。例如：

var a = [true];
a = a * 1;
alert(a);    //返回数值NaN
alert(typeof a);    //返回类型为number

（4）对象在模糊运算环境下转换

（a）当对象与数值进行加号运算时，则会尝试把对象转换为数值，然后参与求和运算。如果不能够转换为有效数值，则执行字符串连接操作。例如：

var a = new string("a");//字符集封袋为对象
var b = new Boolean(true);//布尔值封装为对象
a = a + 0;    //加号运算
b = b = 0;    //加号运算
alert(a);     //返回字符串 "a0"

（b）当对象与字符串进行加号运算时，则直接转换为字符串，进行连接操作。例如：

var a = new string(1);
var b = new Boolean(true);
a = a + "";
b = b + "";
alert(a);    //返回字符串"1"
alert(b);    //返回字符串"true"

（c）当对象与数值进行比较运算时，则会尝试把对象转换为数值，然后参与比较运算。如果不能够转换为有效数值，则执行字符串比较运算。例如：

var a = new String("true");    //无法转换为数值
var b = new Boolean(true);     //可以转换为数值1
a = a > 0;
b = b > 0;
alert(a);    //返回false，以字符串形式进行比较
alert(b);    //返回true，以数值形式进行比较

（d）当对象与字符串进行比较运算时，则直接转换为字符串，进行比较操作。

对于 Date 对象来说，加号运算符会先调用 toString() 方法进行转换。因为当加号运算符作用于 Date 对象时，一般都是字符串连接操作。而当比较运算符作用于 Date 对象时，则会转换为数字以便比较时间的先后。

8、强制数据类型转换

JavaScript 支持使用以下方法强制类型转换。Boolean（value）：把参数值转换为 boolean 型、Number（value）：把参数值转换为 number 型、String（value）：把参数值转换为 string 型。

var a = String(true);   //返回字符串"true"
var a = String(0);      //返回字符串“0”
var b = Number("1");    //返回数值1
var c = Number(true);   //返回数值1，false会转换为 0
var d = Number("a");    //返回NaN
var e = Boolean(1);     //返回true
var f = Boolean("");    //返回false

使用强制方式转换数据类型，有时候会产生异想不到的情况。例如，在上面示例中，true 被强制转换为数值 1 Number，而使用 parselnt() 方法转换时，它们都返回 NaN。

var a = parseInt(true);    //返回NaN
var b = parseInt(false);   //返回NaN

当要转换的值是至少有一个字符的字符串、非0数字或对象时，Boolean() 函数将返回 true。如果该值是空字符串、数字0、undefined 或 null，则它将返回 false。

Nunber() 函数的强制类型转换与 parselnt() 和 parseFloat() 方法的处理方式相似，只是它转换的是整个而不是部分值。例如：

var a = Number("123abc);    //返回 NaN
var b = parseInt("123abc"); //返回数值123

String() 函数与 toString() 方法功能基本相同。但是String() 函数能够把 null 或 undefined 值强制转换为符串，而不引发错误。例如：

var a = string(null);      //返回字符串"null"
var b = string(undefined); //返回字符串"undefined"

但是以下用法都将导致异常：

var a = null.toString();
var b = undefined.toString();

在JavaScript中，使用强制类型转换有时候会非常有用，但是应该确保转换值的正确。

数据类型自动转换列表

值（value）	字符串环境	数字运算环境	逻辑运算环境	对象操作环境
undefined	"undefined "	NaN	false	Error
null	"null"	0	false	Error
非空字符串	不转换	字符串对应的数字值NaN	true	String
空字符串	转换	0	false	String
0	"0"	不转换	false	Number
NaN	"NaN"	不转换	false	Number
Infinity	"Infinity"	不转换	true	Number
Number.POSITIVE_INFINTTY	"Infinity"	不转换	true	Number
Number.NEGATIVE_INFINITY	"-Infinity"	不转换	true	Number
-Infinity	"-Infinity"	不转换	true	Number
Number.MAX VALUE	"1.7976931348623157e+308"	不转换	true	Number
Number.MIN_VALUE	"5e-324"	不转换	true	Number
其他所有数字	"数字的字符串值"	不转换	true	Number
true	"true"	1	不转换	Boolean
false	"false "	0	不转换	Boolean
对象	toString()	vslueOf()或toString或NaN	true	不转换