Ceryn

JS 数字

7分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

JavaScript 数字 - W3School

Number - JavaScript | MDN

引入

JS 中表示数量的数据都用数字类型，不管是整数、小数、负数，还是特别大的数，全部都是 number。

商品价格、年龄、距离、计算结果，都需要用数字来保存。

正文

定义

定义

JS 中只有一种数字类型 number，整数和小数都是 number，不需要区分 int 和 float。

创建数字

let age = 18;
let price = 9.9;
let temperature = -5;
let distance = 0;
console.log(typeof age);
console.log(typeof price);

输出结果：

"number"
"number"

整数和小数的类型都是 number。

特殊数字值

JS 中有三个特殊的数字值：

值说明
Infinity正无穷大
-Infinity负无穷大
NaN不是有效数字

Infinity

当一个数超出 JS 能表示的范围时，会变成 Infinity。

console.log(1 / 0);
console.log(-1 / 0);

输出结果：

Infinity
-Infinity

JS 能表示的最大数字是 Number.MAX_VALUE。

console.log(Number.MAX_VALUE);

输出结果：

1.7976931348623157e+308

超过这个值就会变成 Infinity。

console.log(Number.MAX_VALUE * 2);

输出结果：

Infinity

NaN

NaN 表示”不是有效数字”（Not a Number），但它的类型仍然是 number。

console.log(typeof NaN);

输出结果：

"number"

常见的得到 NaN 的情况：

console.log(0 / 0);
console.log("hello" - 1);
console.log(Number("hello"));

输出结果：

NaN
NaN
NaN

NaN 和任何值都不相等，包括自己。

console.log(NaN === NaN);
console.log(NaN == NaN);

输出结果：

false
false

判断一个值是不是 NaN，要用 Number.isNaN()。

console.log(Number.isNaN(NaN));
console.log(Number.isNaN(100));
console.log(Number.isNaN("hello"));

输出结果：

true
false
false

注意 isNaN() 和 Number.isNaN() 的区别：

console.log(isNaN("hello"));
console.log(Number.isNaN("hello"));

输出结果：

true
false

isNaN() 会先尝试把值转成数字再判断，Number.isNaN() 只在值严格等于 NaN 时才返回 true。建议优先用 Number.isNaN()。

精度问题

JS 的数字运算存在精度问题，这是 IEEE 754 浮点数标准的通用问题。

console.log(0.1 + 0.2);

输出结果：

0.30000000000000004

所以 0.1 + 0.2 不等于 0.3：

console.log(0.1 + 0.2 === 0.3);

输出结果：

false

处理精度问题的常见方式：

使用 toFixed()

let result = (0.1 + 0.2).toFixed(2);
 
console.log(result);
console.log(typeof result);

输出结果：

"0.30"
"string"

注意 toFixed() 返回的是字符串，需要的话可以再转成数字。

let result = Number((0.1 + 0.2).toFixed(2));
 
console.log(result);
console.log(typeof result);

输出结果：

0.3
"number"

先放大再缩小

let result = (0.1 * 10 + 0.2 * 10) / 10;
 
console.log(result);

输出结果：

0.3

数字转换

Number()

把值转成数字。

console.log(Number("123"));
console.log(Number("3.14"));
console.log(Number("hello"));
console.log(Number(true));
console.log(Number(false));

输出结果：

123
3.14
NaN
1
0

parseInt()

从字符串开头解析整数，遇到非数字字符就停止。

console.log(parseInt("100px"));
console.log(parseInt("3.14"));
console.log(parseInt("px100"));

输出结果：

100
3
NaN

建议加上第二个参数指定进制：

console.log(parseInt("100", 10));
console.log(parseInt("ff", 16));

输出结果：

100
255

parseFloat()

从字符串开头解析小数。

console.log(parseFloat("3.14px"));
console.log(parseFloat("100"));
console.log(parseFloat("hello"));

输出结果：

3.14
100
NaN

isNaN()

isNaN() 用于判断一个值是不是有效数字。

console.log(isNaN(100));
console.log(isNaN("hello"));
console.log(isNaN("100"));
console.log(isNaN(NaN));

输出结果：

false
true
false
true

isNaN() 会先尝试把值转成数字，"100" 能转成数字所以返回 false。

toFixed()

toFixed() 用于保留指定位数的小数。

let price = 9.9876;
 
console.log(price.toFixed(2));
console.log(price.toFixed(0));
console.log(price.toFixed(4));

输出结果：

"9.99"
"10"
"9.9876"

toFixed() 返回字符串，会自动四舍五入。

数字运算

运算符说明示例结果
+加1 + 23
-减5 - 32
*乘3 * 412
/除10 / 25
%取余10 % 31
**幂2 ** 38
console.log(10 % 3);
console.log(2 ** 10);

输出结果：

1
1024

Math 对象

Math 提供了常用的数学方法。

console.log(Math.abs(-5));
console.log(Math.ceil(3.2));
console.log(Math.floor(3.8));
console.log(Math.round(3.5));
console.log(Math.max(1, 5, 3));
console.log(Math.min(1, 5, 3));
console.log(Math.random());
console.log(Math.PI);

输出结果：

5
4
3
4
5
1
0.xxxx（随机数）
3.141592653589793

详细内容见 JS Math 对象。

常见写法

写法作用
let age = 18;创建整数
let price = 9.9;创建小数
Number("123")字符串转数字
parseInt("100px", 10)解析整数
parseFloat("3.14px")解析小数
Number.isNaN(value)判断是否为 NaN
value.toFixed(2)保留两位小数
Math.round(3.5)四舍五入
Math.random()生成随机数

例子

计算总价

let price = 99.9;
let count = 3;
let total = Number((price * count).toFixed(2));
 
console.log(total);

输出结果：

299.7

生成随机整数

let min = 1;
let max = 100;
let random = Math.floor(Math.random() * (max - min + 1)) + min;
 
console.log(random);

输出一个 1 到 100 之间的随机整数。

解析带单位的字符串

let width = "200px";
let height = "150.5px";
 
let w = parseInt(width, 10);
let h = parseFloat(height);
 
console.log(w);
console.log(h);

输出结果：

200
150.5

判断输入是否为有效数字

let input = "abc";
let num = Number(input);
 
if (Number.isNaN(num)) {
  console.log("请输入有效数字");
}

特点

  • JS 只有一种数字类型 number
  • 整数和小数都是 number，不需要区分
  • 浮点数运算存在精度问题
  • NaN 表示不是有效数字，但类型仍然是 number
  • NaN 不等于任何值，包括自己
  • Infinity 表示超出范围的数
  • parseInt() 解析整数，parseFloat() 解析小数
  • toFixed() 保留小数位数，返回字符串
  • Math 对象提供常用数学方法

理解

JS 的数字可以理解成”什么数都是一种”。整数、小数、负数、特别大的数，全都是 number，不需要像其他语言那样区分 int、float、double。

好处是简单，坏处是精度问题。0.1 + 0.2 不等于 0.3 是 JS 中经典的坑，涉及金额计算时要特别注意。

NaN 虽然名字叫”不是数字”，但它的类型却是 number，可以理解为”一个算坏了的数字”。判断它要用 Number.isNaN()，不能用 ===。

引出

理解了数字类型后，可以继续学习 JS Math 对象，掌握更多数学运算方法。

也可以继续学习 JS 布尔值，了解 JS 中另一种基础值类型。

关系图谱

反向链接