ECMAScript 数据类型之Number类型

 更新时间:2022年06月04日 10:06:51   作者:​ Shrimpsss   ​  
这篇文章主要介绍了 ECMAScript 数据类型之Number类型,Number类型使用IEEE 754格式表示整数和浮点值,更多相关内容请需要的小伙伴参考下面文章内容

前言

本文为【JSRedBook】中数据类型的篇章, 主要讲述 ECMAScript 的 6 种简单数据类型(原始类型)中的其中一种:Number 类型;主要说明五个方面:Number定义浮点值值的范围NaN与 数值转换

Number 类型:

Number 类型使用 IEEE 754 格式表示整数和浮点值(在某些语言中也叫双精度值),不同的数值类型相应地也有不同的数值字面量格式。

练习场景

最基本的数值字面量格式是十进制整数,如下:

 const intNum = 42;

其他进制

整数也可以用八进制(以 8 为基数)或十六进制(以 16 为基数)字面量表示

八进制

对于八进制字面量,第一个数字必须是零(0),然后是相应的八进制数字(数值 0~7),如果字面量中包含的数字超出了应有的范围,就会忽略前缀的零,后面的数字序列会被当成十进制数。

下面是几个例子:

 let octalNum1 = 070; // 八进制的 56 
 let octalNum2 = 079; // 无效的八进制值,当成 79 处理
 let octalNum3 = 08; // 无效的八进制值,当成 8 处理

注意: 八进制字面量在严格模式下是无效的,会导致 JavaScript 引擎抛出语法错误

原因是ECMAScript 2015 或 ES6 中的八进制值通过前缀 0o 来表示;严格模式下,前缀 0 会被视为语法错误,如果要表示八进制值,应该使用前缀 0o

十六进制

要创建十六进制字面量,必须让真正的数值前缀 0x(区分大小写),然后是十六进制数字(09 以 及 AF),十六进制数字中的字母大小写均可

下面是几个例子:

 let hexNum1 = 0xA; // 十六进制 10 
 let hexNum2 = 0x1f; // 十六进制 31 

使用八进制和十六进制格式创建的数值在所有数学操作中都被视为十进制数值。

注意: 由于 JavaScript 保存数值的方式,实际中可能存在正零(+0)和负零(-0);其中正零和负零在所有情况下都被认为是等同的

浮点值

要定义浮点值,数值中必须包含小数点,而且小数点后面必须至少有一个数字,虽然小数点前面不是必须有整数,但推荐加上

下面是几个例子:

 const floatNum1 = 1.1;
 const floatNum2 = 0.1;
 const floatNum3 = .1; // 有效 但不推荐

因为存储浮点值使用的内存空间是存储整数值的两倍,所以 ECMAScript 总是想方设法把值转换为整数。在小数点后面没有数字的情况下,数值就会变成整数。类似地,如果数值本身就是整数,只是小数点后面跟着 0(如 1.0),那它也会被转换为整数.

下面是几个例子:

 let floatNum1 = 1.; // 小数点后面没有数字,当成整数 1 处理
 let floatNum2 = 10.0; // 小数点后面是零,当成整数 10 处理

科学计数法

科学记数法用于表示一个应该乘以10 的给定次幂的数值,对于非常大或非常小的数值浮点值可以用科学记数法来表示。

ECMAScript 中科学记数法的格式要求是一个数值(整数或浮点数)后跟一个大写或小写的字母 e,再加上一个要乘的 10 的多少次幂。如下:

 let floatNum = 3.125e7; // 等于 31250000 

解法:3.125 作为系数,乘以 10 的 7 次幂,正常也直接书写出来,只是用科学计数法会更加简洁。

小数值

科学记数法也可以用于表示非常小的数值

默认情况下,ECMAScript 会将小数点后至少包含 6 个零的浮点值转换为科学记数法

例如,0.0000003 用科学记数法可以表示为 3e-7 ,又例如 0.000000000000000 03 会被转换为 3e-17;

不清晰的话请看下图:

浮点值精确度

浮点值的精确度最高可达 17 位小数,但在算术计算中远不如整数精确。

举例一个坑, 0.1 加 0.2 得到的不是 0.3,而是 0.30000000000000004,如下:

 /* 这里检测两个数值之和是否等于 0.3 */
 ​
 if (a + b == 0.3) { // 别这么干! 
  console.log("You got 0.3."); 
 } // 并不等于 0.3 因此if中的语句不会执行

如果两个数值分别是 0.05 和 0.25,或者 0.15 和 0.15,那没问题;但如果是 0.1 和 0.2,如前所述,测试将失败。由于这种微小的舍入错误,导致很难测试,因此永远不要测试某个特定的浮点值。

注意: 之所以存在这种舍入错误,是因为使用了 IEEE 754 数值,这种错误并非 ECMAScript 所独有,其他使用相同格式的语言也有这个问题。

值的范围

由于内存的限制,ECMAScript 并不支持表示这个世界上的所有数值

最大值与最小值

ECMAScript 可以表示的最小数值保存在 Number.MIN_VALUE 中,这个值在多数浏览器中是 5e-324;可以表示的最大数值保存在 Number.MAX_VALUE 中,这个值在多数浏览器中是1.7976931348623157e+308。

小知识: 使用 Number.NEGATIVE_INFINITY(负无穷大) 和 Number.POSITIVE_INFINITY(正无穷大) 也可以获取正负 Infinity

Infinity

如果某个计算得到的数值结果超出了 JavaScript 可以表示的范围,那么这个数值会被自动转换为一个特殊的 Infinity(无穷)值;任何无法表示的负数以 -Infinity(负无穷大)表示,任何无法表示的正数以 Infinity(正无穷大)表示。

isFinite() 函数

如果计算返回正 Infinity 或负 Infinity,则该值将不能再进一步用于任何计算

这是因为 Infinity 没有可用于计算的数值表示形式,如果要确定一个值是不是有限大(即介于 JavaScript 能表示的最小值和最大值之间),可以使用 isFinite()函数,如下所示:

 let result = Number.MAX_VALUE + Number.MAX_VALUE; 
 console.log(isFinite(result)); // false 

注意: 虽然超出有限数值范围的计算并不多见,但总归还是有可能的;因此在计算非常大或非常小的数值时,有必要检测一下计算结果是否超出范围。

NaN

有一个特殊的数值叫 NaN,意思是 Not a Number(不是数值),用于表示本来要返回数值的操作失败了(而不是抛出错误)。

练习场景

比如,用 0 除任意数值在其他语言中通常都会导致错误,从而中止代码执行。

但在 ECMAScript 中,0、 +0 或 -0 相除都会返回 NaN

 console.log( 0/0 ); // NaN 
 console.log( -0/+0 ); // NaN 

如果分子是非 0 值,分母是有符号 0 或无符号 0,则会返回 Infinity 或 -Infinity

 console.log( 5/0 );  // Infinity 
 console.log( 5/-0 );  // -Infinity 

NaN特性

任何涉及 NaN 的操作始终返回 NaN(如 NaN/10),并且 NaN 不等于包括 NaN 在内的任何值。

例如,下面的比较操作会返回 false:

 console.log(NaN == NaN); // false 

isNaN()函数

ECMAScript 提供了 isNaN()函数用于判断检测数值。

用法: 该函数接收一个参数,可以是任意数据类型,然后判断这个参数是否 “不是数值”。

性质: 把一个值传给 isNaN() 后,该函数会尝试把它转换为数值;某些非数值的值可以直接转换成数值,如字符串"10"或布尔值;任何不能转换为数值的值都会导致这个函数返回true

语法: isNaN(vallue) 必传,参数为要检测的值

列举了5种常见场景,如下:

 /* isNaN:[潜意思]你是不是非数值或者不能转数值呀 */
 ​
 console.log(isNaN(NaN)); // true 
 console.log(isNaN(10)); // false,10 是数值
 console.log(isNaN("10")); // false,可以转换为数值 10 
 console.log(isNaN("blue")); // true,不可以转换为数值
 console.log(isNaN(true)); // false,可以转换为数值 1 

解释: 首先测试的是 NaN 本身,因为 Not a Number ,显然会返回 true;接着测试了数值 10

和字符串"10",都返回 false,因为它们的数值都是 10;字符串"blue"不能转换为数值,因此函数返

回 true;布尔值 true 可以转换为数值 1,因此返回 false;

小知识: 虽然不常见,但 isNaN()可以用于测试对象。

机制: 首先会调用对象的 valueOf()方法,然后再确定返回的值是否可以转换为数值;如果不能,再调用 toString() 方法,并测试其返回值。

数值转换

有 3 个函数可以将非数值转换为数值:Number()parseInt()和 parseFloat()

Number()

Number()是转型函数,可用于任何数据类型。

语法

Number(object) 参数可选,为一个 JavaScript 对象;如果没有提供参数,则返回0。

Number()函数转换规则:

  • 布尔值,true 转换为 1,false 转换为 0
  • 数值,直接返回
  • null,返回 0
  • undefined,返回 NaN

字符串,应用以下规则:

  • 如果字符串包含数值字符,包括数值字符前面带加、减号的情况,则转换为一个十进制数值。
  • 因此,Number("123")返回 123,Number("011") 返回 11(忽略前面的零
  • 如果字符串包含有效的浮点值格式如"1.1",则会转换为相应的浮点值(忽略前面的零)。
  • 如果字符串包含有效的十六进制格式如"0xf",则会转换为与该十六进制值对应的十进制整

数值:

如果是空字符串(不包含字符),则返回 0

如果字符串包含除上述情况之外的其他字符,则返回 NaN

对象,调用 valueOf()方法,并按照上述规则转换返回的值。如果转换结果是 NaN,则调用toString()方法,再按照转换字符串的规则转换

Number()函数场景练习

从不同数据类型到数值的转换有时候会比较复杂,看一看 Number() 的转换规则就知道了

下面是几个具体的例子:

 Number("一二三") // NaN
 Number(undefined) //NaN
 Number("001.01") // 1.01
 Number("") // 0
 Number(null) // 0

可以看到,字符串 "一二三" 转换之后是 NaN,因为它找不到对应的数值;undefined转换后为NaN;字符串 001.101 转换后是 1.01,因为前面的零被忽略了;最后空字符串null转换后都是 0

parseInt()

parseInt() 函数会解析一个字符串,并返回一个整数,并且更专注于字符串是否包含数值模式。

语法

parseInt(string, radix)

参数1必选,为要被解析的字符串。

参数2可选,表示要解析的数字的基数;该值介于 2 ~ 36 之间。

parseInt()函数转换规则

  • 字符串最前面的空格会被忽略,从第一个非空格字符开始转换
  • 如果第一个字符不是数值字符、加号或减号,parseInt()立即返回 NaN 这意味着空字符串也会返回 NaN(这一点跟 Number()不一样,它返回 0)。
  • 如果第一个字符是数值字符、加号或减号,则继续依次检测每个字符,直到字符串末尾,或碰到非数值字符;如, "1234blue" 会被转换为 1234,因为 "blue" 会被完全忽略;类似地,"22.5"会被转换为 22,因为小数点不是有效的整数字符。

进制转换

假设字符串中的第一个字符是数值字符,parseInt() 函数也能识别不同的整数格式(十进制、八进制、十六进制);换句话说,如果字符串以"0x"开头,就会被解释为十六进制整数;如果字符串以"0"开头,且紧跟着数值字符,在非严格模式下会被某些实现解释为八进制整数

parseInt()函数练习场景

只有一个参数的场景

请看下面几个例子:

 parseInt("22")  // 22
 parseInt("21.33") // 21
 parseInt(" 34 age 43 ")  // 34
 parseInt("Are you 99 ?")  // NaN
 parseInt("0010") // 10

两个参数的场景

不同的数值格式很容易混淆,因此 parseInt() 也接收第二个参数,用于指定底数(进制数)。如果知道要解析的值是十六进制,那么可以传入 16 作为第二个参数,以便正确解析:

 parseInt("0xAF", 16); // 175 
 parseInt("33",8) // 102

事实上,如果提供了十六进制参数,那么字符串前面的"0x"可以省掉:

 let num1 = parseInt("AF", 16); // 175 
 let num2 = parseInt("AF"); // NaN 

在这个例子中,第一个转换是正确的,而第二个转换失败了。区别在于第一次传入了进制数作为参数,告诉 parseInt() 要解析的是一个十六进制字符串。而第二个转换检测到第一个字符就是非数值字符,随即自动停止并返回 NaN

通过第二个参数,可以极大扩展转换后获得的结果类型。比如:

 let num1 = parseInt("10", 2); // 2 按二进制解析
 let num2 = parseInt("10", 8); // 8 按八进制解析
 let num3 = parseInt("10", 10); // 10,按十进制解析
 let num4 = parseInt("10", 16); // 16,按十六进制解析

因为不传底数参数相当于让 parseInt() 自己决定如何解析,所以为避免解析出错,建议始终传给它第二个参数。

注意: 大多数情况下解析的应该都是十进制数,此时第二个参数就要传入10.

parseFloat()

parseFloat() 函数可解析一个字符串,并返回一个浮点数

从下标 0 开始检测每个字符,解析到字符串末尾或者解析到一个无效的浮点数值字符为止;与parseInt()不同的是它第一次出现的小数点是有效的,但第二次出现的小数点就无效了,此时字符串的剩余字符都会被忽略

语法

parseFloat(string) 参数必选,为要被解析的字符串。

parseFloat()函数转换规则

parseFloat()函数的另一个不同之处在于,它始终忽略字符串开头的零。

这个函数能识别前面讨论的所有浮点格式,以及十进制格式(开头的零始终被忽略),十六进制数值始终会返回 ;因为 parseFloat() 只解析十进制值,因此不能指定底数。

parseInt()函数练习场景

下面是几个示例:

 parseFloat("1234blue"); // 1234,按整数解析
 parseFloat("0xA"); // 0 
 parseFloat("22.5"); // 22.5 
 parseFloat("0022.34.5"); // 22.34 
 parseFloat("3.125e7"); // 31250000 

注意: 如果字符串表示整数(没有小数点或者小数点后面只有一个零),则 parseFloat() 返回整数

总结

Number类型为JavaScript中唯一的数字类型,整数的精度最多为15位

  • 进制: JavaScript 会把数值常量解析,若前缀为 0,则解释为八进制数;如果前缀为 "0x",则解释为十六进制数
  • 浮点值: 要定义浮点值,数值中必须包含小数点,而且小数点后面必须至少有一个数字
  • 科学记数法: 用于表示一个应该乘以10 的给定次幂的数值,较大的数值使用它会更加简洁
  • 无穷: 最大值(Infinity)表示 1.7976931348623157e+308,最小值表示 5e-324
  • NaN: 意思是 Not a Number(不是数值),可以把 Number 对象设置为该值,来指示其不是数字值;任何涉及 NaN 的操作始终返回 NaN,并且 NaN 不等于包括 NaN 在内的任何值
  • Number()适用于向多样类型转型为数值型
  • parseInt()适用于将字符串转换成浮点数
  • parseFloat()适用于将字符串转换成整型数字

到此这篇关于 ECMAScript 数据类型之Number类型的文章就介绍到这了,更多相关 ECMAScript  Number类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Bootstrap实现可折叠分组侧边导航菜单

    Bootstrap实现可折叠分组侧边导航菜单

    这篇文章主要介绍了Bootstrap实现可折叠分组侧边导航菜单的相关资料,需要的朋友可以参考下
    2018-03-03
  • JS+DIV+CSS实现仿表单下拉列表效果

    JS+DIV+CSS实现仿表单下拉列表效果

    这篇文章主要介绍了JS+DIV+CSS实现仿表单下拉列表效果,涉及javascript鼠标事件及页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JavaScript使用原型和原型链实现对象继承的方法详解

    JavaScript使用原型和原型链实现对象继承的方法详解

    这篇文章主要介绍了JavaScript使用原型和原型链实现对象继承的方法,简单讲述了javascript原型与原型链的原理,并结合实例形式详细分析了javascript中对象继承的常见实现技巧,需要的朋友可以参考下
    2017-04-04
  • JavaScript将XML转成JSON的方法

    JavaScript将XML转成JSON的方法

    这篇文章主要介绍了JavaScript将XML转成JSON的方法,实例分析了javascript操作XML文件及格式转化的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JS ES6中的管道运算符详解

    JS ES6中的管道运算符详解

    JavaScript 的管道是一个运算符,写作|>,它的左边是一个表达式,右边是一个函数,这篇文章主要介绍了ES6中的管道运算符,需要的朋友可以参考下
    2023-05-05
  • 深入了解JavaScript 防抖和节流

    深入了解JavaScript 防抖和节流

    这篇文章主要介绍了JavaScript 防抖和节流,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • MUI 上拉刷新/下拉加载功能实例代码

    MUI 上拉刷新/下拉加载功能实例代码

    这篇文章主要介绍了MUI 上拉刷新/下拉加载功能实例代码,包括一些个人心得,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-04-04
  • javascript拖拽应用实例(二)

    javascript拖拽应用实例(二)

    这篇文章主要为大家详细介绍了javascript拖拽应用实例,拖拽条拖到底,验证码显示出来,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 原生js实现俄罗斯方块

    原生js实现俄罗斯方块

    这篇文章主要为大家详细介绍了原生js实现俄罗斯方块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • JavaScript切换搜索引擎的导航网页搜索框实例代码

    JavaScript切换搜索引擎的导航网页搜索框实例代码

    这篇文章主要介绍了javascript切换搜索引擎的导航网页搜索框的实例代码,非常不错,具有参考借鉴价值 ,需要的朋友可以参考下
    2017-06-06

最新评论