JavaScript类型转换

精华

小牛编辑

150浏览

2023-03-14

JavaScript 中有五种基本数据类型（其中包括 String、Number、Boolean、Function、Symbol）、三种对象类型（其中包括 Object、Date、Array）和两种特殊类型（其中包括 Null、Undefined）。不同的类型之间运算需要先对数据的类型进行转换，类型转换是将一种数据类型转换为另一种数据类型的过程，在日常开发中，我们会经常用到。

在 JavaScript 有两种类型转换的方式，分别是隐式类型转换和强制类型转换（也叫显式类型转换）。

1. JS 隐式类型转换

隐式转换就是自动转换，通常发生在一些数学运算中。因为 JavaScript 是一种弱类型的语言，在一个表达式中，运算符两边的类型可以不同（比如一个字符串和一个数字相加），JavaScript 解释器会在运算之前将它们的类型进行转换，如下所示：

var str = "https://www.xnip.cn/";
var num = 123;
var res = str + num;
document.write(typeof res);  // 输出：string
document.write(res);         // 输出：https://www.xnip.cn/123

通过运行结果可以看出，将一个字符串与一个数字相加，会得到一个字符串类型的值。如果是在 C语言或者 Java 语言中的话，上面的运算会因为运算符两边的数据类型不一致而导致报错，但在 JavaScript 中则不会，因为在运算之前 JavaScript 解释器会将上面的 num 变量隐式的转换为字符串类型，之后再进行运算。

JavaScript 中，表达式中包含以下运算符时，会发生隐式类型转换：

算术运算符：加（+）、减（-）、乘（*）、除（/）、取模（%）；
逻辑运算符：逻辑与（&&）、逻辑或（||）、逻辑非（!）；
字符串运算符：+、+=。

示例代码如下：

document.write("3" - 2);           // 输出：1
document.write("3" + 2);           // 输出："32"
document.write(3 + "2");           // 输出："32"
document.write("3" * "2");         // 输出：6
document.write("10" / "2");        // 输出：5
document.write(1 + true);          // 输出：2
document.write(1 + false);         // 输出：1
document.write(1 + undefined);     // 输出：NaN
document.write(3 + null);          // 输出：3
document.write("3" + null);        // 输出："3null"
document.write(true + null);       // 输出：1
document.write(true + undefined);  // 输出：NaN

通过运行结果可以得出：

字符串加数字，数字会转换为字符串；
数字减字符串，字符串会转换为数字，如果字符串无法转换为数字（例如"abc"、"JavaScript"），则会转换为 NaN；
字符串减数字，字符串会转换为数字，如果字符串无法转换为数字，则会转换为 NaN；
乘、除运算时，也会先将字符串转换为数字。

2. JS 强制类型转换

与隐式类型转换相反，强制类型转换需要手动进行，在 JavaScript 中，强制类型转换主要是通过调用全局函数来实现的，例如 Number()、Boolean()、parseInt()、parseFloat() 等。

1) 使用 Number() 函数

Number() 函数的语法格式如下：

Number(value);

示例代码如下：

document.write(Number("10.5"));  // 输出：10.5
document.write(Number(true));    // 输出：1
document.write(Number(false));   // 输出：0
document.write(Number(null));    // 输出：0

在使用 Number() 函数时，有以下几点需要注意：

如果参数中只包含数字，将转换为十进制数字，忽略前导 0 以及前导空格，如果数字前面有负（-）号，那么-会保留在转换结果中，如果数字前面有加（+）号，转换后会删掉+号；
如果参数中包含有效浮点数字，将转换为对应的浮点数字，忽略前导 0 以及前导空格，同样对于数字前的正负号，会保留负号忽略正号；
如果参数中包含有效的十六进制数字，将转换为对应大小的十进制数字；
如果参数为空字符串，将转换为 0；
如果参数为布尔值，则将 true 转换为 1，将 false 转换为 0；
如果参数为 null，将转换为 0；
如果参数为 undefined，将转换为 NaN；
如果参数为 Date 对象，将转换为从 1970 年 1 月 1 日到执行转换时的毫秒数；
如果参数为函数、包含两个元素以上的数组对象以及除 Date 对象以外的其他对象，将转换为 NaN；
如果在参数前面包含了除空格、+和-以外的其他特殊符号或非数字字符，或在参数中间包含了包括空格、+和-的特殊符号或非数字字符，将转换为 NaN。

2) 使用 parseInt() 函数

parseInt() 函数的语法格式如下：

parseInt(string, radix);

其中 string 为要转换的值，如果参数不是一个字符串，则会先将其转换为字符串，字符串开头的空白将会忽略；radix 为一个可选参数，表示字符串的基数，取值范围在 2 到 36 之间，例如将 radix 参数设置为 16，则表示将 string 转换为一个十六进制数。

在使用 parseInt() 函数时，有以下几点需要注意：

解析字符串时，会忽略字符串前后的空格，如果字符串第一个字符为负号（-），那么负号会保留在转换结果中，如果字符串第一个字符为正号（+），那么转换后将忽略正号；
如果字符串前面为除空格、正号（+）、负号（-）以外的特殊符号或者除 a～f（或 A～F）之外的非数字字符，那么字符串将不会被解析，返回结果为 NaN；
在字符串中包含空格、小数点（.）等特殊符号或非数字的字符时，解析将在遇到这些字符时停止，并返回已解析的结果；
如果字符串是空字符串，返回结果为 NaN。

示例代码如下：

document.write(parseInt("1101",2));   // 输出：13
document.write(parseInt("a37f",16));  // 输出：41855
document.write(parseInt("123"));      // 输出：123
document.write(parseInt("  123"));    // 输出：123

3) 使用 parseFloat() 函数

parseFloat() 函数的语法格式如下：

parseFloat(string);

其中 string 为要被转换为浮点数的值，如果转换失败，则会返回 NaN。

在使用 parseFloat() 函数时，有以下几点需要注意：

如果在解析的过程中遇到了正号（+）、负号（-）、数字（0-9）、小数点（.）、或科学计数法中的指数（e 或 E）以外的字符，则会忽略该字符以及之后的所有字符，并返回解析到的浮点数；
解析过程中若遇到多个小数点，则会在解析到第二个小数点时停止，并返回第二个小数点之前的解析结果；
解析过程中会忽略参数开头或末尾的空白字符；
如果参数的第一个字符不能被解析为数字，则会返回 NaN。

示例代码如下：

document.write(parseFloat("312.456"));  // 输出：312.456
document.write(parseFloat("-3.12"));    // 输出：-3.12
document.write(parseFloat("+3.12"));    // 输出：3.12
document.write(parseFloat(".12"));      // 输出：0.12