翻译函数

概述

默认提供翻译函数t用来进行翻译。

export type VoerkaI18nTranslate =(
        message:string, 
        vars?:VoerkaI18nTranslateVars, 
        options?:VoerkaI18nTranslateOptions
    )=>string

t函数可以从languages/index.(js|ts)文件中导入。

// 从当前语言包文件夹index.js中导入翻译函数
import { t } from "<myapp>/languages"

// 不含插值变量
t("中华人民共和国")

// 位置插值变量
t("中华人民共和国{}","万岁")
t("中华人民共和国成立于{}年，首都{}",1949,"北京")

// 当仅有两个参数且第2个参数是[]类型时，自动展开第一个参数进行位置插值
t("中华人民共和国成立于{year}年，首都{capital}",[1949,"北京"]) 
 
// 当仅有两个参数且第2个参数是{}类型时，启用字典插值变量
t("中华人民共和国成立于{year}年，首都{capital}",{year:1949,capital:"北京"})

// 插值变量可以是同步函数，在进行插值时自动调用。
t("中华人民共和国成立于{year}年，首都{capital}",()=>1949,"北京")

// 对插值变量启用格式化器
t("中华人民共和国成立于{birthday | year}年",{birthday:new Date()})

特别注意

• 不要使用js的模板字符串来生成翻译内容，如t(我是中国人，我喜欢%{car})是无效的。
• t函数是一个普通函数，只需要提供执行环境就可以进行翻译,所以在任意React/Vue/Solid/Svelte等框架中均可以使用t函数来进行翻译。
• t函数对要翻译的内容支持插值变量机制，可以用来实现复数等机制，详见插值变量。

初学者误区

WARNING

t函数仅是一个普通JS函数，当切换语言时并不会自动执行。

<template>
    <div>
        <p>{{ t("你好") }}</p>
        <button @click="i18nScope.change('en-US')">切换语言</button>
    </div>
</template>
<script setup>
import { t,i18nScope } from "<myapp>/languages"
</script>

以上面Vue组件为例，当点击切换语言按钮时，t函数并不会自动执行，因为t函数仅是一个普通函数，没那么神奇。

那么如何实现重新执行t函数？

本质上，就是当切换语言时需要重新渲染组件，这样t函数才会重新执行。

因此，解决的办法就很简单了，只需要在语言切换后重新渲染组件即可。

<template>
    <div>
        <p>{{ t("你好") }}</p>
        <button 
            @click="i18nScope.change('en-US')">
            切换语言
        </button>
    </div>
</template>
<script setup>
import { t:tt,i18nScope } from "<myapp>/languages"
import { ref } from "vue"
const render = ref(0)

const t = (message:string,vars?:VoerkaI18nTranslateVars,options?:VoerkaI18nTranslateOptions)=>{
    render.value  // 依赖render的值，当render的值发生变化时，组件会重新渲染
    return tt(message,vars,options)
}

i18nScope.on("change",()=>{
    render.value++
})
</script>

这样，当切换语言时,render的值会发生变化，从而触发组件的重新渲染，t函数也会重新执行，从而实现了语言切换。

t函数是基本的翻译函数，不同的前端框架提供了相应的库来简化这个过程，包括vue/vue2/svelte/nextjs/...等。

提示

实际应用时，VoerkaI18n提供了React/Vue/Svelte等框架的集成库，可以直接使用这些库简化语言切换时的自动更新。