消息函数

Vue I18n 建议在翻译消息时使用基于列表、命名和字面量格式的字符串作为本地化消息。

然而，有时基于字符串的消息格式语法很难解决。

例如，假设您想在法语中处理以下消息：

• Manger de la soupe
• Manger une pomme
• Manger du pain
• Manger de l’orge

正如您所见，介词后面的名词会根据性别和语音而变化。

Vue I18n 消息格式语法支持的功能可能无法支持这些特定语言的用例。

但在某些情况下，由于复杂的语言语法，您确实需要 JavaScript 的完整编程能力。因此，您可以使用消息函数而不是基于字符串的消息。

注意

使用消息格式语法编写的消息会被 Vue I18n 消息编译器编译成消息函数。消息函数和缓存机制可最大化性能收益。

基本用法

以下是返回简单问候语的消息函数：

const messages = {
  en: {
    greeting: (ctx) => 'hello!'
  }
}

消息函数接受消息上下文作为第一个参数，该参数具有多个属性和函数。我们将在接下来的部分中解释如何使用它，现在让我们继续。

使用消息函数非常简单！您只需使用 $t 或 t 指定消息函数的键：

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

输出如下：

<p>hello!</p>

消息函数输出消息函数返回值的字符串。

注意

如果您需要使用翻译组件（i18n-t），则不仅需要返回字符串值，还需要返回VNode值。

为了支持翻译组件的使用，使用消息上下文的 type 属性，如下所示：

import { createVNode, Text } from 'vue'

const messages = {
  en: {
    greeting: ({ type }) => type === 'vnode'
      ? createVNode(Text, null, 'hello', 0)
      : 'hello'
  }
}

如果您还没有读过，请在深入研究消息函数之前阅读 Vue 渲染函数。

命名插值

Vue I18n 支持基于字符串的消息格式的命名插值。Vue I18n 使用 $t 或 t 插入参数值并输出结果。

您可以使用消息上下文的 named 函数来做同样的事情。

以下是问候语的例子：

const messages = {
  en: {
    greeting: ({ named }) => `hello, ${named('name')}!`
  }
}

模板：

<p>{{ $t('greeting', { name: 'DIO' }) }}</p>

输出如下：

<p>hello, DIO!</p>

您需要指定与 $t 或 t 的命名参数指定的值相对应的键。

列表插值

Vue I18n 支持基于字符串的消息格式的列表插值。Vue I18n 使用 $t 或 t 插入参数值并输出结果。

您可以使用消息上下文的 list 函数来做同样的事情。

以下是问候语的例子：

const messages = {
  en: {
    greeting: ({ list }) => `hello, ${list(0)}!`
  }
}

模板：

<p>{{ $t('greeting', ['DIO']) }}</p>

输出如下：

<p>hello, DIO!</p>

您需要指定与 $t 或 t 的列表参数指定的值相对应的索引。

链接消息

Vue I18n 支持基于字符串的消息格式的链接消息。Vue I18n 使用 $t 或 t 插入参数值并输出结果。

您可以使用消息上下文的 linked 函数来做同样的事情。

以下是消息函数的例子：

const messages = {
  en: {
    the_world: 'the world',
    dio: 'DIO:',
    linked: ({ linked }) => `${linked('message.dio')} ${linked('message.the_world')} !!!!`
  }
}

模板：

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

输出如下：

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

您需要指定与 $t 或 t 指定的值相对应的键。

复数形式

Vue I18n 支持基于字符串的消息格式的复数形式。Vue I18n 使用 $t 或 t 插入参数值并输出结果。

您可以使用消息上下文的 plural 函数来做同样的事情。

以下是消息函数的例子：

const messages = {
  en: {
    car: ({ plural }) => plural(['car', 'cars']),
    apple: ({ plural, named }) =>
      plural([
        'no apples',
        'one apple',
        `${named('count')} apples`
      ])
  }
}

模板：

<p>{{ $t('car', 1) }}</p>
<p>{{ $t('car', 2) }}</p>

<p>{{ $t('apple', 0) }}</p>
<p>{{ $t('apple', 1) }}</p>
<p>{{ $t('apple', { count: 10 }, 10) }}</p>

输出如下：

<p>car</p>
<p>cars</p>

<p>no apples</p>
<p>one apple</p>
<p>10 apples</p>

您需要指定与 $t 或 t 指定的值相对应的键。