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"，大家可以举一反三。