Inline Translations

msg

msg() 字符串函数的 API 参考

概览

msg 函数用于标记并编码待翻译的字符串。

const encodedString = msg('你好,世界!');

应将该 encoded string 传递给 useMessages hook 或 getMessages function 以获取翻译。

编码: msg 会对输入字符串进行编码,因此你无法在 JSX 或其他位置直接使用它。 如果需要还原原始字符串,请使用 decodeMsg 进行解码。

解码

要还原原始字符串,你需要使用 decodeMsg 进行解码

import { msg, decodeMsg } from 'gt-next';
const encodedString = msg('你好,世界!');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // “你好,世界!”

参考资料

参数

名称类型描述
contentstring要编码的字符串。
options?InlineTranslationOptions用于自定义 msg 行为的翻译选项。

返回值

一个经过编码的字符串,其中插入的变量(如有)将被替换为其对应的值。


行为

生产环境

在进行 CD 流程时,msg 函数中的任何内容都会在应用部署前完成翻译。 这可确保所有 locale 的快速加载,但只能翻译构建时已知的内容。

生成后,翻译会根据你的配置被(1)存储在 CDN(内容分发网络)中,或(2)存储在应用的构建输出中。 随后,这些已翻译的内容将提供给你的用户。 如果未找到对应翻译,将回退到原始内容。

请务必遵循此处的部署指南

开发

在开发阶段,msg 函数会按需翻译内容。 这有助于你预览应用在不同语言下的呈现效果。 请记得在环境中添加 Dev API key 以启用此功能。

在开发环境进行按需翻译时,你会看到一定的延迟。 在生产构建中不会出现这种情况,除非内容被明确按需翻译, 即使用 tx<Tx>

示例

基本用法

你可以使用 msg 标记需翻译的字符串。

import { msg, useMessages } from 'gt-next';

const encodedString = msg('你好,世界!');

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedString)}
    </p>
  );
}

注意:“Hello, world!” 将会被翻译成用户偏好的语言。

使用变量

您可以向字典中的翻译传入变量。

import { msg, useMessages } from 'gt-next';

const encodedString = msg('你好,{name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedString)}
    </p>
  );
}

注意:“Alice”是变量,因此不会被翻译为用户的首选语言。

使用 ICU 消息格式

gt-next 支持 ICU 消息格式,可用于格式化变量。

import { msg, useMessages } from 'gt-next';

const encodedString = msg('购物车中{count, plural, =0 {没有商品} =1 {有1件商品} other {有{count}件商品}}', { count: 10 });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedString)}
    </p>
  );
}

ICU 消息格式是一种功能强大的方式,可用于格式化变量。 了解更多,请参阅ICU 消息格式文档


注意事项

  • msg 函数用于标记待翻译的字符串。
  • 使用 msg 的字符串会在运行时之前、于构建阶段完成翻译(开发环境除外)。

下一步

  • 查看 useMessages 以翻译字符串。
  • 查看 getMessages 以在异步 server-side 组件中翻译字符串。

本指南如何?