AngularJS内置过滤器有哪些？详解用法与示例

AngularJS 作为一款经典的 JavaScript 前端框架，其数据绑定功能极大地简化了开发流程，而在数据展示和处理过程中，过滤器（Filter）扮演着至关重要的角色，AngularJS 内置了一系列强大的过滤器，能够对数据进行格式化、筛选和排序等操作，开发者无需编写复杂的逻辑即可实现常见的数据处理需求，本文将详细解析 AngularJS 内置过滤器的使用方法、核心功能及实际应用场景。

过滤器的基本使用方式

AngularJS 过滤器通过管道符 应用于表达式或指令中，语法格式为 {{ expression | filterName : parameter1 : parameter2 ... }}。expression 是需要处理的数据，filterName 为过滤器名称，parameter 为传递给过滤器的可选参数，过滤器支持链式调用，{{ date | date : 'yyyy-MM-dd' | uppercase }}，多个过滤器按顺序依次处理数据。

在指令中使用过滤器时，需通过 filter 属性指定，<li ng-repeat="user in users | filter : 'a'">{{ user.name }}</li>，此处 filter 过滤器会筛选出 name 属性包含字母 ‘a’ 的用户数据。

常用内置过滤器详解

字符串处理过滤器

（1）uppercase 与 lowercase
这两个过滤器用于转换字符串的大小写。uppercase 将字符串转为大写，lowercase 转为小写。

<p>{{ "hello AngularJS" | uppercase }}</p> <!-- 输出：HELLO ANGULARJS -->
<p>{{ "WORLD" | lowercase }}</p>        <!-- 输出：world -->

（2）date
date 过滤器用于格式化日期对象，支持多种格式参数，常用格式符号包括：yyyy（四位年份）、MM（两位月份）、dd（日期）、HH（小时）、mm（分钟）、ss（秒）。

<p>{{ currentTime | date : 'yyyy年MM月dd日 HH:mm:ss' }}</p>

若不传参数，默认格式为 May 15, 2023。

（3）number
number 过滤器将数字格式化为字符串，可指定小数位数参数。

<p>{{ 3.14159 | number : 2 }}</p> <!-- 输出：3.14 -->

（4）currency
currency 过滤器用于格式化货币值，默认符号为 ，可通过参数自定义符号。

<p>{{ 1000 | currency : '¥' }}</p> <!-- 输出：¥1,000.00 -->

数组与对象处理过滤器

（1）filter
filter 过滤器根据条件筛选数组或对象，支持字符串、对象或函数作为筛选条件。

• 字符串筛选：{{ users | filter : 'a' }} 筛选属性值包含 ‘a’ 的元素。
• 对象筛选：{{ users | filter : {name : 'John'} }} 筛选 name 为 ‘John’ 的元素。

（2）orderBy
orderBy 过滤器对数组进行排序，可指定排序字段和排序方向（true 降序，false 升序）。

<li ng-repeat="user in users | orderBy : 'age' : false">
  {{ user.name }} - {{ user.age }}
</li>

（3）limitTo
limitTo 过滤器截取数组或字符串的一部分，参数为截取长度，正数从开头截取，负数从末尾截取。

<p>{{ "AngularJS" | limitTo : 3 }}</p> <!-- 输出：Ang -->
<p>{{ [1, 2, 3, 4, 5] | limitTo : -2 }}</p> <!-- 输出：[4, 5] -->

集合处理过滤器

（1）json
json 过滤器将 JavaScript 对象或数组转换为 JSON 字符串，常用于调试。

<pre>{{ {name : 'Tom', age : 25} | json }}</pre>

输出格式化的 JSON 数据，便于查看对象结构。

（2）currency（补充）
除字符串格式化外，currency 过滤器也可直接作用于数字，自动添加货币符号和千位分隔符。

过滤器的链式调用与参数传递

AngularJS 支持多个过滤器串联使用，形成数据处理流水线，先筛选年龄大于 20 的用户，再按姓名排序，最后显示姓名首字母大写的结果：

<p>{{ users | filter : {age : '>20'} | orderBy : 'name' | lowercase | limitTo : 10 }}</p>

传递多个参数时，通过冒号分隔，{{ date | date : 'yyyy-MM' : 'UTC' }}，'UTC' 为时区参数。

自定义过滤器

当内置过滤器无法满足需求时，可通过 module.filter() 方法自定义过滤器，创建一个反转字符串的过滤器：

angular.module('myApp', []).filter('reverse', function() {
  return function(input) {
    return input.split('').reverse().join('');
  };
});

使用方式：{{ "hello" | reverse }}，输出 olleh，自定义过滤器支持依赖注入，可复用复杂的业务逻辑。

过滤器的性能优化

在处理大数据量时，频繁使用过滤器可能导致性能问题，优化建议包括：

1. 减少链式调用：避免在 ng-repeat 中使用多个过滤器，可提前处理数据。
2. 使用 track by：在 ng-repeat 中添加 track by 表达式，提升列表渲染性能。
3. 缓存过滤结果：对静态数据，可在控制器中预先过滤并存储结果。

AngularJS 内置过滤器提供了高效、简洁的数据处理能力，从字符串格式化到数组排序，覆盖了前端开发中的常见场景，掌握过滤器的使用方法，不仅能提升代码可读性，还能减少冗余逻辑，结合自定义过滤器，开发者可以灵活应对复杂的数据展示需求，是 AngularJS 框架不可或缺的核心特性之一，在实际开发中，合理运用过滤器并结合性能优化技巧,能够显著提升应用的用户体验和运行效率。