上一章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))。
【JS数字类型及其操作 – JavaScript教程】数字也可以用十六进制表示法表示(以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);
// Infinityvar 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);
// 999999999999999var 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);
// numberconsole.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+308var b = Number.MIN_VALUE;
console.log(b);
// 5e-324var x = Number.MAX_VALUE * 2;
console.log(x);
// Infinityvar y = -1 * Number.MAX_VALUE * 2;
console.log(y);
// -Infinity
此外,请参阅JavaScript数学操作一章,了解舍入数字、生成随机数、从一组数字中查找最大值或最小值等。
推荐阅读
- JS if…else条件语句 – JavaScript教程
- JS字符串及其操作 – JavaScript教程
- JS事件和事件处理器 – JavaScript教程
- JS操作符 – JavaScript教程
- JS数据类型 – JavaScript教程
- JS生成输出 – JavaScript教程
- JS使用变量 – JavaScript教程
- JS基本语法 – JavaScript教程
- 开始使用JS编程 – JavaScript教程