javascript过滤器是什么_如何格式化模板中的数据？

JavaScript过滤器是模板中用于数据格式化而不改变原始数据的小函数，常见于Vue 2（支持内置/自定义，用|调用），Vue 3已移除，改用计算属性、方法或组合式API替代。

JavaScript过滤器是模板中用来对数据进行格式化处理的小函数，它不改变原始数据，只影响显示效果。常见于 Vue.js 等支持模板语法的框架中（Vue 2 支持内置和自定义过滤器，Vue 3 已移除，需用计算属性或方法替代）。

过滤器的基本写法（以 Vue 2 为例）

在模板中用管道符 | 调用，接在表达式后面：

{{ message | capitalize }}

上面会把 message 的首字母转大写再显示。

定义方式有两种：

• 全局过滤器：用 Vue.filter('filterName', function(value) { ... })
• 局部过滤器：在组件选项中加 filters: { filterName(value) { ... } }

常用内置过滤器（Vue 2）

Vue 2 提供了几个简单实用的内置过滤器（注意：仅限 Vue 2，且不支持链式调用复杂逻辑）：

• capitalize：首字母大写（如 "hello" → "Hello"）
• uppercase：全部转大写
• lowercase：全部转小写
• currency：添加货币符号（需传参，如 {{ price | currency('$') }}）
• pluralize：根据数字自动切换单复数（如 {{ count | pluralize('item') }}）

自定义过滤器处理常见格式化需求

比如日期、数字千分位、手机号掩码等，都可封装为过滤器：

• 日期格式化：date | formatDate('YYYY-MM-DD') → 返回格式化后字符串
• 手机号脱敏：phone | maskPhone → 显示为 138****1234
• 金额保留两位小数：amount | toFixed(2) → 自动补零，12 → "12.00"

关键点：过滤器函数第一个参数固定是表达式的值，后续参数来自模板中传入（如 | filterA('a', 'b')，则函数接收 value, arg1, arg2）。

Vue 3 中如何替代过滤器？

Vue 3 不再支持过滤器语法，推荐以下更清晰可控的方式：

• 用计算属性：适合依赖响应式数据的格式化，如 formattedTime: computed(() => formatISO(new Date()))
• 用普通方法：在 methods 中定义格式化函数，模板中调用 {{ formatDate(post.time) }}
• 用组合式 API + 工具函数：在 setup() 中引入并使用 useDateFormat() 等可复用逻辑

本质上，过滤器只是语法糖；现代写法更强调逻辑可追踪、易测试、易复用。

基本上就这些。过滤器本质是视图层的数据“化妆师”，用得好能让模板干净简洁；但别让它承担业务逻辑，也别在 Vue 3 里找它——换种方式，一样利索。