个性化阅读
专注于IT技术分析

JS数字类型及其操作 – JavaScript教程

点击下载

上一章JavaScript教程请查看:JS字符串及其操作

在本教程中,你将学习如何用JavaScript表示数字,并学习JS数字类型的相关操作。

JS使用数字类型

JavaScript支持可以用十进制、十六进制或八进制表示法表示的整数和浮点数。与其他语言不同,JavaScript并不区别对待整数和浮点数。JavaScript中的所有数字都表示为浮点数。下面是一个用不同格式显示数字的例子:

var x = 2;  // 整数
var y = 3.14;  // 浮点数
var z = 0xff;  // 十六进制数

特别大的数字可以用指数表示,例如6.02e+23(与6.02×10^23相同)。

var x = 1.57e4;  // 等价于 15700
var y = 4.25e+6;  // 等价于 4.25e6 or 4250000
var z = 4.25e-6;  // 等价于 0.00000425

提示: JavaScript中最大的安全整数是9007199254740991(2^51 -1),而最小的安全整数是-9007199254740991(-(2^51 -1))。

数字也可以用十六进制表示法表示(以16为基数),十六进制数字以0x为前缀,它们通常用来表示颜色。这里有一个例子:

var x = 0xff;  // 等价于 255
var y = 0xb4;  // 等价于 180
var z = 0x00;  // 等价于 0

注意: 整数可以用十进制、十六进制和八进制表示,浮点数可以用十进制或指数表示法表示。

对数字和字符串进行操作

正如你在前几章中所知道的,+运算符用于加法和拼接。因此,对数字和字符串执行数学运算可能会产生有趣的结果。下面的示例将向你展示添加数字时会发生什么

var x = 10;
var y = 20;
var z = "30";

// 用数字加数字,结果是数字的和
console.log(x + y); // 30

// 用一个字符串添加一个字符串,结果将是字符串连接
console.log(z + z); // '3030'

// 用字符串添加数字,结果将是字符串连接
console.log(x + z); // '1030'

// 添加一个带数字的字符串,结果将是字符串连接
console.log(z + x); // '3010'

// 添加字符串和数字,结果将是字符串连接
console.log("结果: " + x + y); // '结果: 1020'

// 添加数字和字符串,从左到右执行计算
console.log(x + y + z); // '结果: 3030'

如果仔细观察上面的示例,你会发现最后一个操作的结果不仅仅是简单的字符串连接,因为具有相同优先级的操作符是从左到右求值的。这就是为什么,因为变量x和y都是数字,它们首先被添加,然后结果与变量z连接,z是一个字符串,因此最终结果是30 +“30”=“3030”。

但是,如果你执行其他的数学运算,如乘法、除法或减法,结果将是不同的。JavaScript将自动转换数字字符串(即字符串包含数值)在所有数字操作的数字,如下例所示:

var x = 10;
var y = 20;
var z = "30";

// 从一个数中减去一个数
console.log(y - x); // 10

// 从数字串中减去一个数字
console.log(z - x); // 20

// 用数字串乘一个数字
console.log(x * z); // 300

// 用数字串除数字
console.log(z / x); // 3

此外,如果尝试用非数字字符串乘或除数字,它将返回NaN(不是数字)。同样,如果你在数学运算中使用NaN,结果也是NaN。

var x = 10;
var y = "foo";
var z = NaN;

// 从非数字字符串中减去一个数字
console.log(y - x); // NaN

// 用非数字字符串乘一个数字
console.log(x * y); // NaN

// 用非数字字符串除数字
console.log(x / y); // NaN

// 将NaN添加到数字中
console.log(x + z); // NaN
						
// 将NaN添加到字符串中
console.log(y + z); // fooNaN

表示无穷大

无穷大表示一个JavaScript无法处理的数字。JavaScript有特殊的关键字Infinity 和-Infinity 分别表示正无穷和负无穷。例如,除以0等于无穷大,如下所示:

var x = 5 / 0;
console.log(x); // Infinity

var y = -5 / 0;
console.log(y); // -Infinity

注:Infinity是一个特殊的值,表示数学上的∞,它大于任何数,运算符的类型为无穷大的值返回数字。

避免精度问题

有时,对浮点数的操作会产生意想不到的结果,如下所示:

var x = 0.1 + 0.2;
console.log(x) // 0.30000000000000004

可以看到,结果是0.30000000000000004,而不是预期的0.3。这种差异称为表示错误或舍入错误。这是因为JavaScript和许多其他语言在内部使用二进制(以2为基数)形式来表示十进制(以10为基数)数字。不幸的是,大多数小数不能以二进制形式精确表示,所以会出现一些小的差异。

为了避免这个问题,你可以使用这样的解决方案:

var x = (0.1 * 10 + 0.2 * 10) / 10;
console.log(x) // 0.3

JavaScript将浮点数改为17位,在大多数情况下,这已经足够精确了。此外,在JavaScript整数(没有小数部分或指数表示法的数字)是准确的高达15位,如下例所示:

var x = 999999999999999;
console.log(x); // 999999999999999

var y = 9999999999999999;
console.log(y); // 10000000000000000

对数字进行运算

JavaScript提供了几个属性和方法来执行对数值的操作。正如你在前面几章中已经知道的,在JavaScript中,当你使用属性访问表示法(即点表示法)引用原始数据类型时,它们的行为类似于对象。

在下面几节中,我们将研究最常用的数字方法。

字符串解析为整数

可以使用parseInt()方法来解析字符串中的整数。这种方法在处理诸如CSS单元(如50px、12pt等)之类的值并希望从中提取数值时特别方便。

如果parseInt()方法遇到指定基中不是数字的字符,它将停止解析并返回解析到该点的整数值。如果第一个字符不能转换成数字,则该方法将返回NaN(不是数字)。

允许开头和结尾空格。这里有一个例子:

console.log(parseInt("3.14"));  // 3
console.log(parseInt("50px"));  // 50
console.log(parseInt("12pt"));  // 12
console.log(parseInt("0xFF", 16));  // 255
console.log(parseInt("20 years"));  // 20
console.log(parseInt("Year 2048"));  // NaN
console.log(parseInt("10 12 2018"));  // 10

注意: parseInt()方法将数字截短为整数值,但不应将其用作Math.floor()方法的替代。

类似地,你可以使用parseFloat()方法来解析字符串中的浮点数,parseFloat()方法的工作方式与parseInt()方法相同,只是它同时检索整数和带小数的数字。

console.log(parseFloat("3.14"));  // 3.14
console.log(parseFloat("50px"));  // 50
console.log(parseFloat("1.6em"));  // 1.6
console.log(parseFloat("124.5 lbs"));  // 124.5
console.log(parseFloat("weight 124.5 lbs"));  // NaN
console.log(parseFloat("6.5 acres"));  // 6.5

将数字转换为字符串

toString()方法可用于将数字转换为其等效的字符串。此方法可选地接受范围为2到36的整数参数,指定用于表示数值的基数。这里有一个例子:

var x = 10;
var y = x.toString();
console.log(y);  // '10'
console.log(typeof y);  // string
console.log(typeof x);  // number

console.log((12).toString());  // '12'
console.log((15.6).toString());  // '15.6'
console.log((6).toString(2));  // '110'
console.log((255).toString(16));  // 'ff'

用指数符号格式化数字

可以使用toexponent()方法以指数形式格式化或表示数字。此方法可选地接受指定小数点后位数的整数参数。此外,返回的值是字符串而不是数字。这里有一个例子:

var x = 67.1234;

console.log(x.toExponential());  // 6.71234e+1
console.log(x.toExponential(6));  // 6.712340e+1
console.log(x.toExponential(4));  // 6.7123e+1
console.log(x.toExponential(2));  // 6.71e+1

注意: 指数表示法对于表示非常大或非常小的数量级非常有用。例如,62500000000可以写成625e+8或6.25e+10。

将数字格式化为固定的小数

当你想要格式化小数点右边有固定位数的数字时,可以使用toFixed()方法。该方法返回的值是一个字符串,它在小数点后精确地指定了位数。如果没有指定或省略digit参数,则将其视为0。这里有一个例子:

var x = 72.635;

console.log(x.toFixed());  // '73' (注意四舍五入,没有小数部分)
console.log(x.toPrecision(2));  // '72.64' (注意舍入)
console.log(x.toPrecision(1));  // '72.6'

var y = 6.25e+5;
console.log(y.toFixed(2)); // '625000.00'

var z = 1.58e-4;
console.log(z.toFixed(2));  // '0.00' (因为1.58e-4等于0.000158)

精确格式化数字

如果需要最合适的数字形式,可以使用toPrecision()方法,此方法返回一个字符串,该字符串表示指定精度的数字。

如果精度足够大,可以包含整数部分的所有数字,则使用定点表示法对数字进行格式化。否则,数字将使用指数符号进行格式化。精度参数是可选的。这里有一个例子:

var x = 6.235;

console.log(x.toPrecision());  // '6.235'
console.log(x.toPrecision(3));  // '6.24' (注意舍入)
console.log(x.toPrecision(2));  // '6.2'
console.log(x.toPrecision(1));  // '6'

var y = 47.63;
console.log(y.toPrecision(2)); // '48' (注意四舍五入,没有小数部分)

var z = 1234.5;
console.log(z.toPrecision(2));  // '1.2e+3'

求可能的最大和最小的数

Number对象还有几个与之关联的属性。这个Number.MAX_VALUE和Number.MIN_VALUE属性表示JavaScript能够处理的最大和最小(接近于0,不是最负的)可能的正数。它们是常量,实际值分别为1.7976931348623157e+308和5e-324。

在可能的数字范围之外的数字用一个常数来表示,POSITIVE_INFINITY或Number.NEGATIVE_INFINITY。这里有一个例子:

var a = Number.MAX_VALUE;
console.log(a); // 1.7976931348623157e+308

var b = Number.MIN_VALUE;
console.log(b); // 5e-324

var x = Number.MAX_VALUE * 2;
console.log(x); // Infinity

var y = -1 * Number.MAX_VALUE * 2;
console.log(y); // -Infinity

此外,请参阅JavaScript数学操作一章,了解舍入数字、生成随机数、从一组数字中查找最大值或最小值等。

赞(0)
未经允许不得转载:srcmini » JS数字类型及其操作 – JavaScript教程

评论 抢沙发

评论前必须登录!