diff --git a/src/locale/index.ts b/src/locale/index.ts index 07eb96d..f29e099 100644 --- a/src/locale/index.ts +++ b/src/locale/index.ts @@ -17,59 +17,55 @@ console.log(uni.getLocale()) console.log(i18n.global.locale) /** - * 非 vue 文件使用这个方法 - * @param { string } localeKey 多语言的key,eg: "app.name" + * 可以拿到原始的语言模板,非 vue 文件使用这个方法, + * @param { string } key 多语言的key,eg: "app.name" + * @returns {string} 返回原始的多语言模板,eg: "{heavy}KG" */ -export const translate = (localeKey: string) => { - if (!localeKey) { - console.error(`[i18n] Function translate(), localeKey param is required`) +export const getTemplateByKey = (key: string) => { + if (!key) { + console.error(`[i18n] Function getTemplateByKey(), key param is required`) return '' } const locale = uni.getLocale() console.log('locale:', locale) - const message = messages[locale] - if (Object.keys(message).includes(localeKey)) { - return message[localeKey] + const message = messages[locale] // 拿到某个多语言的所有模板(是一个对象) + if (Object.keys(message).includes(key)) { + return message[key] } - return localeKey -} - -/** - * formatString('已阅读并同意{0}和{1}','用户协议','隐私政策') -> 已阅读并同意用户协议和隐私政策 - * @deprecated 推荐使用下面的 formatI18n,使用key而不是索引,语义化更好 - * @param template - * @param values - * @returns - */ -export function formatString(template: string, ...values: any) { - console.log(template, values) - // 使用map来替换{0}, {1}, ...等占位符 - return template.replace(/{(\d+)}/g, (match, index) => { - const value = values[index] - return value !== undefined ? value : match - }) + console.error(`[i18n] Function getTemplateByKey(), key param ${key} is not existed.`) + return '' } /** * formatI18n('我是{name},身高{detail.height},体重{detail.weight}',{name:'张三',detail:{height:178,weight:'75kg'}}) * 暂不支持数组 * @param template 多语言模板字符串,eg: `我是{name}` - * @param obj 需要传递的数据对象,里面的key与多语言字符串对应,eg: `{name:'菲鸽'}` + * @param {Object|undefined} data 需要传递的数据对象,里面的key与多语言字符串对应,eg: `{name:'菲鸽'}` * @returns */ -export function formatI18n(template, obj) { - const match = /\{(.*?)\}/g.exec(template) - if (match) { - const variableList = match[0].replace('{', '').replace('}', '').split('.') - let result = obj - for (let i = 0; i < variableList.length; i++) { - result = result[variableList[i]] || '' +function formatI18n(template: string, data?: any) { + return template.replace(/\{([^}]+)\}/g, function (match, key: string) { + // console.log( match, key) // => { detail.height } detail.height + const arr = key.trim().split('.') + let result = data + while (arr.length) { + const first = arr.shift() + result = result[first] } - return formatI18n(template.replace(match[0], result), obj) - } else { - return template - } + return result + }) } +/** + * t('introduction',{name:'张三',detail:{height:178,weight:'75kg'}}) + * t('introduction',{name:'张三',detail:{height:178,weight:'75kg'}}) + * 暂不支持数组 + * @param template 多语言模板字符串,eg: `我是{name}` + * @param {Object|undefined} obj 需要传递的数据对象,里面的key与多语言字符串对应,eg: `{name:'菲鸽'}` + * @returns + */ +export function t(key, obj?) { + return formatI18n(getTemplateByKey(key), obj) +} export default i18n diff --git a/src/pages/about/i18n.vue b/src/pages/about/i18n.vue index 132bd82..88150eb 100644 --- a/src/pages/about/i18n.vue +++ b/src/pages/about/i18n.vue @@ -22,10 +22,7 @@ 多语言测试 {{ $t('app.name') }} {{ $t('weight', { heavy: 100 }) }} - {{ formatString(translate('detail'), 175, 60) }} - - {{ formatI18n(translate('introduction'), user) }} - + {{ t('introduction', user) }} 切换语言 @@ -45,7 +42,7 @@