欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 产业 > i18n的替换处理

i18n的替换处理

2025/3/15 0:17:50 来源:https://blog.csdn.net/weixin_43724848/article/details/146242133  浏览:    关键词:i18n的替换处理

i18n的替换处理

背景描述

在开发的过程中,需要对项目文件的中文使用i18n进行多语言处理。在特定的页面,中文会有特定的处理,例如: 存在5台设备,其中 5 是一个变量,同时具有特定的样式,那么这个时候应该如何加i18n?

代码示例

<span>存在 <span style="color: red;">{{deviceNum}}</span> 台设备</span>

假如直接把”存在“存在json中,而后把”台设备“存在json中,随便一想最后得到的翻译会非常混乱,导致语义不符。

解决方案

首先,我们需要使用i18n的传参机制,使得这一整句话会一起翻译,这样就不会出现翻译语义不符的情况。而后,由于其中的变量存在特定的样式,因此我们需要以变量为切割点,将整个i18n语句拆分成前后两个内容,随后进行拼接即可。(需要注意的是:变量作为切割点,当i18n的变量不传参的情况下,其内容是不会被替换的,如果不理解请看后续的代码,而后进行切割即可)

// test.json
{"text": "存在{num}台设备"
}// html(或.vue)
// 原先:<span>存在 <span style="color: red;">{{deviceNum}}</span> 台设备</span>
// 目前:
<span>$t('test.text').split(/{\s*num\s*}/)[0]</span> // '存在'
<span style="color: red;">{{deviceNum}}</span>
<span>$t('test.text').split(/{\s*num\s*}/)[1]</span> // '台设备'
// 假如翻译的是exist 5 devices,前面第一项就是"exist",第二项就是"devices",大家可以举一反三。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词