# General Translation Knowledge Base: 如何按区域设置格式化数字、日期和货币？ URL: https://generaltranslation.com/zh/kb/format-numbers-dates-currencies.mdx Docs index: https://generaltranslation.com/llms.txt Description: 在页面渲染时，使用读者的区域设置和 JavaScript 的 Intl API 格式化每个值，并将值放在待翻译的句子之外。General Translation 的 ``、``、`` 和 `` 组件可在 `` 内同时做到这两点，因此一份翻译即可适用于任意值。 Category: 按区域设置格式化 Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 在渲染时，使用读者的区域设置和 JavaScript 的 `Intl` API 格式化每个值。`Intl` 会按各区域设置的规则处理数字分组、小数点、货币符号位置和日期顺序：12,450.75 欧元在英语中显示为 €12,450.75，在德语中显示为 12.450,75 €；2026 年 8 月 4 日在美式英语中显示为 8/4/2026，在德语中显示为 4.8.2026。真正棘手的是值所在的句子。句子需要提前翻译，而值要到渲染时才能确定，因此每份翻译都得为它预留一个占位符。此外，日期还与时区有关：对于同一时刻，使用 UTC 的服务器和位于洛杉矶的浏览器可能会渲染出不同的日期。 ## Video The video is narrated in English, with English captions. [How do I format numbers, dates and currencies for each locale?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-format-numbers-dates-currencies.mp4) (45秒) General Translation formats values for each locale with `Num`, `Currency` and `DateTime`. After `npx gt init`, `Num` groups digits and `Currency` formats an amount without converting it, `DateTime` formats dates and `RelativeTime` writes phrases such as three days ago, and `npx gt translate` writes the words around them in each language. ## 按区域设置格式化值的几种方式 | 方案 | 擅长之处 | 留给你的工作 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | -------------------------------------------- | | 仅使用 JavaScript 的 `Intl` API | 语言内置，可按各区域设置的惯例格式化数字、货币、日期和相对时间 | 将每个包含值的句子翻译成各种语言，并把格式化后的值嵌入每个句子 | | 国际化 (i18n) 库的格式化器 ([`react-intl`](/kb/general-translation-vs-react-intl)、`next-intl`、[`i18next`](/kb/general-translation-vs-i18next)) | 在每条已翻译的消息内部格式化值，例如 ICU 消息中的 `{total, number, ::currency/EUR}` | 为每种语言在基于键的文件中编写每条消息，并持续更新这些文件 | | 日期库 (`date-fns`、`Day.js`) | 借助按语言导入的区域设置数据来格式化和计算日期 | 处理数字和货币、加载各个区域设置，以及翻译日期所在的每个句子 | | General Translation (在 [``](/docs/react/reference/components/t) 中使用 [``](/docs/react/reference/components/num)、[``](/docs/react/reference/components/currency)、[``](/docs/react/reference/components/datetime) 和 [``](/docs/react/reference/components/relative-time)) | 使用 `Intl` 针对当前区域设置在本地格式化每个值；值所在的句子每种语言只需翻译一次，并为值预留插槽 | 为每个金额选择货币代码，并在服务器端渲染页面上固定区域设置、时区和 `baseDate` | 如果值单独出现 (例如价格列) ，仅用 `Intl` 即可。如果译者在基于键的文件中维护你的消息，请使用 i18n 库的格式化器；如果你本来就依赖某个日期库做日期计算，则继续使用它。如果值嵌在需要以多种语言发布、且每次发布都会变动的句子中，请使用 General Translation 的组件。 ## 在翻译后的句子中格式化值 General Translation 的 `gt-next`、`gt-react`，以及实验性的 `gt-tanstack-start` 和 `gt-react-native`，都为每种值类型各提供了一个组件。要在翻译后的句子中插入格式化的值： 1. 用 [``](/docs/react/reference/components/t) 包裹整个句子。 2. 用对应类型的组件包裹每个值：[``](/docs/react/reference/components/num) 用于数字、百分比和单位；[``](/docs/react/reference/components/currency) 用于以 ISO 4217 货币表示的金额 (不做汇率换算) ；[``](/docs/react/reference/components/datetime) 用于日期和时间；[``](/docs/react/reference/components/relative-time) 用于“3 天前”这类表述。 ```tsx

Your total is {total}.

; ``` 3. 运行 [`npx gt translate`](/docs/cli/reference/commands/translate)，每种语言只需翻译一次该句子。 这些组件会将各自的值排除在翻译内容之外，并在本地使用 `Intl` 进行格式化，不会将其发送到 General Translation API。 ## 服务器端渲染应用与 Vue 为避免在服务器端渲染的应用中出现 hydration 错误，请为 [``](/docs/react/reference/components/datetime) 固定区域设置和 `timeZone` 选项，并为 [``](/docs/react/reference/components/relative-time) 固定区域设置和统一的 `baseDate`。[Vue 应用](/docs/vue/guides/formatting-variables)可以从 `gt-vue` 中使用 [``](/docs/vue/reference/components/num)、[``](/docs/vue/reference/components/currency) 和 [``](/docs/vue/reference/components/datetime)。完整步骤请参阅[格式化数字和日期](/docs/react/guides/formatting-variables)指南。 ## Related questions - [如何在 React 中处理复数形式？](https://generaltranslation.com/zh/kb/how-to-handle-plurals-in-react.mdx): 在 React 中处理复数形式时，应为每种语言的每个复数形式各准备一个句子，并按该语言的复数规则选出对应句子——英语有 2 种形式，俄语有 4 种，阿拉伯语有 6 种。gt-react 和 gt-next 提供的 General Translation `` 组件只需接收你的源语言形式，General Translation 便会生成每种目标语言所需的形式。 - [如何翻译 JSX 之外的字符串？](https://generaltranslation.com/zh/kb/translate-strings-outside-jsx.mdx): 对于每个不属于 JSX 子节点的字符串（例如占位符或模块作用域常量），应在其渲染的位置通过翻译函数处理。General Translation 的 useGT 钩子会返回该函数，而 msg 搭配 useMessages 可以翻译在组件外部定义的常量。 - [如何翻译 JSX 中的条件文本？](https://generaltranslation.com/zh/kb/translate-conditional-jsx.mdx): 保持句子完整，并翻译它的每个版本。三元表达式会把句子拆成碎片，使其失去含义，也无法适应各语言的语序。General Translation 通过在 `` 中使用 `` 解决这一问题，将整个句子作为一个整体进行翻译。 - [如何翻译 React 应用？](https://generaltranslation.com/zh/kb/translate-react-app.mdx): 翻译 React 应用，需要先对组件进行国际化，使其以用户的语言渲染，再将每个字符串翻译成你支持的各种语言。General Translation 的 gt-react 在 `` 组件中原地翻译 JSX，npx gt translate 则会为每种语言生成一个文件。 ## Previous and next questions - Previous question: [如何审阅和编辑译文？](https://generaltranslation.com/zh/kb/review-translations.mdx) - Next question: [如何翻译 Google Slides？](https://generaltranslation.com/zh/kb/translate-google-slides.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/zh/kb/sitemap.md) for every article.