前端JS必用工具【js-tool-big-box】学习，关键字符串中间隐藏显示，显示什么符号，显示多少位，前后展示几位

这一小节，我们说一个js-tool-big-box中新增的非常实用的功能。

比如身份证号码，肯定不能真实的全部的展示给用户，需要中间加星号展示，那么中间加星号，前后展示多少位，对吧，每个公司可能有不同的理解，产品需求也不同；

比如手机号，也是不能直接展示给用户的，需要中间加星，这个倒是比较统一，中间加星，前3后4，但中间的星号，我遇到过有展示3个星号，有展示4个星号的；

比如web3交易hash，是一个很长的字符串，应该是42位吧，以0x开头，要求前8后8，中间呢，是3个点，又不是星号了。

所以这个小需求，功能点还是不少的，我们来看一下如何使用吧。

目录

1 安装引入

2 字符串中间加星

2.1 控制前后明文显示个数

2.2 控制中间星号个数 

2.3 控制中间符号显示 

2.4 使用方法总结

---

1 安装引入

执行npm命令，下载安装js-tool-big-box工具库

npm i js-tool-big-box

项目引入，这个字符串中间加星的功能，我们对外提供了stringBox这个对象，可供方法调用：

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

2 字符串中间加星

2.1 控制前后明文显示个数

比如身份证号码，我们希望前4后4，或者手机号，希望前4后4的展示，中间加星号，星号准备4个吧，示例代码如下：

    const cardStr = '53010219200508011X';
    const phone = '13344445555';
    const cardStrMask = stringBox.maskString(cardStr, 4, 4, '*', 4);
    const phoneMask = stringBox.maskString(phone, 4, 4, '*', 4);
    console.log('身份证号加星后为：', cardStrMask);
    console.log('手机号加星后为：', phoneMask);

2.2 控制中间星号个数 

比如我们需求有变，要求手机号中间3个星号，身份证号中间6个星号，那么我们可以这样使用工具方法，示例代码如下：

    const cardStr = '53010219200508011X';
    const phone = '13344445555';
    const cardStrMask = stringBox.maskString(cardStr, 4, 4, '*', 6);
    const phoneMask = stringBox.maskString(phone, 4, 4, '*', 3);
    console.log('身份证号加星后为：', cardStrMask);
    console.log('手机号加星后为：', phoneMask);

2.3 控制中间符号显示 

比如web3交易hash，这个很长的以0x开头的字符串，产品需求很可能是前8后8，中间3个点，这样我们也可以实现，示例代码如下：

    const transHash = '0xf68544a5195177c0e6f47aed7d3ea7046cad4580';
    const transHashMask = stringBox.maskString(transHash, 8, 8, '.', 3);
    console.log('交易hash加点后为：', transHashMask);

2.4 使用方法总结

方法名	返回值	入参
maskString	如果第2个入参和第3个入参加一起，大于等于字符串的长度，那么将返回第一个入参，也就是原始字符串； 正常情况下，返回示例：xxx***xxx	第一个入参必填，表示原始字符串； 第二个入参必填，表示前面明文展示的字符串长度，是个数值型； 第三个入参必填，表示后面明文展示的字符串长度，是个数值型； 第四个入参必填，表示中间的符号，是个字符串，比如星号啦，点号啦； 第五个入参必填，表示中间的符号的个数，是个数值型