在本地化 (localize) 文字訊息時，我們可能會遇到需要特別處理 HTML tag的情況，什麼意思呢？我們來看一下上圖紅框中的句子的 HTML 結構。

<p>
  For a guide and recipes on how to configure / customize this project,
  <br />
  check out the
  <a href="https://cli.vuejs.org" target="_blank" rel="noopener">
    vue-cli documentation
  </a>
  .
</p>

這顯然已經不是可以簡單用 Message Format Syntax 解決的問題，所以今天我們要來分享的就是可以幫我們達到這件事的 Component Interpolation 。

此篇的內容會需要具備前兩篇 Vue i18n - Message Format Syntax 以及 Vue i18n - Pluralization 所介紹到的語法基礎，所以如果還沒看過的朋友可以先去看過再回來此篇做閱讀。

基本用法

遇到上面的這種情況，你可能會嘗試這麼做

{
  "term1": "For a guide and recipes on how to configure / customize this project,",
  "term2": "checkout out the",
  "term3": "vue-cli documentation",
  "period": "."
}

<p>
  {{ $t('term1') }}
  <br />
  {{ $t('term2') }}
  <a href="https://cli.vuejs.org" target="_blank" rel="noopener">
    {{ $t('term3') }}
  </a>
  {{ $t('period') }}
</p>

可惜的是這樣只在英文語系行得通，原因是每個語言的文法其實差異很大，所以同樣的一段句子在不同語言可能排列組合都不太一樣，沒辦法都透過這樣的方式去拼湊。

所以 Vue i18n 提供了 Translation 元件 (i18n-t) 來幫助我們達到這件事。

{
  "intro": "For a guide and recipes on how to configure / customize this project, {0} checkout out the {1}.",
  "vueCliDoc": "vue-cli documentation"
}

<i18n-t keypath="intro" tag="p">
  <br/>
  <a href="https://cli.vuejs.org" target="_blank">{{ $t("vueCliDoc") }}</a>
</i18n-t>

這樣得到的結果就會是我們所期望的了。

<p>
  For a guide and recipes on how to configure / customize this project,
  <br />
  check out the
  <a href="https://cli.vuejs.org" target="_blank" rel="noopener">
    vue-cli documentation
  </a>
  .
</p>

範例程式碼

在上面的範例中，有兩件事值得注意：

• 在 i18n-t 下的子元素按照出現的順序進行插值，就像是 list interpolation 一樣。
• 我們可以指定 tag 屬性來選擇根節點的 HTML tag。

Slots 語法用法

然而透過像是 list interpolation 完成插值，其實不太直觀，還好我們可以透過 slots 做到類似 named interpolation 的方式！

{
  "intro": "For a guide and recipes on how to configure / customize this project, {newline} checkout out the {doc}.",
  "vueCliDoc": "vue-cli documentation"
}

<i18n-t keypath="intro" tag="p">
  <template #newline>
    <br />
  </template>
  <template #doc>
    <a href="https://cli.vuejs.org" target="_blank">
      {{ $t("vueCliDoc") }}
    </a>
  </template>
</i18n-t>

範例程式碼

多元化 (Pluralization) 用法

多元化的字詞也有可能會需要使用到 Component interpolation，尤其是想要特別強調數量時可能需要有不一樣的 CSS 效果，例如：

<p>
	<strong>2</strong>
	cars
</p>

所以我們可以在 i18n-t 組件透過 plural 屬性來完成多元化。

"apple": "no apples | one apple | {count} apples"

<i18n-t keypath="apple" tag="p" :plural="count">
  <template #count>
    <strong>{{ count }}</strong>
  </template>
</i18n-t>

export default {
  // ...
  setup () {
    return {
      count: 2
    }
  }
}
</script>

參考資料

• Vue I18n 官方文件

今天的分享就到這邊，如果大家對我分享的內容有興趣歡迎點擊追蹤 & 訂閱系列文章，如果對內容有任何疑問，或是文章內容有錯誤，都非常歡迎留言討論或指教的！

明天要來分享的是 Vue i18n 主題的第五篇 Number Formatting，那我們明天見！