【脱敏问题】前端展示卡号脱敏问题【如何根据不同长度一劳永逸得只展示后四位？】问题背景卡号有16位和19位两种，要求只展示

一个前端小问题，记录一小段我自己的LOW代码和前辈的好代码，好记性不如烂笔头！

问题背景

卡号有16位和19位两种，要求只展示后4位数字，其余均以"*"号展示，每4位位一段，段和段之间以一个空格展示。如：

16位：
19位：

代码背景

vue-h5项目

修改之前

后端只返回一个字段：（卡号后四位）
```
card: "6034"
```
代码如下：

修改之后

后端多传送一个长度字段：

如果是我来修改

methods: {
    getFullCardNumber() {
        if (login.card.len === 16) {
            return "**** **** **** " + login.card.card
        } 
        if (login.card.len === 19) {
            return "**** **** **** ***" + login.card.card.slice(0,1) 
                    + " " + login.card.card.slice(1)
        }
        return login.card.card
    }
}

<div>{{ getFullCardNumber() }}</div>

前辈同事的版本

computed: {
    getFullCardNumber() {
        return cardItem => {
            const { card, len } = cardItem
            let starStr = ''
            for (let i = 0; i < len - 4; i++) {
                starStr += '*'
            }
            const fullStr = starStr + card
            return fullStr.replace(/\s/g, '').replace(/.{4}/g, '$1 ')
        }
    }
}

<div>{{ getFullCardNumber(login.card) }}</div>

分析

ES6 解构

const { card, len } = cardItem

RegExp正则表达式

\	将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“`n`”匹配字符“`n`”。“`\n`”匹配一个换行符。串行“`\\`”匹配“`\`”而“`\(`”则匹配“`(`”。

\s	匹配任何空白字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。

.	匹配除“`\``n`”之外的任何单个字符。要匹配包括“`\``n`”在内的任何字符，请使用像“`(.\|\n)`”的模式。

{n}	n是一个非负整数。匹配确定的n次。例如，“`o{2}`”不能匹配“`Bob`”中的“`o`”，但是能匹配“`food`”中的两个o。

$	匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“`\n`”或“`\r`”之前的位置。

regex101.com/

/.{4}/g

.{4} matches any character (except for line terminators)
{4} Quantifier — Matches exactly 4 times
↵ matches the character ↵ literally (case sensitive)
Global pattern flags
g modifier: global. All matches (don't return after first match)

/\s/g

\s matches any whitespace character (equal to [\r\n\t\f\v ])
↵ matches the character ↵ literally (case sensitive)
Global pattern flags
g modifier: global. All matches (don't return after first match)