[Day03] Vue i18n - Message Format Syntax

红框中的句子 Welcome to Your Vue.js App 如果我们想要将其中的 Vue.js 变成随时可以替换时该怎麽办？

上一篇我们介绍的基础用法只适用於文字固定不变的字串，并没有办法处理上面的情况，所以今天我们就是要来分享如何加入插值 (Interpolations) 解决上面的问题以及其他的进阶语法！如果还没有看过上一篇 Vue i18n - 导入 & 基础用法 的朋友可以先看过再回来此篇做阅读，那我们开始罗！

Interpolations

在定义语系档时，如果要表示插值 (Interpolations)，Vue i18n 有提供两种方式

• Named interpolation
• List interpolation

Named interpolation

{
	"title": "Welcome to Your {appName} App"
}

Named interpolation 让我们在定义语系档时可以指定插值的名称，以至於後续在 JavaScript 中可以将 appName 作为参数将值传入 API 中。

所以在 template 的写法会是：

<p>{{ $t('title', { appName: 'Vue.js' }) }}</p>

得到的结果会是：

<p>Welcome to Your Vue.js App</p>

范例程序码

List interpolation

{
	"title": "Welcome to Your {0} App"
}

List interpolation 让我们在定义语系档时是以 Array 的 index 来定义插值，所以後续在 JavaScript 中则是将 Array 作为参数传入 API 中。

所以在 template 的写法会是：

<p>{{ $t('title', ['Vue.js']) }}</p>

得到的结果就一样也会是：

<p>Welcome to Your Vue.js App</p>

Linked messages

如果有一个单字字词总是包含在另一个字句中，我们可以将两者链接在一起。

要链接到另一个字句中的方式就是在定义语系档时透过 @:key 将两者链接。

{
  "word": {
    "app": "App"
  },
  "title": "Welcome to Your {appName} @:word.app"
}

所以在 template 的写法会是：

<p>{{ $t('title', { appName: 'Vue.js' }) }}</p>

得到的结果会是：

<p>Welcome to Your Vue.js App</p>

Built-in Modifiers

在英文语系中，如果这个字词在单独使用的和链接一起使用时有大小写的差异，vue i18n 有提供三种内建的修饰符来帮助我们。

• upper: 将单字中的所有英文字母变成大写
• lower: 将单字中的所有英文字母变成小写
• capitalize: 将所有单字的第一个字母变成大写

{
  "homeAddress": "Home address",
  "missingHomeAddress": "Please provide @.lower:homeAddress"
}

所以在 template 的写法会是：

<label>{{ $t('homeAddress') }}</label>
<p>{{ $t('missingHomeAddress') }}</p>

得到的结果会是：

<label>Home address</label>
<p>Please provide home address</p>

Custom Modifiers

如果有需要，你也可以自己定义客制化的修饰符

export default createI18n({
  locale: 'en',
	...
	modifiers: {
    snakeCase: (str) => str.split(' ').join('_')
  }
})

{
  "snakeCase": "snake case",
  "custom_modifier": "custom modifiers example: @.snakeCase:snakeCase"
}

Special Characters

因为一些进阶语法的格式需求，所以编译器会将以下字符作特殊处理：

• {
• }
• @
• $
• |

所以如果遇到想要呈现的文字内容有这些字符时，需要用 {''} 将字符包起来。

// 错误
{
   "email": "[email protected]"
}

// 正确
{
   "email": "example{'@'}gmail.com"
}

参考资料

• Vue I18n 官方文件

今天的分享就到这边，如果大家对我分享的内容有兴趣欢迎点击追踪 & 订阅系列文章，如果对内容有任何疑问，或是文章内容有错误，都非常欢迎留言讨论或指教的！

明天要来分享的是 Vue i18n 主题的第三篇 Pluralization ，那我们明天见！