【JavaScript 教程系列第 7 篇】如何将 JavaScript 中的字符串转换为数字，数字转换为字符串

这是【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")+""+"");	// 返回值 NaN
	document.write(parseInt("100abc")+""+"");		// 返回数字 100
	document.write(parseInt("3.1415")+""+"");		// 返回数字 3

浏览器运行效果如下 这里简单分析一下结果

解析 “AllenSu666” 时，位置 0 处的字符是 A ，是一个字母，不是有效数字，所以直接返回了 NaN 。

解析 “100abc” 时，位置 0 处的字符是 “1”，是一个有效数字，所以继续往后解析，直到位置 3 处解析出来的不是一个有效数字，而是一个字母 a ，所以返回之前的有效字符，即 100 。

解析 “3.1415” 时，位置 0 处的字符是 “3”，位置 1 处的字符是一个小数点，对于 parseInt() 来说，浮点数中的点号属于非法字符，因此不会转换小数部分值，所以返回的结果是 3 。

再来看一个特殊的例子

代码如下

	document.write(parseInt("+10")+""+"");
	document.write(parseInt("-20")+""+"");

这段代码解析出来的会是什么呢 ？浏览器运行效果如下 “+10” 解析出来的结果是 10 ，"-20" 解析出来的结果是 -20 。位置 0 处的字符明明不是一个有效数字啊 ？为什么不是 NaN 呢 ？

那是因为对于 parseInt() 来说，加号 “+” 和减号 “-” 也是可以转换的，因为加号和减号在数学上其实就是表示一个数的正和负，所以 parseInt() 可以接受第一个字符是加号或减号，同理，下面的 parseFloat() 也有这个特点。

二：parseFloat() parseFloat() 也是一个全局方法，它可以把值转换为浮点数。能够识别第一个出现的小数点，而第二个小数点会被视为非法。它的解析过程与 parseInt() 相同。

举几个简单的例子，如下代码所示

	document.write(parseFloat("JavaScript666")+""+"");	// 返回值 NaN
	document.write(parseFloat("123")+""+"");			// 返回数字 123
	document.write(parseFloat("123abc")+""+"");		// 返回数字 123
	document.write(parseFloat("3.1415")+""+"");		// 返回数字 3.1415
	document.write(parseFloat("3.14.15")+""+"");		// 返回数字 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 + "");  // 显示 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 + "");  // 返回字符串 "123"
	document.write(typeof a);

浏览器运行效果如下 前面将一个数字与一个空字符串相加，实际上也是调用 toString() 方法完成的，只不过这是 JavaScript 自动调用 toString() 方法去实现的。

例二： 再来看一个特殊的例子，如下代码

	var a = 1.0000;
	var b = 0.0001;
	document.write(a.toString() + "");  // 返回字符串 "1"
	document.write(b.toString() + "");  // 返回字符串 "0.0001"

浏览器运行效果如下 toString() 方法能够直接输出整数和浮点数，保留小数位。小数位末尾的零会被清除。

二：如果设置参数 前面说了，省略 toString() 的参数时，默认是十进制输出，所以如果你给的数值是二进制、八进制或者十六进制，toString() 方法会先把它们转换为十进制数值之后再输出。

如果设置参数，toString() 方法会根据参数把数值转换为对应进制的值之后，再以字符串显示。

举一个例子，如下代码所示

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

浏览器运行效果如下

最后的总结

JavaScript 能够根据运算环境自动转接变量的类型。在自动转换中，JavaScript 一般根据运算的类型环境，按需进行转换。

如果在执行字符串连接操作，会把数字转换为字符串； 如果在执行基本数学运算，则会尝试把字符串转换为数值： 如果在逻辑运算环境中，则会尝试把值转换为布尔值等。

博客后记： 其实要实现字符串转换为数字，数字转换为字符串几行话就可以给说完，如果你把本篇博客看完了，你会发现有些知识点不是我们会用就行，也要知道一些它的特殊情况以及注意事项，而不是仅仅停留在会用阶段。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语 技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。 最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。