ES6，新增语法整理之数值的扩展

ES6之数值的扩展

一. 数值分隔符

ES2021，允许 JavaScript 的数值使用下划线（_）作为分隔符。

let a = 1_000_000_000_000;
a === 10 ** 12 // true

数值分隔符没有指定间隔的位数，也就是说，可以每三位添加一个分隔符，也可以每一位、每两位、每四位添加一个。

123_00 === 12_300 // true

12345_00 === 123_4500 // true
12345_00 === 1_234_500 // true

// 小数和科学计数法也可以使用数值分隔符。
// 小数
0.000_001

// 科学计数法
1e10_000

数值分隔符有几个使用注意点。

• 不能放在数值的最前面（leading）或最后面（trailing）。
• 不能两个或两个以上的分隔符连在一起。
• 小数点的前后不能有分隔符。
• 科学计数法里面，表示指数的e或E前后不能有分隔符。

// 全部报错
3_.141
3._141
1_e12
1e_12
123__456
_1464301
1464301_

数值分隔符只是一种书写便利，对于 JavaScript 内部数值的存储和输出，并没有影响。

let num = 12_345;

num // 12345
num.toString() // 12345

上面示例中，变量num的值为12_345，但是内部存储和输出的时候，都不会有数值分隔符。

注意
下面三个将字符串转成数值的函数，不支持数值分隔符。

• Number()
• parseInt()
• parseFloat()

Number('123_456') // NaN
parseInt('123_456') // 123

二. Number新增方法

1. Number.isFinite(), Number.isNaN()

Number.isFinite()用来检查一个数值是否为有限的（finite），即不是Infinity。

Number.isFinite(15); // true
Number.isFinite(0.8); // true

// 如果参数类型不是数值，Number.isFinite一律返回false。
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite('foo'); // false
Number.isFinite('15'); // false
Number.isFinite(true); // false

Number.isNaN()用来检查一个值是否为NaN。

Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN('15') // false
Number.isNaN(true) // false
Number.isNaN(9/NaN) // true
Number.isNaN('true' / 0) // true
Number.isNaN('true' / 'true') // true

它们与传统的全局方法isFinite()和isNaN()的区别在于，传统方法先调用Number()将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效。

Number.isFinite()对于非数值一律返回false
Number.isNaN()只有对于NaN才返回true，非NaN一律返回false

isFinite(25) // true
isFinite("25") // true
Number.isFinite(25) // true
Number.isFinite("25") // false

isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false
Number.isNaN(1) // false

2. Number.parseInt(), Number.parseFloat()

ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。

// ES5的写法
parseInt('12.34') // 12
parseFloat('123.45#') // 123.45

// ES6的写法
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45

3. Number.isInteger()

Number.isInteger()用来判断一个数值是否为整数。

Number.isInteger(25) // true
Number.isInteger(25.1) // false
Number.isInteger() // false
Number.isInteger(null) // false
Number.isInteger('15') // false
Number.isInteger(true) // false

JavaScript 内部，整数和浮点数采用的是同样的储存方法，所以 25 和 25.0 被视为同一个值

Number.isInteger(25) // true
Number.isInteger(25.0) // true

三. Math 新增方法

Math.trunc()

Math.trunc方法用于去除一个数的小数部分，返回整数部分。

Math.trunc(4.1) // 4
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(-4.9) // -4
Math.trunc(-0.1234) // -0

// 对于非数值，Math.trunc内部使用Number方法将其先转为数值
Math.trunc('123.456') // 123
Math.trunc(true) //1
Math.trunc(false) // 0
Math.trunc(null) // 0

// 对于空值和无法截取整数的值，返回NaN。
Math.trunc(NaN);      // NaN
Math.trunc('foo');    // NaN
Math.trunc();         // NaN
Math.trunc(undefined) // NaN

四. BigInt 数据类型

Javascript将所有数字都保存成 64 位浮点数，在此标准下，非常大的整数将自动四舍五入。确切地说，JS 中的Number类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间的整数，任何超出此范围的整数值都可能失去精度。

ES2020 引入了一种新的数据类型 BigInt（大整数），BigInt 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示。

// BigInt 类型的数据必须添加后缀n。
1234 // 普通整数
1234n // BigInt


const a = 2172141653n;
const b = 15346349309n;
// BigInt 可以保持精度
a * b // 33334444555566667777n
// 普通整数无法保持精度
Number(a) * Number(b) // 33334444555566670000

// typeof运算符对于 BigInt 类型的数据返回bigint
typeof 123n // 'bigint'

BigInt 与普通整数是两种值，它们之间并不相等

42n === 42 // false

BigInt 可以使用负号（-），但是不能使用正号（+），因为会与 asm.js 冲突

-42n // 正确
+42n // 报错

BigInt 函数
JavaScript 原生提供BigInt函数，可以用它生成 BigInt 类型的数值。转换规则基本与Number()一致，将其他类型的值转为 BigInt。

BigInt(123) // 123n
BigInt('123') // 123n
BigInt(false) // 0n
BigInt(true) // 1n

BigInt()函数必须有参数，而且参数必须可以正常转为数值，下面的用法都会报错。

new BigInt() // TypeError
BigInt(undefined) //TypeError
BigInt(null) // TypeError
BigInt('123n') // SyntaxError
BigInt('abc') // SyntaxError

// 参数如果是小数，也会报错。
BigInt(1.5) // RangeError
BigInt('1.5') // SyntaxError

// 转换规则
Boolean(0n) // false
Boolean(1n) // true
Number(1n)  // 1
String(1n)  // "1"

!0n // true
!1n // false

注意：Number,Math,BigInt还有许多不常用的方法，如需了解，可查看底部参考资料

参考资料
阮一峰 ES6 入门教程