JavaScript Academy · 课时

格式化数字和货币

Q: 「格式化数字和货币」这节课中我会学到什么？

使用 Intl.NumberFormat 格式化符合区域设置的数字。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Intl.NumberFormat 格式化符合区域设置的数字。

格式化数字和货币 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

Intl 命名空间

Intl 是 JavaScript 内置的国际化 API。它会根据区域设置的惯例格式化数字、日期、货币等内容，无需使用额外的库。

console.log(typeof Intl); // "object"
console.log(typeof Intl.NumberFormat); // "function"

Intl.NumberFormat 基础

使用区域设置创建格式化器，然后调用 format()。区域设置使用 BCP 47 标签，例如 "en-US" 或 "de-DE"。

const nf = new Intl.NumberFormat("en-US");
console.log(nf.format(1234567.89)); // "1,234,567.89"

区域设置差异

同一个数字在不同区域设置下的显示方式可能不同。德语使用句点分隔千位，并使用逗号表示小数。

const n = 1234567.89;
console.log(new Intl.NumberFormat("en-US").format(n)); // 1,234,567.89
console.log(new Intl.NumberFormat("de-DE").format(n)); // 1.234.567,89

货币格式化

传入 style: "currency" 和一个 currency 代码。货币符号及其位置会遵循区域设置。

const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
console.log(usd.format(2999.5)); // "$2,999.50"

跨区域设置的货币显示

货币本身保持不变，但其显示方式会适应所选的区域设置。

const opts = { style: "currency", currency: "EUR" };
console.log(new Intl.NumberFormat("en-IE", opts).format(1000)); // €1,000.00
console.log(new Intl.NumberFormat("de-DE", opts).format(1000)); // 1.000,00 €

百分比样式

style: "percent" 会将数值乘以 100，并在末尾添加区域设置对应的百分号。

const pct = new Intl.NumberFormat("en-US", { style: "percent" });
console.log(pct.format(0.1875)); // "19%"
console.log(new Intl.NumberFormat("en-US", { style: "percent", maximumFractionDigits: 2 }).format(0.1875)); // "18.75%"

控制小数位数

minimumFractionDigits 和 maximumFractionDigits 控制小数位数。

const f = new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
console.log(f.format(3));    // "3.00"
console.log(f.format(3.14159)); // "3.14"

单位

使用 style: "unit" 和 unit，可以格式化千米或升等度量值。

const speed = new Intl.NumberFormat("en-US", { style: "unit", unit: "kilometer-per-hour" });
console.log(speed.format(120)); // "120 km/h"

紧凑表示法

notation: "compact" 会缩写较大的数字（1.2K、3.4M），非常适合显示社交平台上的数量。

const c = new Intl.NumberFormat("en-US", { notation: "compact" });
console.log(c.format(1500));    // "1.5K"
console.log(c.format(2300000)); // "2.3M"

符号显示

signDisplay: "always" 即使对于正数也会显示符号，这对于显示差值和变化非常方便。

const s = new Intl.NumberFormat("en-US", { signDisplay: "always" });
console.log(s.format(5));  // "+5"
console.log(s.format(-5)); // "-5"

重复使用格式化器

创建格式化器的开销相对较高。请创建一次，然后用于格式化多个值，而不是每次调用都重新创建。

const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
const prices = [9.99, 19.5, 100];
console.log(prices.map((p) => money.format(p)));

快速检查

测试数字格式化。

回顾：数字与货币

您按照区域设置格式化了数字，处理了货币、百分比、单位、紧凑表示法和符号显示，控制了小数位数，并学会了重复使用格式化器。接下来学习：日期与时间。

常见问题解答

「格式化数字和货币」课时是免费的吗？

是的 — 「格式化数字和货币」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「格式化数字和货币」这节课中我会学到什么？

使用 Intl.NumberFormat 格式化符合区域设置的数字。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「格式化数字和货币」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy