JavaScript 类型转换

在 JavaScript 中，类型转换指的是将 “一种数据类型” 转换为 “另外一种数据类型”。在 “JavaScript 运算符” 一节讲到，如果一个数字与一个字符串相加，那么 JavaScript 会自动将数字转换成字符串，然后再与另外一个字符串相加，比如 "2030" + 1000 的结果是"20301000"，而不是 3030。其中，“JavaScript 会自动将数字转换成字符串” 指的就是类型转换。

在 JavaScript 中，类型转换有以下 2 种。

隐式类型转换。
显式类型转换。

隐式类型转换，指的是 JavaScript 自动进行的类型转换。显式类型转换，指的是需要我们手动编写代码来强制进行的类型转换。这两种方式，我们从名字上就很容易区分开来。

对于隐式类型转换，这里就不作介绍了，大家只需要把 “JavaScript 运算符” 这一节中的加号运算符涉及的内容认真学习一遍，就可以走很远了。在接下来的这一节中，我们重点介绍一下显式类型转换的两种情况。

JavaScript “字符串” 转换为 “数字”

在 JavaScript 中，想要将字符串转换为数字，主要有 2 种方式。

Number()。
parseInt() 和 parseFloat()。

Number() 函数可以将任何 “数字型字符串” 转换为数字。那什么是数字型字符串呢？像 "123"、"3.1415"，这些只有数字的字符串就是数字型字符串，而 "hao123"、"100px" 等就不是。

准确来说，parseInt() 和 parseFloat 用于提取 “首字母为数字的任意字符串” 中的数字，其中，parseInt() 提取的是整数部分，parseFloat() 不仅会提取整数部分，还会提取小数部分。

示例 1：使用 Number()

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const a = Number("2030") + 1000;
        console.log(a);
    </script>
</body>
</html>

运行结果如下。

分析：

从之前的学习可以知道，"2030" + 1000 结果是 "20301000"。但由于我们在这里使用了 Number() 方法来将 "2030" 转换为一个数字，因此 Number("2030") + 1000 的结果是 3030。

示例 2：Number() 的更多使用

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        console.log("Number('123')：", Number("123"));
        console.log("Number('3.1415')：", Number("3.1415"));
        console.log("Number('hao123')：", Number("hao123"));
        console.log("Number('100px')：", Number("100px"));
    </script>
</body>
</html>

运行结果如下。

Number('123')：123
Number('3.1415')：3.1415
Number('hao123')：NaN
Number('100px')：NaN

分析：

NaN 指的是 “Not a Number（非数字）” 。从结果可以看出，Number() 函数只能将纯 “数字型字符串” 转换为数字，而不能将其他字符串（即使字符串内有数字字符）转换为数字。

在实际开发中，很多时候我们需要提取类似 "100px" 中的数字，要怎么做呢？这个时候就应该使用 parseInt() 和 parseFloat()，而不是 Number() 了。

示例 3：使用 parseInt()

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        console.log("parseInt('123')：", parseInt("123"));
        console.log("parseInt('3.1415')：", parseInt("3.1415"));
        console.log("parseInt('hao123')：", parseInt("hao123"));
        console.log("parseInt('100px')：", parseInt("100px"));
    </script>
</body>
</html>

运行结果如下。

parseInt('123')：123
parseInt('3.1415')：3
parseInt('hao123')：NaN
parseInt('100px')：100

分析：

从这个例子可以看出来，parseInt() 会从左到右进行判断，如果第 1 个字符是数字，则继续判断，直到出现非数字为止（小数点也是非数字）；如果第 1 个字符是非数字，则直接返回 NaN。

示例 4：parseInt() 的特殊情况

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        console.log("parseInt('+123')：", parseInt("+123"));
        console.log("parseInt('-123')：", parseInt("-123"));
    </script>
</body>
</html>

运行结果如下。

parseInt('+123')：123
parseInt('-123')：-123

分析：

前面我们说过，对于 parseInt() 来说，如果第 1 个字符不是数字，则返回 NaN。但是这里第 1 个字符是加号（+）或减号（-），也就是非数字，parseInt() 同样也是可以转换的。因为加号和减号在数学上其实就是表示一个数的正和负，所以 parseInt() 可以接受第 1 个字符是加号或减号。同样的，parseFloat() 也有这个特点。

示例 5：使用 parseFloat()

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        console.log("parseFloat('123')：", parseFloat("123"));
        console.log("parseFloat('3.1415')：", parseFloat("3.1415"));
        console.log("parseFloat('hao123')：", parseFloat("hao123"));
        console.log("parseFloat('100px')：", parseFloat("100px"));
    </script>
</body>
</html>

运行结果如下。

parseFloat('123')：123
parseFloat('3.1415')：3.1415
parseFloat('hao123')：NaN
parseFloat('100px')：100

分析：

parseFloat() 跟 parseInt() 非常类似，都是从第 1 个字符从左到右开始判断。如果第 1 个字符是数字，则继续判断，直到出现除了数字和小数点之外的字符为止；如果第 1 个字符是非数字，则直接返回 NaN。

在 “首字母是 +、- 或数字的字符串” 中，不管是整数部分，还是小数部分，parseFloat() 同样可以转换，这一点跟 parseInt() 是不一样的。

JavaScript “数字” 转换为 “字符串”

在 JavaScript 中，想要将数字转换为字符串，主要有以下 3 种方式。

与空字符串相加。
使用 toString() 方法。
使用 String() 函数。

示例 6：与空字符串相加

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const a = 2030 + "";
        const b = a + 1000;
        console.log(b);
    </script>
</body>
</html>

运行结果如下。

20301000

分析：

数字加上字符串，JavaScript 会将数字自动转换成字符串。如果想要将一个数字转换为字符串，而又不增加多余的字符，我们可以将这个数字加上一个空字符串。

示例 7：使用 toString() 方法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const a = 2030;
        const b = a.toString() + 1000;
        console.log(b);
    </script>
</body>
</html>

运行结果如下。

20301000

分析：

a.toString() 表示将 a 转换为字符串，也就是 2030 转换为 "2030"，因此最终 b 的值为"20301000"。

示例 8：使用 String() 函数

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const a = 2030;
        const b = String(a) + 1000;
        console.log(b);
    </script>
</body>
</html>

运行结果如下。

20301000

分析：

String() 同样会将 a 转换为字符串，也就是 2030 转换为 "2030"，因此最终 b 的值为"20301000"。实际上，String() 函数比 toString() 方法更加的安全，它用于操作 null 的时候不会报错，比如：

// 使用 String()
const a = null; 
console.log(String(a));

// 使用 toString()
const a = null; 
console.log(a.toString());    // 报错！程序崩溃

在实际开发中，我们更加推荐使用 String()，主要是因为它比 toString() 方法更加安全，并且也比 “与空字符串相加” 这种方式可读性更强。