跳至主要內容

国际化

国际化

国际化用于将界面翻译为不同的语言，以便不同语言的用户使用。

国际化资源

国际化机制需要开发者先编写好应用的国际化资源文件，然后在组件代码中使用。国际化资源是存放在应用的 src/i18n 目录中（开发者需要先建立此文件夹）下的一些 JSON 文件，每个文件以语言代码命名，例如：

src                # 项目源代码路径
└─ i18n            # 国际化资源文件夹
   ├─ default.json # 默认回退语言
   ├─ ja.json      # 日文翻译文件
   ├─ it.json      # 意大利语翻译文件
   └─ zh-CN.json   # 简体中文翻译文件

如例子中所示，default.json 是默认回退语言的翻译文件，当要翻译的文本不在选择的语言中时会使用该翻译文件的规则。

国际化资源文件的内容是一个 JSON 对象，形式如下：

// default.json
{
  "helloWorld": "Hello, world!"
}
// zh-CN.json
{
  "helloWorld": "你好，世界！"
}

该 JSON 对象的值是目标语言下的翻译文本，而键用于在代码中索引翻译文本。每个键在多个语言的国际化资源文件中对应相同含义的翻译文本，例如 helloWorld 键在英文中对应的翻译文本是 Hello, world!，而在中文中对应的文本是 你好，世界！。

default.json

与一般的语言国际化文件不同，default.json 还用于当前语言未定义的翻译文本回退。即某个国际化字符串的键在该语言的 JSON 文件中没有定义，但是 default.json 中存在时会使用后者的翻译。

当一个键不存在于以上所有国际化文件时，国际化框架会直接返回键本身。

使用国际化文本

$t() 函数

$t() 是用于获取国际化文本的全局函数，它们的签名为：

function $t(key: string): string

key 是待翻译的键，而返回值是当前语言中对应的国际化文本。如果国际化资源中没有这个此键值对会返回 key 本身。

这个函数通常用于组件代码，例如：

<p>{{ $t('helloWorld') }}</p>

也可以在 JavaScript 代码中使用：

console.log($t('helloWorld'))

t 命令

原生组件支持 t 命令用于自动翻译国际化文本：

<p t>helloWorld</p>

例子中的 <p> 组件包含名为 t 的属性（它实际上是一个命令），该命令等效于让文本子节点 helloWorld 作为参数自动调用 $t() 函数并使用返回的国际化文本来设置 <p> 组件的文本内容。在模板代码中，t 命令比 $t() 函数的用法更简单。

t 命令还支持作为原生组件的属性前缀使用，例如：

<p t:text="helloWorld" />

和单独的 t 命令类似，属性值字符串 helloWorld 会作为键来查询对应的国际化文本。这同样比使用 $t() 函数的等效代码方便：

<p :text="$t('helloWorld')" />

提示

t 命令现在仅支持原生组件，在自定义组件中则没有效果。

在可以使用 t 命令的情况下，请优先使用 t 命令而不是 $t() 函数，因为 t 指令的实现方式决定了它的性能会更好。

切换语言

当应用切换语言之后所有组件的响应式属性都会重新计算，此时会重新查询国际化文本，因此不需要手动更新界面。但是不在响应式框架中调用的 $t() 函数没有这些效果。

在切换语言时缓存的计算属性值不会重新计算，所以在计算属性的 get() 方法中调用 $t() 的翻译文本也不会重新获取。

Glyphix framework