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

时间：2023-12-22 12:24:50

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

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

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

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

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

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

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

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

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

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

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

 var a = '+3.14159test';

 var num1 = Number(a); 　　　　　　　　// NaN

 var num2 = parseInt(a, 10);　　　　　// 3

 var num3 = parseFloat(a);　　　　　　// 3.14159

 var num4 = +a　　　　　　　　　　　　　// NaN

 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；
 var num1 = Number(true);      　　　　//

 var num2 = Number(false);　　　　　　//

 var num3 = Number(12);　　　　　　　//

 var num4 = Number();　　　　　　　　 //

 var num5 = Number(null);　　　　　　 //

 var num6 = Number(undefined);　　　 // NaN

 var num7 = Number('012');　　　　　　//

 var num8 = Number('-012');  　　　　   // -12

 var num9 = Number('  0x12');　　　　　  //

 var num10 = Number('-0x12');　　　     // NaN

 var num11 = Number('12test');             // NaN

 var num12 = Number(　　　　　　　　　 //

 　　{

 　　　　valueOf: function (){

 　　　　　　return '012'

 　　　　},

        toString: function () {

 　　　　　　return '012test'

 　　　　}

 　　}

 )

parseInt函数

特点

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

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

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

转换规则

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

 var num2 = parseInt('   -0xf');              // -15

 var num3 = parseInt('  12test');                 // 12

 var num4 = parseInt('f');                     // NaN

 var num5 = parseInt('f', 16);               //

 var num6 = parseInt('015', 8);            //

 var num7 = parseInt('15.34');             //

 var num8 = parseInt('f', '0x10');　　　　　　//

parseFloat函数

特点

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

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

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

转换规则

  • 如果第一个参数非字符串或数字类型或点字符，则返回NaN；
 var num1 = parseFloat('  15.34.43');        // 15.34

 var num2 = parseFloat('0x123.45');         // 0 因为不支持十六进制

 var num3 = parseFloat('  012.0test');       // 12

一元加和减操作符

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

小结

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

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

相关文章