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 一般根据运算的类型环境，按需进行转换。
如果在执行字符串连接操作，会把数字转换为字符串；
如果在执行基本数学运算，则会尝试把字符串转换为数值：
如果在逻辑运算环境中，则会尝试把值转换为布尔值等。
博客后记：
其实要实现字符串转换为数字，数字转换为字符串几行话就可以给说完，如果你把本篇博客看完了，你会发现有些知识点不是我们会用就行，也要知道一些它的特殊情况以及注意事项，而不是仅仅停留在会用阶段。
如果这篇博客有幸帮到了您，欢迎点击下方链接，和更多志同道合的伙伴一起交流，一起进步。
结束语
