# gt-next: General Translation Next.js SDK: RuntimeTranslationOptions
URL: https://generaltranslation.com/zh/docs/next/api/types/runtime-translation-options.mdx
---
title: RuntimeTranslationOptions
description: RuntimeTranslationOptions 类型的 API 参考文档
---

## 概述

`RuntimeTranslationOptions` 类型用于向内联翻译传递变量，并指定这些变量的渲染方式。
你也可以添加区域设置，为翻译指定不同的语言。
它与 [`tx`](/docs/next/api/strings/tx) 函数配合使用。

<Callout>
  **运行时翻译：**
  如需按需翻译变量，请将其直接包含在传递给 [`tx`](/docs/next/api/strings/tx) 的字符串中。
  通过 `options` 对象传递给 `tx` 的变量不会被翻译。
</Callout>

## 参考

### 参数

<TypeTable
  type={{
  "[variable]?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "$locale?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$maxChars?": {
      type: 'number',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 说明

| 属性           | 说明                                                        |
| ------------ | --------------------------------------------------------- |
| `[variable]` | 变量作为 `options` 对象中的顶层键传入。键名对应字符串中的占位符 (例如 `{username}`) 。 |
| `$locale`    | 为翻译指定区域设置。默认会使用应用支持的、浏览器首选的区域设置。                          |
| `$maxChars`  | 限制翻译的字符数。该库会严格执行此限制。                                      |

***

## 示例

### 传入变量

要在字符串中添加变量，可以使用 `{variable-name}` 语法，即用花括号将变量名括起来。

```jsx title="Component.tsx"
// [!code word:username]
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    {tx(`Hello, {username}!`,{ username: 'Brian123' })}
  </div>;
};
```


### 使用 ICU 消息格式

`gt-next` 支持 ICU 消息格式，让你也可以对变量进行格式化。

```jsx title="Component.tsx"
// [!code word:account-balance]
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    { tx(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};
```


### 翻译变量

要翻译变量，请直接将它包含在传给 `tx` 的字符串中。

```jsx title="Component.tsx"
import { tx } from 'gt-next/server';

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `Hello, {username}! Your haircolor is ${hairColor}`,
    { username: 'Brian123' }
  )}</div>;
};
```

请注意，变量 `hairColor` 会被翻译，而 `username` 不会。


### 指定区域设置

你可以指定用于翻译的区域设置。

```jsx title="Component.tsx"
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Hello, world!', { $locale: 'fr' })}</div>;
};
```

这始终会被翻译为法语。

### 字符限制

使用 `$maxChars` 限制译文长度：

```jsx title="Component.tsx"
// [!code word:$maxChars]
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Welcome to our application', { $maxChars: 15 })}</div>;
  // Output: "Bienvenue à no\u202F…"
};
```

***


## 注意事项

* `RuntimeTranslationOptions` 用于在运行时翻译字符串。
* 变量应作为选项对象中的顶层键传递，而不是嵌套在 `variables` 键下。

## 后续步骤

* 更多关于内联字符串翻译的信息，请参阅 [`tx`](/docs/next/api/strings/tx)。
* 更多关于格式化选项的信息，请参阅 [`ICU message format`](https://unicode-org.github.io/icu/userguide/format_parse/messages/)。