Merge pull request #64 from kasnti/feature/i18n_with_params-in-mp

feat: 使用曲线救国的方式让小程序支持带参数的多语系

src/locale/en.json

@@ -1,4 +1,5 @@
 {
   "weight": "{heavy}KG",
+  "weight2": "{0}KG",
   "app.name": "En Title"
 }

src/locale/index.ts

@@ -34,4 +34,19 @@ export const translate = (localeKey: string) => {
   }
   return localeKey
 }
+
+/**
+ * formatString('已阅读并同意{0}和{1}','用户协议','隐私政策') -> 已阅读并同意用户协议和隐私政策
+ * @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
+  })
+}
 export default i18n

src/locale/zh-Hans.json

@@ -1,4 +1,5 @@
 {
   "app.name": "中文标题",
-  "weight": "{heavy}公斤"
+  "weight": "{heavy}公斤",
+  "weight2": "{0}公斤"
 }

src/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "unibest-base",
+  "name": "unibest",
   "appid": "H57F2ACE4",
   "description": "",
   "versionName": "1.0.0",

src/pages/index/i18n.vue

@@ -16,6 +16,7 @@
     <view class="text-green-500">多语言测试</view>
     <view class="m-4">{{ $t('app.name') }}</view>
     <view class="m-4">{{ $t('weight', { heavy: 100 }) }}</view>
+    <view class="m-4">{{ formatString(translate('weight2'), 100) }}</view>
 
     <view class="text-green-500 mt-12">切换语言</view>
     <view class="uni-list">
@@ -35,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import i18n from '@/locale/index'
+import i18n, { formatString, translate } from '@/locale/index'
 import { testI18n } from '@/utils/i18n'
 
 const current = ref(uni.getLocale())