Inline Translations

tx

tx 字符串翻译函数的 API 参考

概览

tx 函数是一个用于翻译字符串的服务器端函数。

await tx('Hello, world!'); // 返回 'Hola, mundo!'

运行时翻译: tx 翻译在运行时执行。 这意味着翻译将实时进行,因此你可以翻译在运行时可知的内容。

参考资料

参数

Prop

Type

名称描述
content需要翻译的字符串。
options用于自定义 tx 行为的翻译 options。参见 RuntimeTranslationOptions

返回值

一个 Promise,解析为包含翻译后内容的字符串;若无需翻译,则返回原始内容。


行为

tx 函数会在运行时翻译字符串。 这意味着翻译是即时进行的,因此你可以翻译仅在运行时才可知的内容。 权衡在于:等待按需翻译加载时会有延迟,速度会明显变慢。

我们的建议是尽可能在构建阶段使用 getGTuseGT<T> 完成翻译, 仅在必要时才使用按需翻译,例如 tx<Tx>

请务必遵循此处的部署指南


示例

基本用法

你可以使用 tx 来翻译字符串。

src/components/translateGreeting.jsx
import { tx } from 'gt-next/server';

export default async function translateGreeting() {
    return await tx("你好,世界!"); 
}

添加上下文

你可以通过提供翻译所需的上下文来定制译文效果。

TranslateWithOptions.jsx
import { tx } from 'gt-next/server';

export default async function TranslateWithOptions() {
    return await tx("你好,世界!", {
      $context: '非正式翻译'
    });
}

使用变量

要向字符串传递值,你需要 (1) 指定一个标识符,并 (2) 在传入的对象中引用该标识符。

translateWithVariables.js
import { tx } from 'gt-next/server';

export default async function translateWithVariables() {
  return await tx("价格为 {price, number, ::currency/USD}", {
    price: 29.99,
  });
}

指定 Locale

你可以指定用于翻译的 locale。 默认情况下,locale 会设为用户的首选语言。

translateWithLocale.js
import { tx } from 'gt-next/server';

export default async function translateWithLocale() {
    return await tx("Hello, world!", { $locale: 'fr' }); 
}

注意事项

  • tx 仅用于服务器端,不能在客户端组件中使用。
  • 使用 tx 的翻译在运行时执行,即实时翻译。这比构建时翻译慢得多。

后续步骤

这份指南怎么样?

tx