前端深入浅出Javascript中的数值转换

Posted 2020-10-09 嗨！蜗牛

由于javascript是一门弱类型的语言，在我们的代码中无时无刻不在发生着类型转换，所以了解Javascript中的类型转换对于了解我们认识Javascript的运行原理至关重要。

本文主要从数值转换这一维度来剖析在JS中，数值转换会遵循什么样的规则，有哪些用途？

哪些情况下我们会用到js中的数值转换？

1. 在传统的js中，对元素进行变换、位移、改变大小时，我们经常需要对长度单位进行计算操作；
2. 当我们提供了一个通用add函数，此时需要对传入参数的类型进行限制，不能是非数字格式；
3. 更多场景请关注知乎问答：JavaScript中 Number()函数在哪些场景中用到？

 Javascript中存在哪些数值转换方式？

我们都知道js中存在显式类型转换和隐式类型转换，其中显式类型转换包含：

• Number()
• parseInt()
• parseFloat()
• 一元加和减操作符

隐式类型在js中的体现比较复杂，这里简单罗列以下几种情况：

• 位运算符在操作非数值时，会使用Number()来对变量进行转换，然后进行计算；
• 乘/除/减法操作符；
• 关系操作符（<，>，<=，>=）；
• 相等操作符其中一个变量为数值时，会把另一个变量转换为数值进行比较。

由于js的弱类型特性，隐式类型转换其实是相对而言的，如果你了解了一段代码的类型转换方式，那么它对于你而言，就可以被视为显式转换。

由于Javascript中的隐式类型转换基本都是通过调用Number函数的方式进行的，所以这篇文章主要讨论不同显式类型转换的区别。在讨论之前，我们先看一段代码示例：

1 var a = ‘+3.14159test‘;
2 
3 var num1 = Number(a); 　　　　　　　　// NaN
4 var num2 = parseInt(a, 10);　　　　　// 3
5 var num3 = parseFloat(a);　　　　　　// 3.14159
6 var num4 = +a　　　　　　　　　　　　　// NaN
7 var num5 = -a　　　　　　　　　　　　　// NaN

 Number函数

特点

Number()可以用于转换任何类型。

ECMA规范关于Number转换的规则描述：

https://tc39.github.io/ecma262/#sec-number-objects

转换规则

• 如果参数是Boolean，则如果为true，返回1；false返回0；
• 如果数字类型，直接返回；
• null返回0，undefined返回NaN；
• 如果是对象，则首先调用valueOf方法，如果返回值能转换为数值，则返回；否则调用toString方法，然后将返回值按照其他类型规则转换后的内容返回；
• 如果是字符串
  • 如果只包含数字类型，则返回该数字类型的十进制格式；如果前边有-号，则返回负数；
  • 空字符串返回0；
  • 十六进制字符串返回十进制数字；如果前边有-号，返回NaN；
  • 如果非数字，返回NaN；

 1 var num1 = Number(true);      　　　　// 1
 2 var num2 = Number(false);　　　　　　// 0
 3 var num3 = Number(12);　　　　　　　// 12
 4 var num4 = Number();　　　　　　　　 // 0
 5 var num5 = Number(null);　　　　　　 // 0
 6 var num6 = Number(undefined);　　　 // NaN
 7 var num7 = Number(‘012‘);　　　　　　// 12
 8 var num8 = Number(‘-012‘);  　　　　   // -12
 9 var num9 = Number(‘  0x12‘);　　　　　  // 18
10 var num10 = Number(‘-0x12‘);　　　     // NaN
11 var num11 = Number(‘12test‘);             // NaN
12 var num12 = Number(　　　　　　　　　 // 12
13 　　{
14 　　　　valueOf: function (){
15 　　　　　　return ‘012‘
16 　　　　},
17        toString: function () {
18 　　　　　　return ‘012test‘
19 　　　　}
20 　　}
21 )

parseInt函数

特点

仅用于转换字符串类型，首先会忽略字符串前面的空格。如果字符串一开始是数字或者加减号后边跟数字，则返回该字符串一直到非数字截止。

ECMA规范关于parseInt转换的规则描述

https://tc39.github.io/ecma262/#sec-parseint-string-radix

转换规则

• 如果第一个参数非字符串或数字类型，则返回NaN；
• 第一个参数格式正常，第二个参数不传值
  • 如参数一开始的非空格字符不是非数字且非加减号，则返回NaN
  • 如参数一以0x开头，则以十六进制来解析字符串，并返回该字符串的十进制格式；
  • 如参数一以0开头，则在es3标准中按照八进制来解析，es5标准中按照十进制来解析，最终返回十进制格式；（很重要，不了解会导致一些低版本浏览器莫名其妙的问题）
• 第二个参数传值，首先会将参数二进行Number()转换
  • 如参数二能转换成一个非0数字，则将参数一按照对应进制进行转换
  • 如参数二不能转换成一个非0数字，则按照参数二为空进行处理

1 var num1 = parseInt(‘  0xf‘);                // 15   同parseInt(‘  +0xf‘)
2 var num2 = parseInt(‘   -0xf‘);              // -15
3 var num3 = parseInt(‘  12test‘);                 // 12  
4 var num4 = parseInt(‘f‘);                     // NaN
5 var num5 = parseInt(‘f‘, 16);               // 15
6 var num6 = parseInt(‘015‘, 8);            // 13
7 var num7 = parseInt(‘15.34‘);             // 15
8 var num8 = parseInt(‘f‘, ‘0x10‘);　　　　　　// 15

parseFloat函数

特点

与parseInt类似，但只能接收一个参数，传入字符串只会按照10进制进行解析，会将传入的字符串解析成Double类型数字。

ECMA规范关于parseInt转换的规则描述

https://tc39.github.io/ecma262/#sec-parsefloat-string

转换规则

• 如果第一个参数非字符串或数字类型或点字符，则返回NaN；

1 var num1 = parseFloat(‘  15.34.43‘);        // 15.34
2 var num2 = parseFloat(‘0x123.45‘);         // 0 因为不支持十六进制
3 var num3 = parseFloat(‘  012.0test‘);       // 12

 一元加和减操作符

一元加操作符的功能完全和Number()函数一致；一元减操作符是在加操作符的基础上取负值

小结

当我们可以确定被转换的变量类型是string类型时，推荐优先使用parseFloat，可以当被转换变量为小数的正常使用；当使用parseInt时，推荐使用第二个参数来确定参数一的进制类型，避免因为不同浏览器的兼容问题；

 

在写作过程中，越写越发现牵涉到的知识点很多，或许很多地方存在纰漏、误差。如有问题，还请指正！！！