Angular Translate：在HTML插值字符串中使用.replace处理空格参数

我明白你遇到的困境了——API返回的参数带空格，但你的翻译键是没有空格的，直接拼接肯定匹配不上。下面给你几个实用的解决办法，你可以根据自己的场景选择：

方法一：模板内直接用replace处理 #

最简单的方式就是在模板里直接对object.param做空格替换，把它转换成和翻译键一致的格式。

如果你的翻译键是直接去掉空格的（比如API返回"User Name"，翻译键是this.section.in.json.UserName），模板可以这么写：

{{ 'this.section.in.json.' + (object.param.replace(/\s+/g, '')) | translate }}

这里的/\s+/g是正则表达式，用来匹配所有连续的空格，替换成空字符串就能对齐翻译键了。

如果你的翻译键是用下划线/连字符代替空格的（比如翻译键是this.section.in.json.User_Name或者this.section.in.json.User-Name），只需要把replace的第二个参数改成对应的字符就行：

// 替换成下划线
{{ 'this.section.in.json.' + (object.param.replace(/\s+/g, '_')) | translate }}

// 替换成连字符
{{ 'this.section.in.json.' + (object.param.replace(/\s+/g, '-')) | translate }}

方法二：自定义过滤器（推荐复用场景） #

如果很多地方都需要处理这种带空格的参数，写个自定义过滤器会更清爽，模板也更简洁。

先在你的Angular模块里定义过滤器：

angular.module('yourAppName')
  .filter('cleanTranslationKey', function() {
    return function(input) {
      // 先判断输入是否为空，避免报错
      if (!input) return '';
      // 这里可以根据你的翻译键规则调整替换逻辑
      return input.replace(/\s+/g, '');
    };
  });

然后在模板里组合使用这个过滤器和translate：

{{ 'this.section.in.json.' + (object.param | cleanTranslationKey) | translate }}

以后再遇到类似的情况，直接用这个过滤器就行，不用重复写replace代码。

方法三：在控制器/服务中提前处理参数 #

如果需要对参数做更多逻辑处理，或者不想在模板里写太多代码，可以在获取API数据后，提前把参数处理好再传给模板。

比如在控制器里：

$http.get('/your-api-endpoint')
  .then(function(response) {
    $scope.object = response.data;
    // 提前处理参数，转换成符合翻译键的格式
    $scope.object.processedParam = $scope.object.param 
      ? $scope.object.param.replace(/\s+/g, '') 
      : '';
  });

然后模板里直接用处理后的参数：

{{ 'this.section.in.json.' + object.processedParam | translate }}

小提醒 #

• 记得处理object.param为空的情况（比如API返回null/undefined），避免出现replace is not a function的报错，上面的例子里都加了简单的判断。
• 一定要确保处理后的参数和你的翻译键完全一致，比如翻译键是驼峰式的话，可能还需要把空格后的首字母大写（比如"User Name"转成"userName"），这时候可以调整replace的逻辑，或者用更复杂的正则来处理。

内容的提问来源于stack exchange，提问作者Haq.H