JavaScript 只有一种数字类型。 数字可以带有或不带有小数。
let x = 3.14; // A number with decimals
let y = 3; // A number without decimals
尝试一下 你自己 ”
特大或特小的数字可以用科学(指数)表示法书写:
let x = 123e5; // 12300000
let y = 123e-5; // 0.00123
尝试一下 你自己 ”
与许多其他编程语言不同, JavaScript 没有定义不同类型的数字,例如整数、短整型、长整型、 浮点数等
JavaScript 数字始终存储为双精度浮点数 数字,遵循国际 IEEE 754 标准。
这种格式 以 64 位存储数字,其中数字(小数)存储在位 0 中 到 51、第 52 到 62 位中的指数以及第 63 位中的符号:
Value (aka Fraction/Mantissa) | Exponent | Sign |
---|---|---|
52 bits (0 - 51) | 11 bits (52 - 62) | 1 bit (63) |
整数(没有句点或指数表示法的数字)最多精确到 15 位。
let x = 999999999999999; // x will be 999999999999999
let y = 9999999999999999; // y will be 10000000000000000
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>Integer Precision</h2>
<p>Integers (numbers without a period or exponent notation) are accurate up to 15 digits:</p>
<p id="demo"></p>
<script>
let x = 999999999999999;
let y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
小数位数最多为 17 位。
浮点运算并不总是 100% 准确:
let x = 0.2 + 0.1;
尝试一下 你自己 ”
为了解决上面的问题,可以使用乘法和除法:
let x = (0.2 * 10 + 0.1 * 10) / 10;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Floating point arithmetic is not always 100% accurate:</p>
<p id="demo1"></p>
<p>But it helps to multiply and divide:</p>
<p id="demo2"></p>
<script>
let x = 0.2 + 0.1;
document.getElementById("demo1").innerHTML = "0.2 + 0.1 = " + x;
let y = (0.2*10 + 0.1*10) / 10;
document.getElementById("demo2").innerHTML = "0.2 + 0.1 = " + y;
</script>
</body>
</html>
警告 !!
JavaScript 使用 + 运算符进行加法和连接。
数字已添加。字符串被连接起来。
如果将两个数字相加,结果将是一个数字:
let x = 10;
let y = 20;
let z = x + y;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you add two numbers, the result will be a number:</p>
<p id="demo"></p>
<script>
let x = 10;
let y = 20;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
如果添加两个字符串,结果将是字符串连接:
let x = "10";
let y = "20";
let z = x + y;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you add two numeric strings, the result will be a concatenated string:</p>
<p id="demo"></p>
<script>
let x = "10";
let y = "20";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
如果将数字和字符串相加,结果将是字符串连接:
let x = 10;
let y = "20";
let z = x + y;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you add a number and a numeric string, the result will be a concatenated string:</p>
<p id="demo"></p>
<script>
let x = 10;
let y = "20";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
如果添加一个字符串和一个数字,结果将是一个字符串连接:
let x = "10";
let y = 20;
let z = x + y;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you add a numeric string and a number, the result will be a concatenated string:</p>
<p id="demo"></p>
<script>
let x = "10";
let y = 20;
document.getElementById("demo").innerHTML = "The result is: " + x + y;
</script>
</body>
</html>
一个常见的错误是预期结果为 30:
let x = 10;
let y = 20;
let z = "The result is: " + x + y;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>A common mistake is to expect this result to be 30:</p>
<p id="demo"></p>
<script>
var x = 10;
var y = 20;
document.getElementById("demo").innerHTML =
"The result is: " + x + y;
</script>
</body>
</html>
一个常见的错误是预期结果为 102030:
let x = 10;
let y = 20;
let z = "30";
let result = x + y + z;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>A common mistake is to expect this result to be 102030:</p>
<p id="demo"></p>
<script>
let x = 10;
let y = 20;
let z = "30";
let result = x + y + z;
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
JavaScript 解释器从左到右工作。
首先添加 10 + 20,因为 x 和 y 都是数字。
然后 30 + "30" 被连接起来,因为 z 是一个字符串。
JavaScript 字符串可以包含数字内容:
let x = 100; // x is a number
let y = "100"; // y is a
string
JavaScript 会尝试在所有数字运算中将字符串转换为数字:
这将起作用:
let x = "100";
let y = "10";
let z = x / y;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript will try to convert strings to numbers when dividing:</p>
<p id="demo"></p>
<script>
let x = "100";
let y = "10";
let z = x / y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
这也将起作用:
let x = "100";
let y = "10";
let z = x * y;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript will try to convert strings to numbers when multiplying:</p>
<p id="demo"></p>
<script>
let x = "100";
let y = "10";
let z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
这会起作用:
let x = "100";
let y = "10";
let z = x - y;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript will try to convert strings to numbers when subtracting:</p>
<p id="demo"></p>
<script>
let x = "100";
let y = "10";
let z = x - y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
但这是行不通的:
let x = "100";
let y = "10";
let z = x + y;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript will NOT convert strings to numbers when adding:</p>
<p id="demo"></p>
<script>
let x = "100";
let y = "10";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
在最后一个示例中,JavaScript 使用 + 运算符来连接字符串。
NaN
是 JavaScript 保留字,表示数字不是合法数字。
尝试使用非数字字符串进行算术运算将导致 NaN
(不是 数字):
let x = 100 / "Apple";
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>A number divided by a non-numeric string becomes NaN (Not a Number):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 / "Apple";
</script>
</body>
</html>
但是,如果字符串是数字,则结果将是 数字:
let x = 100 / "10";
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>A number divided by a numeric string becomes a number:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 / "10";
</script>
</body>
</html>
您可以使用全局 JavaScript 函数 isNaN()
判断一个值是否不是数字:
let x = 100 / "Apple";
isNaN(x);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>You can use the global JavaScript function isNaN() to find out if a value is not a number:</p>
<p id="demo"></p>
<script>
let x = 100 / "Apple";
document.getElementById("demo").innerHTML = isNaN(x);
</script>
</body>
</html>
注意 NaN
。如果您在数学运算中使用 NaN
,结果也将为 NaN
:
let x = NaN;
let y = 5;
let z = x + y;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you use NaN in a mathematical operation, the result will also be NaN:</p>
<p id="demo"></p>
<script>
let x = NaN;
let y = 5;
document.getElementById("demo").innerHTML = x + y;
</script>
</body>
</html>
或者结果可能是像 NaN5 这样的串联:
let x = NaN;
let y = "5";
let z = x + y;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you use NaN in a mathematical operation, the result can be a concatenation:</p>
<p id="demo"></p>
<script>
let x = NaN;
let y = "5";
document.getElementById("demo").innerHTML = x + y;
</script>
</body>
</html>
NaN
是一个数字:typeof NaN
返回 数字
:
typeof NaN;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>The typeof NaN is number:</p>
<p id="demo"></p>
<script>
let x = NaN;
document.getElementById("demo").innerHTML = typeof x;
</script>
</body>
</html>
Infinity
(或 -Infinity
)是 JavaScript 在计算超出最大数之外的数字时返回的值 可能的数量。
let myNumber = 2;
// Execute until Infinity
while (myNumber != Infinity) {
myNumber = myNumber * myNumber;
}
除以 0(零)也会生成无穷大
:
let x = 2 / 0;
let y = -2 / 0;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Division by zero generates Infinity;</p>
<p id="demo"></p>
<script>
let x = 2/0;
let y = -2/0;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
Infinity
是一个数字:typeof Infinity
返回 数字
。
typeof Infinity;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Infinity is a number:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = typeof Infinity;
</script>
</body>
</html>
如果数字常量前面带有以下字符,JavaScript 会将其解释为十六进制 0x。
let x = 0xFF;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numeric constants, preceded by 0x, are interpreted as hexadecimal:</p>
<p id="demo"></p>
<script>
let x = 0xFF;
document.getElementById("demo").innerHTML = "0xFF = " + x;
</script>
</body>
</html>
切勿写入带有前导零的数字(例如 07)。
某些 JavaScript 版本会解释 如果数字以前导零书写,则将其视为八进制。
默认情况下,JavaScript 将数字显示为以 10 为基数的小数。
但是您可以使用 toString()
方法从 base 2 输出数字 到基数 36。
十六进制是基数为16。十进制是以 10 为底。 八进制是基数8。二进制是基数2。
let myNumber = 32;
myNumber.toString(32);
myNumber.toString(16);
myNumber.toString(12);
myNumber.toString(10);
myNumber.toString(8);
myNumber.toString(2);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>The toString() method can output numbers from base 2 to 36:</p>
<p id="demo"></p>
<script>
let myNumber = 32;
document.getElementById("demo").innerHTML =
"Decimal 32 = " + "<br><br>" +
"Hexatrigesimal (base 36): " + myNumber.toString(36) + "<br>" +
"Duotrigesimal (base 32): " + myNumber.toString(32) + "<br>" +
"Hexadecimal (base 16): " + myNumber.toString(16) + "<br>" +
"Duodecimal (base 12): " + myNumber.toString(12) + "<br>" +
"Decimal (base 10): " + myNumber.toString(10) + "<br>" +
"Octal (base 8): " + myNumber.toString(8) + "<br>" +
"Binary (base 2): " + myNumber.toString(2);
</script>
</body>
</html>
通常 JavaScript 数字是从文字创建的原始值:
let x = 123;
但数字也可以使用关键字 new
定义为对象:
let y = new Number(123);
let x = 123;
let y = new Number(123);
不要创建 Number 对象。
new
关键字使代码变得复杂并降低执行速度。
数字对象可能会产生意想不到的结果:
使用 ==
运算符时,x 和 y 相等:
let x = 500;
let y = new Number(500);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numbers and Number objects cannot be safely compared:</p>
<p id="demo"></p>
<script>
// x is a number
let x = 500;
// y is an object
let y = new Number(500);
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
使用 ===
运算符时,x 和 y 不等于。
let x = 500;
let y = new Number(500);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numbers and Number objects cannot be safely compared:</p>
<p id="demo"></p>
<script>
// x is a number
let x = 500;
// y is an object
let y = new Number(500);
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
请注意 (x==y)
和 (x===y)
之间的区别。
(x == y)
是真是假?
let x = new Number(500);
let y = new Number(500);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript objects cannot be compared:</p>
<p id="demo"></p>
<script>
// x is an object
let x = new Number(500);
// y is an object
let y = new Number(500);
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
(x === y)
是真是假?
let x = new Number(500);
let y = new Number(500);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript objects cannot be compared:</p>
<p id="demo"></p>
<script>
// x is an object
let x = new Number(500);
// y is an object
let y = new Number(500);
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
比较两个 JavaScript 对象总是返回false。
如需完整的编号参考,请访问我们的:
完整的 JavaScript 数字参考。
该参考包含所有 Number 属性和方法的描述和示例。