语言环境信息的语法

结构

语言环境信息的语法如下:

  1. // 作为 Flowtype 定义,语言环境信息的语法类似于 BNF 注释
  2. type LocaleMessages = { [key: Locale]: LocaleMessageObject };
  3. type LocaleMessageObject = { [key: Path]: LocaleMessage };
  4. type LocaleMessageArray = LocaleMessage[];
  5. type LocaleMessage = string | LocaleMessageObject | LocaleMessageArray;
  6. type Locale = string;
  7. type Path = string;

基于以上语法,你可以配置以下结构的 Locale 信息:

  1. {
  2. "en": { // 'en' Locale
  3. "key1": "this is message1", // 基本的
  4. "nested": { // 嵌套
  5. "message1": "this is nested message1"
  6. },
  7. "errors": [ // 数组
  8. "this is 0 error code message",
  9. { // 数组嵌套对象
  10. "internal1": "this is internal 1 error message"
  11. },
  12. [ // 数组嵌套数组
  13. "this is nested array error 1"
  14. ]
  15. ]
  16. },
  17. "ja": { // 'ja' Locale
  18. // ...
  19. }
  20. }

在上面的语言环境信息的结构中,你可以使用以下键名路径进行翻译。

  1. <div id="app">
  2. <!-- 基本的 -->
  3. <p>{{ $t('key1') }}</p>
  4. <!-- 嵌套 -->
  5. <p>{{ $t('nested.message1') }}</p>
  6. <!-- 数组 -->
  7. <p>{{ $t('errors[0]') }}</p>
  8. <!-- 数组嵌套对象 -->
  9. <p>{{ $t('errors[1].internal1') }}</p>
  10. <!-- 数组嵌套数组 -->
  11. <p>{{ $t('errors[2][0]') }}</p>
  12. </div>

输出以下内容:

<div id="app">
  <!-- 基本的 -->
  <p>this is message1</p>
  <!-- 嵌套 -->
  <p>this is nested message1</p>
  <!-- 数组 -->
  <p>this is 0 error code message</p>
  <!-- 数组嵌套对象 -->
  <p>this is internal 1 error message</p>
  <!-- 数组嵌套数组 -->
  <p>this is nested array error 1</p>
</div>

Linked locale messages

如果有一个翻译关键字总是与另一个具有相同的具体文本,你可以链接到它。要链接到另一个翻译关键字,你所要做的就是在其内容前加上一个 @: 符号后跟完整的翻译键名,包括你要链接到的命名空间。

语言环境信息如下:

const messages = {
  en: {
    message: {
      the_world: 'the world',
      dio: 'DIO:',
      linked: '@:message.dio @:message.the_world !!!!'
    }
  }
}

模板如下:

<p>{{ $t('message.linked') }}</p>

输出如下:

<p>DIO: the world !!!!</p>

按括号分组

链接到的语言环境信息的键名也可以形如 @:(message.foo.bar.baz),其中链接到另一段翻译的键名在括号 () 里。

如果链接 @:message.something 后紧跟着一个点 .,则此选项非常有用,因为它本不该成为但却成为了链接的一部分。

语言环境信息如下:

const messages = {
  en: {
    message: {
      dio: 'DIO',
      linked: 'There\'s a reason, you lost, @:(message.dio).'
    }
  }
}

模板如下:

<p>{{ $t('message.linked') }}</p>

输出如下:

<p>There's a reason, you lost, DIO.</p>