隐藏字符串中间字符，一个公共方法解决产品的所有设想

说到隐藏字符串中间字符，就是 13833321212 给用户显示成 “138***1212” 这样子呗，你是不是也是这样认为的。我刚开始拿到需求，就是这样认为的。但是越到后来发现越不对劲儿。来看看我的隐藏历程吧。

一 产品来了

1 加星第一步

产品刚开始跟我说，手机号中间要加星显示。我问，加几颗星？产品说：加3颗星就行啦。我又问，前面几个字符？后面几个字符？产品说，前面3个字符，后面3个字符就行。

我就想着，字符串截取前面3个字符，截取后面3个字符，中间补充上3个星号。嗯，搞定！！！我还写了个公共方法，想着后面可以给身份证号隐藏，给交易id隐藏都可以用。

2 加星第二步

后来，产品跟我说，前面3个字符，后面截4个字符吧。中间还是3颗星。我说好的，我还重复了下产品的想法，就是前面 138 然后三颗星 ，然后是 1212 呗。

3 加星第三步

后来产品又说了，身份证号呢，我希望前面显示4位，后面显示4位，中间3颗星就好。我说好的，那就是2101 3颗星星，后面剩余4个字符呗，123X，这样，对吧。产品说，对。

4 加星第四步

后来产品又过来了，他说，你这个身份证号啊，中间3颗星星太少，中间得是6颗星星，这样显得好看。我说好的，截取前面4个字符，截取后面4个字符，中间加6颗星星，对吧。他说是

5 加星第五步

后来产品拿着饭盒过来了，说，咱们那个交易id太长了，我想截取前8位，后8位，中间显示3个小点儿就可以了。我说，是0x121212，然后中间... ,然后最后是8位字符，是不。产品说，是，就这样。

6 加星第六步

后来产品又说了，在某个场合啊，交易id中间加点儿不好看，我说那还加星吧。产品说，加星也不好看。我想想啊。我说，你想吧。他说，咱们加表情符吧。加3个。我说好的，你把表情符号过会儿给我，看加哪个。他说好的。你等着。

7 加星第7步

后来产品又说了，中间这个表情符，你就加这个就行。😶。然后呢，列表页相对区域较小，你加3个，详情页呢，区域较长，你给我加6个。我说好的。

二 实现来了

第一步

项目中安装js-tool-big-box

npm install js-tool-big-box

第二步 项目中引入stringBox对象

import { stringBox } from 'js-tool-big-box';

第三步 使用公共方法，maskString

    const phone = '13812121212';
    const maskPhone = stringBox.maskString(phone, 3, 4, '*', 3);
    console.log('隐藏后的手机号为：', maskPhone);
    const cardId = '53010219200508011X';
    const maskCard = stringBox.maskString(cardId, 4, 4, '*', 6);
    console.log('隐藏后的身份证号为：', maskCard);
    const transId = '0x3e3d1451091c823a2cb018c59d0c6073f5471ed4';
    const maskTransId = stringBox.maskString(transId, 8, 8, '😶', 6);
    console.log('隐藏后的交易id为：', maskTransId);

效果如图