一个js实现银行卡号*格式化方法的演变

需求

6225123412341231234
格式化成
6225 **** **** *** 1234

实现

• 实现1

 manglingFormatCardNumber = cardNumber => {
    if (cardNumber && cardNumber.length > 8) {
        let middleStars = "*".repeat(cardNumber.substring(4, cardNumber.length - 4).length);
        let fourStarArray = middleStars.match(/.{4}/g);
        fourStarArray.push("*".repeat(middleStars.length%4));
        return `${cardNumber.substring(0, 4)} ${fourStarArray.join(" ")} ${cardNumber.substring(cardNumber.length - 4, cardNumber.length)}`;
    }
    return cardNumber;
};
manglingFormatCardNumber("12345644781351215421212");
"1234 **** **** **** *** 1212"

点评：最初实现，还有点bug，如果位数是4的整数倍会多一个空格.

• 实现2

export const manglingFormatCardNumber = cardNumber => {
    if (cardNumber && cardNumber.length > 8) {
        let middleStars = "*".repeat(cardNumber.length - 8);
        let fourStarArray = middleStars.match(/.{4}/g);
        if (middleStars.length % 4) {
            fourStarArray.push("*".repeat(middleStars.length % 4));
        }
        return `${cardNumber.substring(0, 4)} ${fourStarArray.join(" ")} ${cardNumber.slice(-4)}`;
    }
    return cardNumber;
};

点评：修复了bug，简化了得到*位数和获取后4位的写法。

• 实现3
  
  点评：正则用的贼6的同事。
• 实现4

export const manglingFormatCardNumber = cardNumber => {
    if (cardNumber && cardNumber.length > 8) {
        return `${cardNumber.substring(0, 4)} ${"*".repeat(cardNumber.length - 8).replace(/(.{4})/g, `$1 `)}${cardNumber.length % 4 ? " " : ""}${cardNumber.slice(-4)}`;
    }
    return cardNumber;
};

点评：学了一招正则group之后。
cardNumber.substring(0, 4)取前4位，
cardNumber.slice(-4)取后4位，
“*”.repeat(cardNumber.length - 8).replace(/(.{4})/g, `$1 `) 中间的变成*,并且每4个*替换成 ****[空格],
cardNumber.length % 4 ? " " : “” 不是4的整数倍位数的话多加一个空格。

总结

你喜欢哪个实现呢，或者你有什么更好更优雅的实现，欢迎探讨。