From 236d002c7cc472d22944ccec843fb62093145a12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=B2=E9=B8=BD?= <1020103647@qq.com>
Date: Sun, 16 Jun 2024 16:28:08 +0800
Subject: [PATCH] =?UTF-8?q?perf(i18n):=20=E4=BD=BF=E7=94=A8=20t=20?=
=?UTF-8?q?=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/locale/index.ts | 70 +++++++++++++++++++---------------------
src/pages/about/i18n.vue | 7 ++--
src/utils/i18n.ts | 2 +-
3 files changed, 36 insertions(+), 43 deletions(-)
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 @@