如何在Angular模板中将数字除末两位外替换为XXX？是否有对应Pipe？

Angular没有内置Pipe直接实现这个需求，你需要自定义一个Pipe来完成数字掩码逻辑。

步骤1：创建自定义Pipe #

用Angular CLI快速生成Pipe文件：

ng generate pipe mask-last-two

修改生成的mask-last-two.pipe.ts，实现核心转换逻辑：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'maskLastTwo'
})
export class MaskLastTwoPipe implements PipeTransform {
  transform(value: number | string): string {
    // 统一转成字符串处理，兼容数字/字符串输入
    const strValue = String(value);
    
    // 长度≤2时直接返回原内容
    if (strValue.length <= 2) {
      return strValue;
    }

    // 生成对应长度的X前缀，拼接最后两位
    const maskPrefix = 'X'.repeat(strValue.length - 2);
    const lastTwoChars = strValue.slice(-2);
    return maskPrefix + lastTwoChars;
  }
}

步骤2：在模板中使用Pipe #

CLI生成时会自动把Pipe添加到对应模块的declarations数组里，直接在模板中调用即可：

<!-- 示例用法 -->
<p>999 处理后：{{ 999 | maskLastTwo }}</p> <!-- 输出 X99 -->
<p>9999 处理后：{{ 9999 | maskLastTwo }}</p> <!-- 输出 XX99 -->
<p>10999 处理后：{{ 10999 | maskLastTwo }}</p> <!-- 输出 XXX99 -->
<p>12 处理后：{{ 12 | maskLastTwo }}</p> <!-- 输出 12 -->
<p>5 处理后：{{ 5 | maskLastTwo }}</p> <!-- 输出 5 -->

补充说明 #

• 支持数字、字符串两种输入类型，适配更多场景
• 自动处理长度≤2的边界情况，避免异常输出
• 如果需要处理带小数的数字（如1234.56），可以扩展逻辑：拆分整数和小数部分后分别处理

内容的提问来源于stack exchange，提问作者Chaitanya Karmarkar