这是【JavaScript 教程系列第 7 篇】,如果觉得有用的话,欢迎关注专栏。
JavaScript 能够根据运算环境自动转换值的类型,以满足运算需要。但实际开发中,很多情况下需要开发者手动转换数据类型,以达到控制运算过程的目的。
文章目录
一:“字符串” 转换为 “数字”
在 JavaScript 中,将字符串转换为数字,可以使用如下三种方式
- Number()
- parseInt() 和 parseFloat()
- 使用乘号 *
方式 ①:Number()
Number() 可以将任何"数字型字符串"转换为数字,数字型字符串就是"456"、“3.1415” 等这些只有数字的字符串。转换的时候,只需要将字符串当做参数写到 Number() 里面即可。
我们知道,在 JavaScript 中,一个字符串加上一个数字得到的结果仍然是一个字符串,如下代码所示
var sum = "2019" + 1;
浏览器运行效果如下
这里我们使用 Number() 将字符串"2019" 转换为数字 2019,并再看一下输出结果,如下代码所示
var sum = Number("2019") + 1;
浏览器运行效果如下
结果是 2020 ,可见字符串转换为数字成功。
不过,如果你要转换的不是一个数字型字符串,如 Number(“2019year”),就会返回一个 NaN。所以使用 Number() 的时候,要确保参数是数字型字符串。
可有时候我们的确要提取到类似"2019year"字符串中的数字,要怎么做呢 ?这种情况就需要用到下方的 parseInt() 和 parseFloat() 了,而不能用 Number() 了。
方式 ②:parseInt() 和 parseFloat()
一:parseInt()
parseInt() 是一个全局方法,它可以把值转换为整数,转换的过程可以概括为以下几步
- 第 1 步:先解析位置 0 处的字符,如果不是有效数字,则直接返回 NaN 。
- 第 2 步:如果位置 0 处的字符是数字,或者可以转换为有效数字,则继续解析位置 1 处的字符,如果不是有效数字,则直接返回位置 0 处的有效数字。
- 第 3 步:以此类推,按照自左向右的顺序,逐个分析每个字符,直到发现非数字字符为止,parseInt() 将把前面分析合法的数字字符全部转换为数值并返回。
举几个简单的例子,如下代码所示
document.write(parseInt("AllenSu666")+""+"<br/>"); // 返回值 NaN
document.write(parseInt("100abc")+""+"<br/>"); // 返回数字 100
document.write(parseInt("3.1415")+""+"<br/>"); // 返回数字 3
浏览器运行效果如下
这里简单分析一下结果
解析 “AllenSu666” 时,位置 0 处的字符是 A ,是一个字母,不是有效数字,所以直接返回了 NaN 。
解析 “100abc” 时,位置 0 处的字符是 “1”,是一个有效数字,所以继续往后解析,直到位置 3 处解析出来的不是一个有效数字,而是一个字母 a ,所以返回之前的有效字符,即 100 。
解析 “3.1415” 时,位置 0 处的字符是 “3”,位置 1 处的字符是一个小数点,对于 parseInt() 来说,浮点数中的点号属于非法字符,因此不会转换小数部分值,所以返回的结果是 3 。
再来看一个特殊的例子
代码如下
document.write(parseInt("+10")+""+"<br/>");
document.write(parseInt("-20")+""+"<br/>");
这段代码解析出来的会是什么呢 ?浏览器运行效果如下
“+10” 解析出来的结果是 10 ,"-20" 解析出来的结果是 -20 。位置 0 处的字符明明不是一个有效数字啊 ?为什么不是 NaN 呢 ?
那是因为对于 parseInt() 来说,加号 “+” 和减号 “-” 也是可以转换的,因为加号和减号在数学上其实就是表示一个数的正和负,所以 parseInt() 可以接受第一个字符是加号或减号,同理,下面的 parseFloat() 也有这个特点。
二:parseFloat()
parseFloat() 也是一个全局方法,它可以把值转换为浮点数。能够识别第一个出现的小数点,而第二个小数点会被视为非法。它的解析过程与 parseInt() 相同。
举几个简单的例子,如下代码所示
document.write(parseFloat("JavaScript666")+""+"<br/>"); // 返回值 NaN
document.write(parseFloat("123")+""+"<br/>"); // 返回数字 123
document.write(parseFloat("123abc")+""+"<br/>"); // 返回数字 123
document.write(parseFloat("3.1415")+""+"<br/>"); // 返回数字 3.1415
document.write(parseFloat("3.14.15")+""+"<br/>"); // 返回数字 3.14
浏览器运行效果如下
解析过程上面已经说过了,也比较简单,所以不再分析这几个答案了。
特别说明:在使用 parseInt() 和 parseFloat() 时,两者解析时对进制的要求是不一样的,有兴趣的可以查一下这方面的内容。
方式 ③:使用乘号 * 运算符
先看一段简单的代码,如下所示
var a = 1;
var b ="2";
document.write(a+b);
这段代码运行的结果是"12",如果现在改成下面一行代码,如下所示
var a = 1;
var b ="2";
document.write(a+b*1));
此时运算的结果又是多少呢 ?浏览器运行效果如下
运算结果为 3 ,可见字符串 “2” 在乘以 1 后返回的结果是数字 2 了,这里使用 typeof 运算符检测一下,如下代码
document.write(typeof (b*1));
浏览器运行效果如下
可见,字符串在乘以一个数字后,数据类型已经从转换为了 Number 类型,这个乘以的数字不是必须是 1 ,任何非 0 数字皆可。
总结:
在 JavaScript 中,如果变量乘以一个数字,则变量会自动转换为数值,如果值无法被转换为合法的数值,则返回 NaN 。
二:“数字” 转换为 “字符串”
在 JavaScript 中,将数字转换为字符串有两种方式,
方式 ①:与空字符串相加
当值与空字符串相加时,JavaScript 会自动把值转换为字符串,如果你想将一个数字转换为字符串,而又不增加多余的字符,就可以将这个数字加上一个空字符串。
下面举几个简单但却有代表性的例子
例一:数字 转换为字符串,返回数字本身
如下代码所示
var n = 10;
n = n + "";
document.write(n + "<br/>"); // 显示 n 的值
document.write(typeof n); // 显示 n 的数据类型
浏览器运行效果如下
n 的值虽然看着还是 10 ,但其数据类型已经是 String 类型了,而不是一个数字。
例二:布尔值 转换为字符串,返回字符串 “true” 或 “false”
如下代码所示
var isBool = true;
isBool = isBool + "";
document.write(typeof isBool); // 显示 isBool 的数据类型
浏览器运行效果如下
由结果可知,变量 isBool 的数据类型已经从 Boolean 转换为了 String 类型。
例三:数组 转换为字符串,返回数组各个元素的值,并以逗号隔开。如果是空数组,则返回空字符串
如下代码所示
var array = [10,20,30,40];
array = array + "";
document.write(array);
浏览器运行效果如下
从结果来看,这就好比是通过一个 for 循环,获得数组中的所有值一样。
方式 ②:使用 toString() 方法
toString() 是 Object 类型的原型方法,Number 子类继承该方法后,重写了 toString() ,允许传递一个整数参数,数字默认是十进制。
一:如果省略参数
例一:
当为简单的值调用 toString() 方法时,JavaScript 会自动把它们封装为对象,然后再调用 toString() 方法,获取对象的字符串表示,举一个简单的例子,如下代码
var a = 123;
a = a.toString();
document.write(a + "<br/>"); // 返回字符串 "123"
document.write(typeof a);
浏览器运行效果如下
前面将一个数字与一个空字符串相加,实际上也是调用 toString() 方法完成的,只不过这是 JavaScript 自动调用 toString() 方法去实现的。
例二:
再来看一个特殊的例子,如下代码
var a = 1.0000;
var b = 0.0001;
document.write(a.toString() + "<br/>"); // 返回字符串 "1"
document.write(b.toString() + "<br/>"); // 返回字符串 "0.0001"
浏览器运行效果如下
toString() 方法能够直接输出整数和浮点数,保留小数位。小数位末尾的零会被清除。
二:如果设置参数
前面说了,省略 toString() 的参数时,默认是十进制输出,所以如果你给的数值是二进制、八进制或者十六进制,toString() 方法会先把它们转换为十进制数值之后再输出。
如果设置参数,toString() 方法会根据参数把数值转换为对应进制的值之后,再以字符串显示。
举一个例子,如下代码所示
var value = 10; // 十进制数值 10
document.write(value.toString(2) + "<br/>"); // 返回二进制数字字符串"1010"
document.write(value.toString(8) + "<br/>"); // 返回八进制数字字符串"12"
document.write(value.toString(16) + "<br/>"); // 返回十六进制数字字符串"a"
浏览器运行效果如下
最后的总结
JavaScript 能够根据运算环境自动转接变量的类型。在自动转换中,JavaScript 一般根据运算的类型环境,按需进行转换。
如果在执行字符串连接操作,会把数字转换为字符串;
如果在执行基本数学运算,则会尝试把字符串转换为数值:
如果在逻辑运算环境中,则会尝试把值转换为布尔值等。
博客后记:
其实要实现字符串转换为数字,数字转换为字符串几行话就可以给说完,如果你把本篇博客看完了,你会发现有些知识点不是我们会用就行,也要知道一些它的特殊情况以及注意事项,而不是仅仅停留在会用阶段。
你的问题得到解决了吗?欢迎在评论区留言。
赠人玫瑰,手有余香,如果觉得文章不错,希望可以给个一键三连,感谢。
技术是一点一点积累的,大神也不是一天就可以达到的。原地不动就是退步,所以每天进步一点点。
结束语
最后,附上一句格言:"好学若饥,谦卑若愚",望共勉。