变量组件
如何在翻译中使用变量组件处理动态内容
变量组件可让你在<T>组件中安全地包含动态内容。它们会在本地完成格式化与本地化，而不会将数据发送到翻译 API，因此非常适合用于用户名、账号、财务数据等敏感信息。
可用组件
<Var>: 原样插入的动态内容，不做格式化<Num>: 按 locale 进行本地化格式的数字<Currency>: 带符号与格式的货币金额<DateTime>: 符合 locale 习惯的日期和时间
快速开始
Variable 组件可在 <T> 中使用，以处理动态内容：
import { T, Var, Num, Currency, DateTime } from 'gt-next';
function UserProfile({ user }) {
return (
<T>
<p>欢迎回来，<Var>{user.name}</Var>！</p>
<p>您有 <Num>{user.itemCount}</Num> 个项目。</p>
<p>余额：<Currency currency="USD">{user.balance}</Currency></p>
<p>上次登录：<DateTime>{user.lastLogin}</DateTime></p>
</T>
);
}Variable 组件的工作方式
Variable 组件通过以下方式解决动态内容问题：
- 包裹动态值，以便它们可在
<T>内使用 - 在本地进行格式化，利用浏览器内置的 i18n API
- 保护数据隐私——内容绝不会发送到翻译 API
- 根据用户当前的 locale 提供本地化
// ❌ 这样会出错 - <T> 中包含动态内容
<T><p>你好 {username}</p></T>
// ✅ 这样可以正常工作 - 动态内容已包装
<T><p>你好 <Var>{username}</Var></p></T>组件指南
<Var> - 原样动态内容
将 <Var> 用于任何不需要特殊格式的动态内容：
// 用户信息
<T>
<p>你好，<Var>{user.name}</Var>！</p>
<p>您的账户 ID 是 <Var>{user.accountId}</Var></p>
</T>
// 条件渲染
<T>
控制面板：<Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T><Num> - 数字格式化
当需要按 locale 的格式规则显示数字时，请使用 <Num>：
// 基本数字格式化
<T>
您的购物车中有 <Num>{itemCount}</Num> 件商品。
</T>
// 独立使用（等同于 number.toLocaleString()）
<Badge><Num>{totalItems}</Num></Badge>
// 自定义格式化选项
<T>
距离：<Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> 公里
</T><Currency> - 货币金额
使用 <Currency> 来格式化货币金额：
// 基本货币格式化（默认为 "USD"）
<T>
您的总计是 <Currency>{total}</Currency>。
</T>
// 不同货币
<T>
价格：<Currency currency="EUR">{price}</Currency>
</T>
// 自定义格式化
<Currency
currency="USD"
options={{ minimumFractionDigits: 0 }}
>
{roundedAmount}
</Currency><DateTime> - 日期与时间
使用 <DateTime> 来处理日期与时间：
// 基本日期格式化
<T>
订单下单时间：<DateTime>{orderDate}</DateTime>
</T>
// 时间格式化
<T>
最后更新：<DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>
// 自定义日期格式
<DateTime options={{
year: 'numeric',
month: 'long',
day: 'numeric'
}}>
{eventDate}
</DateTime>隐私与安全性
数据留在本地
Variable 组件在浏览器的 Intl APIs 中本地完成所有格式化。不会将任何动态内容发送到翻译 API，因此非常适用于：
- 用户姓名和个人信息
- 账户号码和 ID
- 财务数据和余额
- 私密时间戳和日期
// 安全 - 敏感数据保留在本地
<T>
账户余额：<Currency currency="USD">{balance}</Currency>
上次登录：<DateTime>{lastLoginTime}</DateTime>
</T>重要注意事项
在变量组件中嵌套使用 <T> 组件时需谨慎：
// ⚠️ 内部 <T> 内容将被发送进行翻译
<T>
<Var>
<T>你好，世界！</T> {/* 这部分会被翻译 */}
{privateData} {/* 这部分保持本地 */}
</Var>
</T>独立用法
Variable 组件也可以在 <T> 之外单独使用，仅用于格式化：
// 这些组件的工作方式类似于各自的 .toLocale*() 方法
<span><Num>{count}</Num></span> // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span> // 价格格式化
<span><DateTime>{date}</DateTime></span> // date.toLocaleDateString()常见问题
忽略本地化选项
对于 <Currency>，请务必传入 currency prop 以指定货币类型。这样可以确保在显示值时使用正确的货币符号和格式：
// ❌ 默认为 USD - 可能不符合用户预期
<T>
该商品价格为 <Currency>{price}</Currency>
</T>
// ✅ 明确指定货币类型
<T>
该商品价格为 <Currency currency="EUR">{price}</Currency>
</T>其他组件也提供可选的 props，允许你自定义格式：
// 基本格式化
<T>
库存 <Num>{count}</Num> 件商品
</T>
// 自定义格式化
<T>
完成率 <Num options={{ style: 'percent' }}>{percentage}</Num>
</T>
// 日期格式化
<T>
最后更新：<DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>下一步
这份指南怎么样？