加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > JS > JavaScript基础

JavaScript 数字 操作 详解

JavaScript基础 2022-04-25 01:31:55小码哥的IT人生shichen

JavaScript 数字

JavaScript 只有一种数值类型。

书写数值时带不带小数点均可。

JavaScript 数值

书写 JavaScript 数值既可以带小数点，也可以不带：

示例代码：

var x = 3.14;    // 带小数点的数值
var y = 3;       // 不带小数点的数值

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>书写 JavaScript 数值既可以带小数点，也可以不带：</p>
<p id="demo"></p>
<script>
var x = 3.14;
var y = 3;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>

运行结果：

Javascript 数字

书写 Javascript 数值既可以带小数点，也可以不带：

3.14
3

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

超大或超小的数可通过科学计数法来写：

示例代码：

var x = 123e5;    // 12300000
var y = 123e-5;   // 0.00123

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>超大或超小的数可通过科学（指数）计数法来写：</p>
<p id="demo"></p>
<script>
var x = 123e5;
var y = 123e-5;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>

运行结果：

Javascript 数字

超大或超小的数可通过科学（指数）计数法来写：

12300000
0.00123

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

JavaScript 数值始终是 64 位的浮点数

与许多其他编程语言不同，JavaScript 不会定义不同类型的数，比如整数、短的、长的、浮点的等等。

JavaScript 数值始终以双精度浮点数来存储，根据国际 IEEE 754 标准。

此格式用 64 位存储数值，其中 0 到 51 存储数字（片段），52 到 62 存储指数，63 位存储符号：

值(aka Fraction/Mantissa) 指数 符号
52 bits(0 - 51) 11 bits (52 - 62) 1 bit (63)

精度

整数（不使用指数或科学计数法）会被精确到 15 位。

示例代码：

var x = 999999999999999;   // x 将是 999999999999999
var y = 9999999999999999;  // y 将是 10000000000000000

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>整数（不使用指数或科学计数法）会被精确到 15 位：</p>
<p id="demo"></p>
<script>
var x = 999999999999999;
var y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>

运行结果：

Javascript 数字

整数（不使用指数或科学计数法）会被精确到 15 位：

999999999999999
10000000000000000

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准：

示例代码：

var x = 0.2 + 0.1;         // x 将是 0.30000000000000004

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>浮点的算数并不总是 100% 精准：</p>
<p id="demo"></p>
<script>
var x = 0.2 + 0.1;
document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;
</script>
</body>
</html>

运行结果：

Javascript 数字

浮点的算数并不总是 100% 精准：

0.2 + 0.1 = 0.30000000000000004

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

使用乘除法有助于解决上面的问题：

示例代码：

var x = (0.2 * 10 + 0.1 * 10) / 10;       // x 将是 0.3

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>浮点的算数并不总是 100% 精准：</p>
<p id="demo1"></p>
<p>但是乘法和除法是有用的：</p>
<p id="demo2"></p>
<script>
var x = 0.2 + 0.1;
document.getElementById("demo1").innerHTML = "0.2 + 0.1 = " + x;
var y = (0.2*10 + 0.1*10) / 10;
document.getElementById("demo2").innerHTML = "0.2 + 0.1 = " + y;
</script>
</body>
</html>

运行结果：

Javascript 数字

浮点的算数并不总是 100% 精准：

0.2 + 0.1 = 0.30000000000000004

但是乘法和除法是有用的：

0.2 + 0.1 = 0.3

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

数字和字符串相加

警告！！

JavaScript 的加法和级联（concatenation）都使用 + 运算符。

数字用加法。字符串用级联。

如果您对两个数相加，结果将是一个数：

示例代码：

var x = 10;
var y = 20;
var z = x + y;           // z 将是 30（一个数）

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>如果您对两个数相加，结果将是一个数：</p>
<p id="demo"></p>
<script>
var x = 10;
var y = 20;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

运行结果：

Javascript 数字

如果您对两个数相加，结果将是一个数：

30

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

如果对两个字符串相加，结果将是一个字符串的级联：

示例代码：

var x = "10";
var y = "20";
var z = x + y;           // z 将是 1020（字符串）

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>如果添加两个数字字符串，结果将是级联字符串：</p>
<p id="demo"></p>
<script>
var x = "10";
var y = "20";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

运行结果：

Javascript 数字

如果添加两个数字字符串，结果将是级联字符串：

1020

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

如果您对一个数和一个字符串相加，结果也是字符串级联：

示例代码：

var x = 10;
var y = "20";
var z = x + y;           // z 将是 1020（一个字符串）

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>如果数字和数字字符串相加，结果将是级联字符串：</p>
<p id="demo"></p>
<script>
var x = 10;
var y = "20";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

运行结果：

Javascript 数字

如果数字和数字字符串相加，结果将是级联字符串：

1020

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

如果您对一个字符串和一个数字相加，结果也是字符串级联：

示例代码：

var x = "10";
var y = 20;
var z = x + y;           // z 将是 1020（字符串）

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>如果数字字符串和数字相加，结果将是级联字符串：</p>
<p id="demo"></p>
<script>
var x = "10";
var y = 20;
document.getElementById("demo").innerHTML = "结果是：" + x + y;
</script>
</body>
</html>

运行结果：

Javascript 数字

如果数字字符串和数字相加，结果将是级联字符串：

结果是：1020

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

常见的错误是认为结果应该是 30：

示例代码：

var x = 10;
var y = 20;
var z = "The result is: " + x + y;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>一个常见的错误是期望这个结果为 30：</p>
<p id="demo"></p>
<script>
var x = 10;
var y = 20;
document.getElementById("demo").innerHTML = "结果是：" + x + y;
</script>
</body>
</html>

运行结果：

Javascript 数字

一个常见的错误是期望这个结果为 30：

结果是：1020

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

常见的错误是认为结果应该是 102030：

示例代码：

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>一个常见的错误是期望这个结果是 102030：</p>
<p id="demo"></p>
<script>
var x = 10;
var y = 20;
var z = "30";
var result = x + y + z;
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>

运行结果：

Javascript 数字

一个常见的错误是期望这个结果是 102030：

3030

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

JavaScript 从左向右进行编译。

因为 x 和 y 都是数，10 + 20 将被相加。

因为 z 是字符串，30 + "30" 被级联。

数字字符串

JavaScript 字符串可以拥有数字内容：

var x = 100;         // x 是数字
var y = "100";       // y 是字符串

在所有数字运算中，JavaScript 会尝试将字符串转换为数字：

该例如此运行：

var x = "100";
var y = "10";
var z = x / y;       // z 将是 10

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>在相除时，JavaScript 会尝试把字符串转换为数字：</p>
<p id="demo"></p>
<script>
var x = "100";
var y = "10";
var z = x / y;   
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

运行结果：

Javascript 数字

在相除时，Javascript 会尝试把字符串转换为数字：

10

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

该例也将如此运行：

var x = "100";
var y = "10";
var z = x * y;       // z 将是 1000

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>在相乘时，JavaScript 会尝试把字符串转换为数字：</p>
<p id="demo"></p>
<script>
var x = "100";
var y = "10";
var z = x * y;   
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

运行结果：

Javascript 数字

在相乘时，Javascript 会尝试把字符串转换为数字：

1000

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

该例如此运行：

var x = "100";
var y = "10";
var z = x - y;      // z 将是 90

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>在相减时，JavaScript 会尝试把字符串转换为数字：</p>
<p id="demo"></p>
<script>
var x = "100";
var y = "10";
var z = x - y;   
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

运行结果：

Javascript 数字

在相减时，Javascript 会尝试把字符串转换为数字：

90

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

但是该例不会如上例般运行：

var x = "100";
var y = "10";
var z = x + y;       // z 不会是 110（而是 10010）

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>在相加时，JavaScript 不会把字符串转换为数字：</p>
<p id="demo"></p>
<script>
var x = "100";
var y = "10";
var z = x + y;   
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

运行结果：

Javascript 数字

在相加时，Javascript 不会把字符串转换为数字：

10010

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

在最后一个例子中，JavaScript 用 + 运算符对字符串进行了级联。

NaN - 非数值

NaN 属于 JavaScript 保留词，指示某个数不是合法数。

尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）：

示例代码：

var x = 100 / "Apple";  // x 将是 NaN（Not a Number）

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>用非数字字符串进行除法会得到 NaN（Not a Number）：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 / "Apple";
</script>
</body>
</html>

运行结果：

Javascript 数字

用非数字字符串进行除法会得到 NaN（Not a Number）：

NaN

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

不过，假如字符串包含数值，则结果将是数：

示例代码：

var x = 100 / "10";     // x 将是 10

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>数字除以数字字符串将是数字：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 / "10";
</script>
</body>
</html>

运行结果：

Javascript 数字

数字除以数字字符串将是数字：

10

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

您可使用全局 JavaScript 函数 isNaN() (is Not a Number)来确定某个值是否是数：

示例代码：

var x = 100 / "Apple";
isNaN(x);               // 返回 true，因为 x 不是数

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>您可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数：</p>
<p id="demo"></p>
<script>
var x = 100 / "Apple";
document.getElementById("demo").innerHTML = isNaN(x);
</script>
</body>
</html>

运行结果：

Javascript 数字

您可使用全局 Javascript 函数 isNaN() 来确定某个值是否是数：

true

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

要小心 NaN。假如您在数学运算中使用了 NaN，则结果也将是 NaN：

示例代码：

var x = NaN;
var y = 5;
var z = x + y;         // z 将是 NaN

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>假如您在数学运算中使用了 NaN，则结果也将是 NaN：</p>
<p id="demo"></p>
<script>
var x = NaN;
var y = 5;
document.getElementById("demo").innerHTML = x + y;
</script>
</body>
</html>

运行结果：

Javascript 数字

假如您在数学运算中使用了 NaN，则结果也将是 NaN：

NaN

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

结果也许是串连接：

示例代码：

var x = NaN;
var y = "5";
var z = x + y;         // z 将是 NaN5

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>假如您在数学运算中使用了 NaN，则结果可能是级联：</p>
<p id="demo"></p>
<script>
var x = NaN;
var y = "5";
document.getElementById("demo").innerHTML = x + y;
</script>
</body>
</html>

运行结果：

Javascript 数字

假如您在数学运算中使用了 NaN，则结果可能是级联：

NaN5

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

NaN 是数，typeof NaN 返回 number：

示例代码：

typeof NaN;             // 返回 "number"

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>NaN 是数，typeof NaN 返回 number：</p>
<p id="demo"></p>
<script>
var x = NaN;
document.getElementById("demo").innerHTML = typeof x;
</script>
</body>
</html>

运行结果：

Javascript 数字

NaN 是数，typeof NaN 返回 number：

number

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Infinity

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。

示例代码：

var myNumber = 2;
while (myNumber != Infinity) {          // 执行直到 Infinity
    myNumber = myNumber * myNumber;
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值：</p>
<p id="demo"></p>
<script>
var myNumber = 2; 
var txt = "";
while (myNumber != Infinity) {
   myNumber = myNumber * myNumber;
   txt = txt + myNumber + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

运行结果：

Javascript 数字

Infinity （或 -Infinity）是 Javascript 在计算数时超出最大可能数范围时返回的值：

4
16
256
65536
4294967296
18446744073709552000
3.402823669209385e+38
1.157920892373162e+77
1.3407807929942597e+154
Infinity

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

除以 0（零）也会生成 Infinity：

示例代码：

var x =  2 / 0;          // x 将是 Infinity
var y = -2 / 0;          // y 将是 -Infinity

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>除以 0（零）也会生成 Infinity：</p>
<p id="demo"></p>
<script>
var x = 2/0;
var y = -2/0;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>

运行结果：

Javascript 数字

除以 0（零）也会生成 Infinity：

Infinity
-Infinity

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Infinity 是数：typeOf Infinity 返回 number。

示例代码：

typeof Infinity;        // 返回 "number"

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>Infinity 是数字：</p>
<p id="demo"></p>
<script>
var x = Infinity;
document.getElementById("demo").innerHTML = typeof x;
</script>
</body>
</html>

运行结果：

Javascript 数字

Infinity 是数字：

number

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

十六进制

JavaScript 会把前缀为 0x 的数值常量解释为十六进制。

示例代码：

var x = 0xFF;             // x 将是 255。

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>前缀为 0x 的数值常量会被解释为十六进制：</p>
<p id="demo"></p>
<script>
var x = 0xFF;
document.getElementById("demo").innerHTML = "0xFF = " + x;
</script>
</body>
</html>

运行结果：

Javascript 数字

前缀为 0x 的数值常量会被解释为十六进制：

0xFF = 255

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

绝不要用前导零写数字（比如 07）。

一些 JavaScript 版本会把带有前导零的数解释为八进制。

默认地，Javascript 把数显示为十进制小数。

但是您能够使用 toString() 方法把数输出为十六进制、八进制或二进制。

示例代码：

var myNumber = 128;
myNumber.toString(16);     // 返回 80
myNumber.toString(8);      // 返回 200
myNumber.toString(2);      // 返回 10000000

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>toString() 方法以基数 2 到 36 输出字符串：</p>
<p id="demo"></p>
<script>
var myNumber = 32;
document.getElementById("demo").innerHTML =
"32 = " + "<br>" + 
" Decimal " + myNumber.toString(10) + "<br>" +
" Hexadecimal " + myNumber.toString(16) + "<br>" +
" Octal " + myNumber.toString(8) + "<br>" +
" Binary " + myNumber.toString(2);
</script>
</body>
</html>

运行结果：

Javascript 数字

toString() 方法以基数 2 到 36 输出字符串：

32 =
Decimal 32
Hexadecimal 20
Octal 40
Binary 100000

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

数值可以是对象

通常 JavaScript 数值是通过字面量创建的原始值：

var x = 123

但是也可以通过关键词 new 定义为对象：

var y = new Number(123)

示例代码：

var x = 123;
var y = new Number(123);
// typeof x 返回 number
// typeof y 返回 object

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>数字可以是对象，但是没有必要把数字创建为对象。</p>
<p id="demo"></p>
<script>
var x = 123;
var y = new Number(123);
document.getElementById("demo").innerHTML = typeof x + "<br>" + typeof y;
</script>
</body>
</html>

运行结果：

Javascript 数字

数字可以是对象，但是没有必要把数字创建为对象。

number
object

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请不要创建数值对象。这样会拖慢执行速度。

new 关键词使代码复杂化，并产生某些无法预料的结果：

当使用 == 相等运算符时，相等的数看上去相等：

示例代码：

var x = 500;             
var y = new Number(500);
// (x == y) 为 true，因为 x 和 y 有相等的值

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>绝对不要把数字创建为对象。</p>
<p>数字和对象无法安全地比较。</p>
<p id="demo"></p>
<script>
var x = 500;        // x 是数字
var y = new Number(500);  // y 是对象
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>

运行结果：

Javascript 数字

绝对不要把数字创建为对象。

数字和对象无法安全地比较。

true

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

当使用 === 相等运算符后，相等的数变为不相等，因为 === 运算符需要类型和值同时相等。

示例代码：

var x = 500;             
var y = new Number(500);
// (x === y) 为 false，因为 x 和 y 的类型不同

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>绝对不要把数字创建为对象。</p>
<p>数字和对象无法安全地比较。</p>
<p id="demo"></p>
<script>
var x = 500;        // x 是数字
var y = new Number(500);  // y 是对象
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>

运行结果：

Javascript 数字

绝对不要把数字创建为对象。

数字和对象无法安全地比较。

false

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

甚至更糟。对象无法进行对比：

示例代码：

var x = new Number(500);             
var y = new Number(500);
// (x == y) 为 false，因为对象无法比较

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>绝对不要把数字创建为对象。</p>
<p>数字和对象无法安全地比较。</p>
<p id="demo"></p>
<script>
var x = new Number(500);  // x 是对象
var y = new Number(500);  // y 是对象
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>

运行结果：

Javascript 数字

绝对不要把数字创建为对象。

数字和对象无法安全地比较。

false

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

JavaScript 对象无法进行比较。

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024