JavaScript强制类型转换（二）Number数值型

2023-07-01 08:03| 来源: 网络整理| 查看: 265

JavaScript强制类型转换（二）方式一：调用 Number()函数String字符串Boolean值null和undefined 方式二：调用parseInt()函数使用要点局限性方式三：调用parseFloat()函数使用要点两个函数转换其他类型数据方式四：使用算术运算符使用要点将其他数据类型转换为Number数值型

方式一：调用 Number()函数

通过传参重赋值的方式，将各种类型的值转换为number数值型。各类型转换结果：

String字符串

使用要点：

如果是纯数字的字符串，则直接将其转换为数字；如果字符串有非数字的内容，则转换为NaN；如果字符串是一个空串或者是一个全是空格的字符串，则转换为0； Boolean值

true转换为1，false转换为0；

null和undefined

null值转换为0，undefined转换为NaN；

演示代码 // 调用Number()0函数将a转换为Number类型 // 字符串 var a = "123"; a = Number(a); console.log("字符串a转换后类型 = " + typeof a); console.log("字符串a转换后的值 = " + a); // 布尔值 true a = true; a = Number(a); console.log("布尔值a转换后类型 = " + typeof a); console.log("布尔值a转换后的值 = " + a); // 布尔值 false a = false; a = Number(a); console.log("布尔值a转换后类型 = " + typeof a); console.log("布尔值a转换后的值 = " + a); // 特殊类型 null a = null; a = Number(a); console.log("null a转换后类型 = " + typeof a); console.log("null a转换后的值 = " + a); // 特殊类型 undefined a = undefined; a = Number(a); console.log("undefined a转换后类型 = " + typeof a); console.log("undefined a转换后的值 = " + a); 预览结果

预览结果1

方式二：调用parseInt()函数

在使用Number()函数转换非纯数字字符串时，有时会出现无法转换的结果，此时返回值会变成NaN，即非数值型，例如：

a = "193px"; a = Number(a); console.log("字符串a转换后类型 = " + typeof a); console.log("字符串a转换后的值 = " + a);

结果为：预览结果2 虽然类型确实转换为number数值型，但是并没有将数据保留下来。此时，我们就可以使用parseInt()函数或者parseFloat()函数来进行类型转换。

使用要点专门用来适配字符串的转换；parseInt()可以将一个字符串中的有效的整数内容取出来，然后转换为Number；

例如：

// 调用parseInt()函数转换特殊字符串 a = "193px"; a = parseInt(a); console.log("字符串a转换后类型 = " + typeof a); console.log("字符串a转换后的值 = " + a);

结果：预览结果3

局限性

但是，parseInt()函数遇到带有小数点的特殊字符串时，还是存在一定的限制

a = "193.123px"; a = parseInt(a); console.log("字符串a转换后类型 = " + typeof a); console.log("字符串a转换后的值 = " + a);

预览结果4 在这段代码里，我们想要获得的是在px之前，包括小数点之后的全部有效数字；但是，由于parseInt()函数的局限性，我们只能提取到整数的部分。那么这个时候就需要使用到它的兄弟函数，parseFloat()了。

方式三：调用parseFloat()函数使用要点把一个字符串串转换为一个浮点数；作用和parseInt()类似，不同的是它可以获取有效的小数；

例如：

// 调用parseFloat()函数转换特殊字符串 a = "193.123px"; a = parseFloat(a); console.log("字符串a转换后类型 = " + typeof a); console.log("字符串a转换后的值 = " + a);

结果：预览图5 值得注意的是，这里说的能够进行提取的携带数字的字符串，它所携带的一定要为有效的字符串，一些不符合数值型应有格式的数字还是只会提取出有效的部分。

如下演示，一个携带有两个小数点的数字字符串

a = "193.123.456px"; a = parseFloat(a); console.log("字符串a转换后类型 = " + typeof a); console.log("字符串a转换后的值 = " + a);

结果：预览图6

两个函数转换其他类型数据

如果对非String使用parseInt()或parseFloat() 它会先将其转换为String，然后再操作；

例如：

var a = true; a = parseInt(a); console.log("a转换后类型 = " + typeof a); console.log("a转换后的值 = " + a); a = false; a = parseInt(a); console.log("a转换后类型 = " + typeof a); console.log("a转换后的值 = " + a); a = null; a = parseInt(a); console.log("a转换后类型 = " + typeof a); console.log("a转换后的值 = " + a); a = undefined; a = parseInt(a); console.log("a转换后类型 = " + typeof a); console.log("a转换后的值 = " + a);

结果：预览结果7 因为转换后的字符串不存在有效数字部分，所以结果都为NaN(非数值型)；

方式四：使用算术运算符使用要点当对非number类型的值进行运算时，会先将值转换为number再进行运算；任何值和NaN进行运算，结果都是NaN；在同字符串进行算术运算时，除了+加法会出现拼接字符串的情况，其它运算符，包括 - * / 在内都是先将字符串转换为number数值再进行运算；任何值做 - * / 运算时都会自动转换为number，我们可以利用这一特点做隐式的类型转换，可以通过为一个值 -0 *1 /1 来将其转换为number，原理和Number()函数一样，但是使用时更加简单;

虽然使用方法简单，但不推荐使用，所以这里就不做演示了。只要记住，使用时进行的算数运算不能会是影响到原始值的运算即可。

这里附上上一篇的链接：

JavaScript强制类型转换（一）：将其他数据类型转换为String字符串型

这里是万物之恋，我们下次再见了！

【本文地址】

公司简介

联系我们