数字、日期与货币格式化
使用 n() 格式化数字、使用 d() 格式化日期、日期时间格式，以及各区域设置的 numberFormats
数字、日期与货币格式化 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
数字和日期因区域设置而异
在美国，1,000.50 在欧洲许多地区会写作 1.000,50。日期和货币也有所不同。Vue I18n 封装了浏览器的Intl API，因此数字、日期和金额会根据区域设置正确呈现。
配置 numberFormats
在createI18n的numberFormats选项中，为每种区域设置定义命名数字格式。每种命名格式都是一个Intl.NumberFormat选项对象。
const i18n = createI18n({
locale: "en",
numberFormats: {
en: {
currency: { style: "currency", currency: "USD" },
decimal: { style: "decimal", minimumFractionDigits: 2 },
},
},
})n() 函数
使用useI18n()中的n(value, formatName)格式化数字，或者在模板中使用$n。它会使用当前区域设置对应的命名格式。
const { n } = useI18n()
n(1234.5, "decimal") // "1,234.50" in en货币格式化
currency样式会添加正确的货币符号和分组分隔符。格式配置中的货币代码决定显示哪种符号。
const { n } = useI18n()
n(49.99, "currency") // "$49.99" in en适应区域设置的货币输出
在每种区域设置下添加相同的命名格式，并使用符合该区域设置的配置。切换locale后，分组方式、小数分隔符和符号位置都会自动改变。
numberFormats: {
en: { currency: { style: "currency", currency: "USD" } },
tr: { currency: { style: "currency", currency: "TRY" } },
}
// n(49.99, "currency") => "$49.99" (en) or "TRY 49,99" style (tr)百分比
percent样式会将数值乘以 100，并根据区域设置附加百分号。
numberFormats: {
en: { percent: { style: "percent", maximumFractionDigits: 1 } },
}
n(0.256, "percent") // "25.6%"配置 datetimeFormats
日期格式化与数字格式化类似。在datetimeFormats下定义命名格式，每种格式都是一个Intl.DateTimeFormat选项对象。
const i18n = createI18n({
locale: "en",
datetimeFormats: {
en: {
short: { year: "numeric", month: "short", day: "numeric" },
long: { dateStyle: "full", timeStyle: "short" },
},
},
})d() 函数
使用d(value, formatName)格式化 Date（或在模板中使用$d）。请传入Date对象或时间戳。
const { d } = useI18n()
d(new Date("2026-05-29"), "short") // "May 29, 2026" in en适应区域设置的日期
与数字一样，请为每种区域设置提供命名日期格式。区域设置改变后，相同的调用会产生本地化的日期顺序和月份名称。
datetimeFormats: {
en: { short: { year: "numeric", month: "short", day: "numeric" } },
tr: { short: { year: "numeric", month: "short", day: "numeric" } },
}
// d(date, "short") => "May 29, 2026" (en) / "29 May 2026" (tr)在模板中使用格式化辅助函数
在模板中，使用$n和$d，并传入数值和命名格式。
<template>
<p>Total: {{ $n(total, "currency") }}</p>
<p>Updated: {{ $d(updatedAt, "short") }}</p>
</template>一次性内联选项
除了命名格式之外，您还可以将内联选项对象作为第二个参数传入，以便一次性进行格式化，而无需在配置中定义它。
const { n, d } = useI18n()
n(0.5, { style: "percent" }) // "50%"
d(new Date(), { weekday: "long" }) // "Friday"快速检查
检查您对区域设置感知格式化的理解。
回顾
您学习了区域设置感知格式化：
- 针对每个区域设置，在
numberFormats和datetimeFormats下配置命名格式。 n(value, name)/$n用于格式化数字，包括小数、货币和百分比样式。d(value, name)/$d用于格式化日期。- 切换
locale会自动改变分组方式、小数标记、符号和日期顺序。 - 您还可以传入内联选项对象进行一次性格式化。
常见问题解答
「数字、日期与货币格式化」课时是免费的吗？
是的 — 「数字、日期与货币格式化」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「数字、日期与货币格式化」这节课中我会学到什么？
使用 n() 格式化数字、使用 d() 格式化日期、日期时间格式，以及各区域设置的 numberFormats 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「数字、日期与货币格式化」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。