变量组件
如何在翻译中使用变量组件处理动态内容
变量组件可让你在<T>组件中安全插入动态内容。它们在本地完成格式化和本地化处理，不会将数据发送到翻译 API，非常适合用于用户名、账户号码和财务数据等敏感信息。
可用组件
<Var>: 未经格式化的原始动态内容<Num>: 按本地化规则格式化的数字<Currency>: 含符号与格式的货币值<DateTime>: 遵循本地化约定的日期与时间
快速开始
变量组件可在<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>
);
}变量组件的工作原理
变量组件通过以下方式解决动态内容问题：
- 对动态值进行封装，以便在
<T>中使用 - 利用浏览器内置的 i18n API 在本地完成格式化
- 确保数据私密——内容绝不会发送到翻译 API
- 根据用户当前的 locale 提供本地化
// ❌ 这样会出错 - <T> 中包含动态内容
<T><p>Hello {username}</p></T>
// ✅ 这样可以正常工作 - 动态内容已用 <Var> 包装
<T><p>Hello <Var>{username}</Var></p></T>组件指南
<Var> - 原始动态内容
将 <Var> 用于无需特殊格式的任意动态内容：
// 用户信息
<T>
<p>你好,<Var>{user.name}</Var>!</p>
<p>您的账户 ID 为 <Var>{user.accountId}</Var></p>
</T>
// 条件渲染
<T>
Dashboard:<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>Hello, world!</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 属性以指定货币类型。这样在显示 value 时就能使用正确的货币符号和格式：
// ❌ 默认为 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>后续步骤
本指南如何?