AngularJS中如何过滤并显示HTML货币代码？

先给你的实现点个赞——核心逻辑清晰，覆盖了空值/未定义的默认场景，也处理了几种主流货币的符号转换需求，直接返回HTML实体的思路也能适配<td>标签的绑定场景。不过从代码规范性、可维护性和潜在坑点来看，还有不少可以优化的地方，我来逐一拆解：

一、当前实现的小问题与优化建议 #

1. 拼写小失误
   函数参数currncey是拼写错误（正确是currency），虽然不影响功能，但会降低代码可读性，建议修正。

2. 宽松相等的风险
   你用了==进行判断（比如currncey == 'USD'），如果传入非字符串类型的值（比如数字、对象），可能会出现意外匹配。建议统一换成严格相等===，避免类型隐式转换带来的bug。

3. HTML实体的冗余转义
   你返回的&#8362是对&#8362的二次转义，这里需要结合绑定方式调整：

   • 如果用{{ vm.filterCurrencyCode(currency) }}插值绑定：Angular会自动转义HTML，所以直接返回'₪'即可，最终页面会渲染成默认符号₩；
   • 如果用ng-bind-html绑定：需要确保返回的是安全HTML，或者直接返回Unicode字符（比如'\u20A9'代表₩）会更可靠，还能避免实体转义的混乱。

4. 可维护性升级：用映射表替代多分支判断
   多个else if会让新增货币变得繁琐，改成对象映射表的形式，后续维护起来更轻松：

   // 把货币映射抽成单独对象，新增货币直接加键值对就行
   const currencySymbolMap = {
     'USD': '$',
     'CAD': '$',
     'GBP': '£',
     'GBp': '£'
   };
   
   vm.filterCurrencyCode = function(currency){ 
     // 生产环境建议去掉console.log
     // console.log(currency); 
     
     // 统一处理空值、未定义、空白字符串
     if (!currency || currency.trim() === '') {
       return '₪'; // 默认返回韩元符号
     }
   
     // 支持忽略大小写的匹配（可选，根据业务需求调整）
     const normalizedCurrency = currency.trim().toUpperCase();
     // 从映射表取符号，没有则返回原货币代码
     return currencySymbolMap[normalizedCurrency] || currency;
   }
   

5. 绑定方式的注意事项
   如果用ng-bind-html渲染，需要注入$sce服务标记内容为安全HTML，否则Angular会过滤掉实体：

   // 控制器注入$sce
   vm.filterCurrencyCode = function(currency){ 
     // ... 前面的逻辑
     const result = currencySymbolMap[normalizedCurrency] || currency;
     return $sce.trustAsHtml(result);
   }
   

   对应的HTML绑定：

   <td ng-bind-html="vm.filterCurrencyCode(currency)"></td>
   

二、进阶优化：改用Angular自定义过滤器 #

如果这个货币转换逻辑需要在多个页面复用，建议写成Angular自定义过滤器，比控制器函数更灵活：

angular.module('yourApp').filter('currencyCode', ['$sce', function($sce) {
  const symbolMap = {
    'USD': '$',
    'CAD': '$',
    'GBP': '£',
    'GBp': '£'
  };

  return function(currency) {
    if (!currency || currency.trim() === '') {
      return $sce.trustAsHtml('₪');
    }
    const normalized = currency.trim().toUpperCase();
    const result = symbolMap[normalized] || currency;
    return $sce.trustAsHtml(result);
  };
}]);

使用时直接在模板里加过滤管道：

<td ng-bind-html="currency | currencyCode"></td>

内容的提问来源于stack exchange，提问作者Itsik Mauyhas