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

## 概述

`InlineTranslationOptions` 类型用于向内联翻译传递变量，并指定这些变量的渲染行为。
你还可以为翻译添加上下文和标识符。
它与 [`useGT`](/docs/next/api/strings/use-gt)、[`getGT`](/docs/next/api/strings/get-gt) 和 [`msg`](/docs/next/api/strings/msg) 配合使用，用于向内联字符串翻译传递变量。

<Callout>
  **构建时翻译：**
  使用 `useGT`、`getGT` 和 `msg` 时，不会翻译变量，只会翻译原始字符串。
  如需翻译包含动态内容的字符串，请参阅 [`tx`](/docs/next/api/strings/tx)。
</Callout>

## 参考文档

### 参数

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

### 说明

| Prop         | 说明                                                        |
| ------------ | --------------------------------------------------------- |
| `[variable]` | 变量作为 `options` 对象的顶层键传入。键名与字符串中的占位符对应 (例如 `{username}`) 。 |
| `$context`   | 为内容提供上下文，以引导翻译。                                         |
| `$id`        | 提供一个标识符，供翻译编辑器使用。                                         |
| `$maxChars`  | 限制译文的字符数。该库会严格执行此限制。                                      |

***

## 示例

### 上下文

要为字符串添加上下文，请使用 `$context` 属性。

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

const Component = () => {
  const gt = useGT();
  return <div>{gt('Hello, world!', { $context: 'a formal greeting' })}</div>;
};
```


### 传入变量

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

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

const Component = () => {
  const gt = useGT();
  return <div>{gt('Hello, {username}! How is your day?', { username: 'Brian123' })}</div>;
};
```


### 使用 ICU 消息格式

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

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

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

有关 ICU 消息格式的更多信息，请参阅 [ICU 消息格式文档](https://unicode-org.github.io/icu/userguide/format_parse/messages/)。


### 字符限制

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

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

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

***


## 注意事项

* `InlineTranslationOptions` 用于内联字符串翻译。
* 变量应作为 `options` 对象的顶层键传递，而不是嵌套在 `variables` 键下。

## 后续步骤

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