前端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

第一个入参必填,表示原始字符串;

第二个入参必填,表示前面明文展示的字符串长度,是个数值型;

第三个入参必填,表示后面明文展示的字符串长度,是个数值型;

第四个入参必填,表示中间的符号,是个字符串,比如星号啦,点号啦;

第五个入参必填,表示中间的符号的个数,是个数值型

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

经海路大白狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值