概览

在 gt-next@6.8.0 中，我们引入了 <Static> 组件，用于解决 JSX 内容中的句子碎片化和代码复用问题。 该组件允许在翻译中直接调用静态函数，同时在不同语言之间保留词语搭配、词形变化和语序调整。 不过，这在使用 gt() 和 msg() 的基于字符串的翻译中留下了空白。 与 JSX 类似，许多应用在字符串构造上高度依赖各种工具函数，尤其是在那些可翻译内容分散在服务、工具方法和业务逻辑中的成熟代码库里。

gt-next 6.12.0 通过引入 declareStatic()——<Static> 组件在字符串场景下的等价物——以及配套的 declareVar() 和 decodeVars() 函数，弥补了这一空白。

核心功能

declareStatic()

与 <Static> 的作用类似，但用于字符串函数。CLI（命令行界面）会分析所有可能的返回路径，并为每种可能的返回结果创建单独的翻译条目。

const getDisplayName = (name) => {
  return name ? declareVar(name) : 'Someone';
};

gt(`${declareStatic(getDisplayName(name))} says hello.`);

declareVar()

<Var> 的字符串等价形式——用于在 declareStatic() 函数中标记动态内容，使其在哈希计算时被排除，并在运行时作为变量处理。 它通过将动态内容包裹在兼容 ICU 的 select 语句中来实现这一点，该语句在插值时会解析回原始的动态内容。

const greeting = "Hello, " + declareVar(name);
// "你好，{_gt_, select, other {name}}"

decodeVars()

由于 declareVar() 会在源文本中添加与 ICU 兼容的标记，单独使用 declareVar() 可能会对现有的字符串处理逻辑造成影响。 要提取原始值，只需将源字符串包裹在 decodeVars() 中即可。

const greeting = "Hello, " + declareVar("Brian");
// "Hello, {_gt_, select, other {Brian}}"
const decodedGreeting = decodeVars(greeting);
// "Hello, Brian"

更多改进

增强的字符串函数

gt() 和 msg() 现在支持仅对静态字符串进行拼接：

gt("Hello " + "world");
msg("Welcome, " + "Brian");

扩展后的 <Static> 支持

此前，<Static> 组件只支持将函数调用作为子元素。 现在，它可以支持在构建时可解析的任意 JSX 表达式，例如嵌套的 JSX 文本、三元运算符、条件语句和函数调用。

function getDisplayName(name) {
  return name ? <Var>{name}</Var> : '某人';
};
...
<T>
  <Static>
    你好 {getDisplayName("Brian")}!
    {
      isFriend ? " 你好吗?" : " 最近怎么样?"
    }
  </Static>
</T>

性能注意事项

与 <Static> 类似，declareStatic() 会成倍增加翻译条目。 每个具有多种可能结果的函数调用都会创建单独的翻译，而同一字符串中多次调用 declareStatic() 会使条目总数呈指数级增长。 请谨慎使用此功能，当倍数过大时，优先考虑使用 ICU select 语句。