Angularjs中Filters详解，如何自定义与优化使用？

AngularJS 作为一款经典的前端框架，其 Filters（过滤器）功能为数据展示提供了灵活的格式化能力，Filters 主要用于在模板中对数据进行实时转换和格式化，无需在控制器中编写额外的格式化逻辑，从而保持代码的简洁和可维护性，本文将详细介绍 AngularJS 中 Filters 的使用方法、内置过滤器及自定义过滤器的实现。

Filters 的基本使用

AngularJS 中的 Filters 主要通过在模板中使用管道符（）来调用，其基本语法为 {{ expression | filterName : parameter1 : parameter2 ... }}。expression 是需要处理的数据表达式，filterName 是过滤器的名称，parameter 是传递给过滤器的可选参数，Filters 可以串联使用，{{ expression | filter1 | filter2 : param }}，此时数据会依次经过 filter1 和 filter2 的处理。

Filters 不仅可以在模板中直接使用，还可以在控制器、服务或指令中通过 $filter 服务调用，在 JavaScript 代码中使用时，需要依赖注入 $filter 服务，$filter('filterName')(expression, parameter)。

常用内置过滤器

AngularJS 提供了多种内置过滤器，覆盖了文本格式化、数值处理、数组操作等常见场景。

文本格式化过滤器

• uppercase/lowercase：将文本转换为大写或小写形式。
  示例：{{ 'hello' | uppercase }} 输出 HELLO。
• date：格式化日期对象或时间戳。
  示例：{{ dateValue | date : 'yyyy-MM-dd HH:mm:ss' }},可自定义输出格式。
• number：格式化数值，支持小数位数和千位分隔符。
  示例：{{ 12345.678 | number : 2 }} 输出 12,345.68。

数值处理过滤器

• currency：将数值转换为货币格式，支持指定货币符号和小数位数。
  示例：{{ 1234 | currency : '¥' }} 输出 ¥1,234.00。
• limitTo：截取数组或字符串的一部分，可通过参数指定截取长度或起始位置。
  示例：{{ [1,2,3,4] | limitTo : 2 }} 输出 [1,2]。

数组操作过滤器

• filter：根据条件过滤数组元素，支持对象属性匹配和自定义函数。
  示例：{{ [{name: 'Tom', age: 20}, {name: 'Jerry', age: 18}] | filter : {age: '18'} }}，筛选出年龄为 18 的对象。
• orderBy：对数组进行排序，支持按字段名或自定义比较函数排序。
  示例：{{ array | orderBy : 'age' : true }}，按 age 字段降序排列。

集合操作过滤器

• json：将 JavaScript 对象或数组转换为 JSON 字符串，便于调试。
  示例：{{ {key: 'value'} | json }} 输出 {"key":"value"}。
• slice：截取数组或字符串的子集，类似 JavaScript 的 slice 方法。
  示例：{{ 'AngularJS' | slice : 0 : 6 }} 输出 Angular。

自定义 Filters 的实现

当内置过滤器无法满足需求时，可以自定义过滤器，自定义过滤器是一个工厂函数，返回一个过滤函数，接收输入数据作为第一个参数,后续参数为过滤器参数。

自定义过滤器示例

以下是一个自定义过滤器,用于将文本首字母大写：

app.filter('capitalize', function() {
    return function(input) {
        if (!input) return '';
        return input.charAt(0).toUpperCase() + input.slice(1).toLowerCase();
    };
});

在模板中使用：{{ 'angularjs' | capitalize }} 输出 Angularjs。

带参数的自定义过滤器

以下是一个自定义过滤器,用于截取文本并添加省略号：

app.filter('ellipsis', function() {
    return function(input, length) {
        if (!input) return '';
        length = length || 10;
        return input.length > length ? input.substring(0, length) + '...' : input;
    };
});

在模板中使用：{{ 'This is a long text' | ellipsis : 5 }} 输出 This i...。

Filters 的性能优化

虽然 Filters 使用方便，但在大量数据或复杂计算场景下，可能会影响性能,以下是一些优化建议：

1. 减少 Filters 串联：尽量避免多个 Filters 嵌套使用,尤其是计算量较大的过滤器。
2. 使用 track by：在 ng-repeat 中结合 filter 过滤器时，使用 track by 优化 DOM 渲染性能。
3. 缓存过滤结果：对于频繁调用的自定义过滤器,可以通过缓存机制避免重复计算。

Filters 的应用场景

Filters 广泛应用于以下场景：

• 数据展示格式化：如日期、货币、数值的本地化显示。
• 数据筛选与排序：如表格数据的动态过滤和排序。
• 文本处理：如字符串截取、大小写转换、关键词高亮等。

通过合理使用 AngularJS 的 Filters，可以显著提升数据展示的灵活性和代码的可读性，同时减少控制器中的业务逻辑，实现关注点分离，掌握内置过滤器的用法并学会自定义过滤器，是开发高效 AngularJS 应用的必备技能。