i18next 数组插值与自定义格式化函数实践指南

数组插值的基本用法

i18next 是一个强大的国际化框架，在处理数组插值时提供了灵活的解决方案。当需要在翻译字符串中插入数组时，默认会使用逗号作为分隔符。例如：

// 翻译资源
{
  "example": "我的购物清单包含: {{items}}"
}

// 使用方式
t('example', { items: ['苹果', '香蕉', '橙子'] })
// 输出: "我的购物清单包含: 苹果, 香蕉, 橙子"

自定义分隔符的需求

在实际开发中，我们经常需要不同的分隔符来满足各种显示需求。比如：

1. 使用箭头符号分隔：项目A → 项目B → 项目C
2. 使用竖线分隔：红色 | 蓝色 | 绿色
3. 使用中文顿号分隔：北京、上海、广州

自定义格式化函数的实现

i18next 提供了添加自定义格式化函数的能力，我们可以通过以下方式实现：

// 注册自定义格式化函数
i18next.services.formatter.add('joinWithArrow', (value, lng, options) => {
  return value.join(' → ');
});

// 在翻译资源中使用
{
  "path": "导航路径: {{items, joinWithArrow}}"
}

参数化分隔符的高级用法

更灵活的做法是让分隔符可配置，这样同一个格式化函数可以适应多种场景：

// 注册可配置的格式化函数
i18next.services.formatter.add('customJoin', (value, lng, options) => {
  const separator = options.separator || ', ';
  return value.join(separator);
});

// 使用方式
{
  "example1": "项目列表: {{items, customJoin(separator: ' | ')}}",
  "example2": "城市列表: {{cities, customJoin(separator: '、')}}"
}

注意事项

1. 当分隔符包含逗号时，需要特别注意引号的使用：

   // 正确写法
   "{{items, customJoin(separator: ', ')}}"
   
   // 错误写法（会导致解析问题）
   "{{items, customJoin(separator: , )}}"
   

2. 空格处理：如果需要保留分隔符前后的空格，必须使用引号包裹整个分隔符字符串。

3. 性能考虑：对于频繁使用的格式化函数，可以考虑使用addCached方法进行缓存优化。

最佳实践建议

1. 对于项目中的常用分隔方式，可以预先定义几个标准的格式化函数，如joinWithComma、joinWithChineseComma等。

2. 保持格式化函数的单一职责，每个函数只负责一种类型的格式化逻辑。

3. 在团队协作中，建议将常用的格式化函数集中管理，确保整个项目的一致性。

通过合理使用i18next的自定义格式化功能，我们可以轻松实现各种复杂的数组显示需求，同时保持翻译资源的灵活性和可维护性。