前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库Intl.NumberFormat 科学计数法 notation
JavaScript数据处理

很大或很小的数字,怎么用 Intl.NumberFormat 显示成科学计数法?

传 notation: 'scientific',987654321 会显示成 9.877E8;传 engineering,指数固定是 3 的倍数,显示成 987.7E6,方便对应 k、M、G 这些单位。想要「9.9亿」「988M」这种给普通用户看的写法,用的是 compact,不是科学计数法。

前端进阶之旅 · 一题精讲更新于 2026.09.29
JavaScript#数据处理
先看核心答案读代码示例
理解线索

先选记数法,再定精度

  1. scientific系数只有一位整数,适合跨度很大的科学数据
  2. engineering指数取 3 的倍数,系数在 1 到 1000 之间,和 SI 单位前缀对应
  3. compact按语言用「万」「亿」或 K、M 缩写,适合粉丝数、播放量

格式化结果是按语言生成的文本,德语会写成 9,877E8,小数点变成了逗号。所以它只能用来显示,不能再拿去 parseFloat。

核心回答

先记住这个答案

Intl.NumberFormat 的 notation 选项控制记数法,有四个取值:默认的 standard 就是普通写法;scientific 是科学计数法,系数只有一位整数,987654321 显示成 9.877E8;而 engineering 是工程计数法,指数总是 3 的倍数,显示成 987.7E6;最后的 compact 是紧凑写法,中文显示「9.9亿」,英文显示「988M」。科学计数法和工程计数法的精度由有效数字决定,通常配合 maximumSignificantDigits 使用。

  • scientific 是一位整数加指数,如 9.877E8
  • engineering 指数是 3 的倍数,如 987.7E6
  • compact 是「9.9亿」这种面向普通用户的缩写
  • 精度用 maximumSignificantDigits 控制

科学计数法和工程计数法

同一个数,两种记数法表达的数量级一样,只是指数的选法不同。

对比四种 notationJavaScript
const value = 987654321
const show = (notation, extra = {}) =>
  new Intl.NumberFormat('en-US', { notation, ...extra }).format(value)

console.log(show('scientific', { maximumSignificantDigits: 4 })) // 9.877 × 10^8
console.log(show('engineering', { maximumSignificantDigits: 4 })) // 987.7 × 10^6
console.log(show('compact')) // 给普通用户看的缩写
console.log(new Intl.NumberFormat('zh-CN', { notation: 'compact' }).format(value))
console.log(new Intl.NumberFormat('en-US', { notation: 'engineering' }).format(0.000123))
查看输出与解释
9.877E8
987.7E6
988M
9.9亿
123E-6

科学计数法把小数点移到第一位数字后面,指数是 8。工程计数法要求指数是 3 的倍数,所以取 6,系数变成 987.7。3 的倍数正好对应千(k)、百万(M)、微(µ)这些单位前缀,所以 123E-6 一眼就能读成 123 微,这是工程领域偏爱它的原因。 compact 不是科学计数法,而是按语言习惯缩写。中文按「万」「亿」进位,英文按 K、M、B 进位,适合粉丝数、播放量这类给普通用户看的数字。

精度要用有效数字控制

科学计数法下,控制精度最直接的是有效数字。用小数位数去控制,数量级一变,保留下来的精度也跟着变。

两种精度选项的差别JavaScript
const sci = (opts) => new Intl.NumberFormat('en-US', { notation: 'scientific', ...opts })

console.log(sci({ maximumSignificantDigits: 3 }).format(987654321))
console.log(sci({ maximumSignificantDigits: 3 }).format(0.000123456))

// toExponential 也能出指数形式,但格式固定,不按语言处理
console.log((987654321).toExponential(2))
查看输出与解释
9.88E8
1.23E-4
9.88e+8

maximumSignificantDigits: 3 表示总共保留 3 位有效数字,不管数字多大多小,精度都一样。测量数据、统计结果通常按有效数字来要求精度。 toExponential() 是 Number 自带的方法,也能输出指数形式,但格式写死成 e+8 这种程序员写法,不会按语言处理小数点,也没法设置有效数字。给用户看用 Intl.NumberFormat,写日志或调试用 toExponential() 就够了。

指数部分单独渲染
界面上想把指数显示成上标 10⁸,可以用 formatToParts()。它会返回 integer、fraction、exponentSeparator、exponentMinusSign 和 exponentInteger 这些片段,把 exponentSeparator 换成「× 10」,再把 exponentInteger 放进 <sup> 就行。
回答前,多想一步

容易答错的地方

把 compact 当成科学计数法
compact 输出「9.9亿」「988M」,是面向普通用户的语言缩写,规则因语言而异。scientific 输出 9.877E8,是面向技术场景的固定格式。需求说「大数字缩写显示」时通常要的是 compact。
以为 engineering 和 scientific 指数一样
两者的指数一般不同。987654321 在科学计数法里是 E8,在工程计数法里是 E6,因为工程计数法只取 3 的倍数,多出来的位数挪到了系数上。
试着用自己的话回答

面试官还会怎么问?

格式化会改变原来的数字吗?

不会。format() 只返回一个舍入后的字符串,原来的 Number 不变。但用户看到的精度降低了,所以不要从显示文本反推原值,接口和存储始终传原始数值。

compact 的缩写能改成完整的词吗?

可以,加 compactDisplay: 'long'。英文会从 988M 变成 988 million;中文本来就是「亿」这类汉字,差别不大。

为什么科学计数法的默认结果是 9.877E8,不是更多位?

scientific 模式下默认最多保留 3 位小数,所以系数是 9.877。需要更多位时,显式设置 maximumFractionDigits 或者 maximumSignificantDigits。

从一道题,走向一组知识

把知识连起来

数据处理

做多语言时,「1 file / 2 files」这种单复数怎么写才对?

「1.2 万次播放」这种文案,数字用 compact 格式化,后面的量词单复数交给 Intl.PluralRules。

数据处理

评论区的「5 分钟前」「昨天」,用 Intl.RelativeTimeFormat 怎么实现?

Intl.RelativeTimeFormat 内部也要按语言格式化数字,两者都是「数值交给你算,写法交给 Intl」。

参考资料

  • JavaScript:数据处理参考资料

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 科学计数法和工程计数法
  3. 精度要用有效数字控制
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑