uni-app 国际化传参不生效解决方法

241 阅读1分钟

uni-app, 小程序、app做环境国际化时,传递参数不生效

{
    message: "操作{result}"
}
  • $t('message', {result: '成功'})
  • 期望输出结果为操作成功,实际上可能为 '操作{result}'

可以通过写一个方法根据 key, 当前语言去获取对应的语言文本

/**
 * 判断是否为默认传参方式
 * @param obj 传入参数
 * @param key 替换键值
 * @returns 是否符合替换
 */
const isParamsObject = (obj, key) => {
	return Object.prototype.toString.call(obj) === '[object Object]' && Object.keys(obj).length > 0 && Object.keys(obj).includes(key);
}

/**
 * 替换字符串中的占位符, 匹配到"{result}", 截取到对应字段result, 替换值
 * @param template 模板字符串,如 "操作{result}"
 * @param values 要替换的值
 * @returns 替换后的字符串
 */
const interpolateTemplate = (template, values) => {
	return template.replace(/{[A-Za-z\d]+}/g, (_, index) => values[_.slice(1, -1)] ?? '')
}


// 扩展t函数,支持默认参数插值
const originalT = i18n.global.t
i18n.global.t = ((key, param1, param2) => {
    const result = originalT(key, param1, param2)
    // 检测是否传入参数,是则使用插值方法处理
    if (isParamsObject(param1, key)) {
         return interpolateTemplate(result, param1)
    }
    return result
})