首页 > 编程笔记 > JavaScript笔记

JS强制类型转换和隐式类型转换

JavaScript 是一种动态类型的语言，在执行运算操作的过程中，有时需要转换操作数的类型。在 JavaScript 中，数据类型的转换有：隐式类型转换和强制类型转换（也叫显式类型转换）两种方式。

1. 隐式类型转换

隐式类型转换会自动根据运算符进行类型转换。隐式类型转换的情况主要有以下几种。

1) 如果表达式中同时存在字符串类型和数字类型的操作数，而运算符使用加号+，此时 JavaScript 会自动将数字转换成字符串。例如： 
alert("姑娘今年" + 18);   //结果：姑娘今年18
alert("15"+5);   //结果：155

2) 如果表达式运算符为-、*、/、%中的任意一个，此时 JavaScript 会自动将字符串转换成数字，对无法转换为数字的则转换为 NaN。例如： 
alert("30"/5);   //除运算，结果为：6
alert("15"-5);   //减运算，结果为：10
alert("20"*"a"); //乘运算，结果为：NaN
alert("20"%"3"); //取模运算，结果为：2

3) 运算符为++或--时，JavaScript 会自动将字符串转换成数字，对无法转换为数字的则转换为 NaN。例如： 
var num1 = "6";
var num2 = "6";
var num3 = "a";
alert(++num1);  //将字符串转换为数字再进行++运算，结果为：7
alert(--num2);  //将字符串转换为数字再进行--运算，结果为：5
alert(++num3);  //字符串无法转换为数字，结果为：NaN

4) 运算符为>或<时，当两个操作数一个为字符串，一个为数字时，JavaScript 会自动将字符串转换成数字。例如： 
alert('10'>9);  //将字符串转换为数字，按值进行比较，结果为：true
alert('10'<9);  //将字符串转换为数字，按值进行比较，结果为：false

5) !运算符将其操作数转换为布尔值并取反。例如： 
alert(！0);    //对0取反，结果为：true
alert(！100); //对非0数字取反，结果为：false
alert(!"ok"); //对非空字符串取反，结果为：false
alert(!"");  //对空字符串取反，结果为：true

6) 运算符为==时，当表达式同时包含字符串和数字时，JavaScript 会自动将字符串转换成数字。例如： 
var a = '2';
var b = 2;
alert(a == b); //按值比较，结果为：true

2. 强制类型转换

从上面的介绍我们可以看到，JavaScript 可以自动根据运算的需要进行类型的转换。强制类型转换主要针对功能的需要或为了使代码变得清晰易读，人为地进行类型的转换。在 JavaScript 中，强制类型转换主要是通过调用全局函数 Number()、parseInt() 和 parseFloat() 来实现。

1) 使用Number()函数将参数转换为一个数字

使用格式如下：

Number(value)

Number() 对参数 value 进行整体转换，当参数值中任何地方包含了无法转换为数字的符号时，转换失败，此时将返回 NaN，否则返回转换后的数字。

Number() 对参数进行数字转换时，遵循以下一些规则：
转换示例： 
alert(Number("0010"));  //去掉两个前导0，结果为：10
alert(Number("+010"));  //去掉前导0和+，结果为：10
alert(Number("-10"));  //转换后保留“-”号，结果为：-10
alert(Number(''));      //空字符串的转换结果为：0
alert(Number(true));   //布尔值true的转换结果为：1
alert(Number(null));   //null值的转换结果为：0
var d = new Date();      //创建一个Date对象
alert(Number(d));     //转换Date对象，结果为1970.1.1至执行转换时的毫秒数：1511351635179
alert(Number("100px"));   //参数中包含了不能转换为数字的字符px，结果为：NaN
alert(Number("100 01"));  //参数中包含了空格，导致整个参数不能转换，结果为：NaN
alert(Number("100-123")); //参数中包含了“-”，导致整个参数不能转换，结果为：NaN
var a;                   //声明变量
alert(Number(a));     //变量a没有赋值，因而a的值为undefined,转换undefined的结果为：NaN
var fn = function (){alert(1);}; //创建一个函数对象
alert(Number(fn));     //转换函数，结果为:NaN
alert(Number(window)); //转换window对象，结果为:NaN
从上述示例中，我们也可以看到，Number() 是从整体上进行转换的，任何一个地方含有非法字符，都将导致转换无法成功。接下来将介绍的两个函数与 Number() 不同的是，转换是从左到右逐位进行转换，任何一位无法转换时立即停止转换，同时返回已成功转换的值。

2) 使用parseInt()函数将参数转换为一个整数

使用格式如下：

parseInt(stringNum,[radix])

stringNum 参数为需要转换为整数的字符串；radix 参数为 2～36 之间的数字，表示 stringNum 参数的进制数，取值为 10 时可省略。

parseInt() 的作用是将以 radix 为基数的 stringNum 字符串参数解析成十进制数。若 stringNum 字符串不是以合法的字符开头，则返回 NaN；解析过程中如果遇到不合法的字符，将马上停止解析，并返回已经解析的值。

parseInt() 在解析字符串为整数时，遵循以下规则：
转换示例： 
alert(parseInt("1101",2));  //以2为基数的1101字符串解析后的结果为：13
alert(parseInt("a37f",16)); //以16为基数的a37f字符串解析后的结果为：41855
alert(parseInt("123"));     //以10为基数的123字符串解析后的结果为：123
alert(parseInt("  123"));   //字符串前面的空格会被忽略，结果为：123
alert(parseInt("12 3"));    //字符串中包含了空格，解析到空格时停止，结果为12
alert(parseInt("12.345")); //字符串中包含了小数点，解析到小数点时停止，结果为12
alert(parseInt("xy123"));  //字符串前面包含了非数字字符“x”，无法解析，返回结果为：NaN
alert(parseInt("123xy4")); //字符串中包含了非数字字符“xy”，解析到“x”时停止，结果为：123
从上述示例我们可以看到，parseInt() 解析浮点数时，小数部分数据会被截掉，此时需要使用下面将介绍的 parseFloat()，而不能使用 parseInt()。

3) 使用parseFloat()函数将参数转换为一个浮点数

使用格式如下：

parseFloat(stringNum)

stringNum 参数为需要解析为浮点型的字符串。

parseFloat() 的作用是将首位为数字的字符串转解析成浮点型数。若 stringNum 字符串不是以合法的字符开头，则返回 NaN；解析过程中如果遇到不合法的字符，将马上停止解析，并返回已经解析的值。

parseFloat() 在解析字符串为整数时，遵循以下规则：
转换示例： 
alert(parseFloat("312.456"));//结果为：312.456
alert(parseFloat("-3.12"));//字符串前面的“-”将保留，结果为：-3.12
alert(parseFloat("+3.12"));//字符串前面的“-”将保留，结果为：3.12
alert(parseFloat(".12"));//在小数点前面添加0，结果为：0.12
alert(parseFloat("  3.12"));//截掉字符串前面的空格，结果为：3.12
alert(parseFloat("312.4A56"));//字符串中包含非数字字符A，解析到A时停止，结果为：312.4
alert(parseFloat("31 2.4A56"));//字符串中包含空格，解析到空格时停止，结果为：31
alert(parseFloat("31.2.5"));//字符串中包含两个小数点，解析到第二个小数点时停止，结果为：31.2
alert(parseFloat("a312.456"));//字符串前面为非数字字符a，解析无法进行，结果为：NaN

所有教程

优秀文章