找回密码,忘记密码时,会出现一个输入框,要求输入被屏蔽的完整内容
本期就用两个函数,达到同等效果
先了解一下中文,你就会知道次数是什么意思了
repeat == 重复
次数代表的是重复的次数!
例子:
let z = "鱼";
console.log(z.repeat(6));//打印6个鱼字
console.log("*".repeat(6));//打印6个"*"
所以repeat函数的本质是由:目的(内容) + 次数
你甚至不需要用变量取继承内容,可以直接内容 + 访问符号 "."连接repeat函数
如图,qq密码找回,这里用到了上次的切片函数——slice("起始位置","结束位置");
首先,注意一个小细节,切片函数是针对字符串,数字不是字符串,需要我们把数字转换成字符串
ps:如何转换这一期不会说(下一期内容)
所以,本次的例子均为字符串
第一步,定一个变量用来存储
let junzi = "恐龙抗狼与合格的秋刀鱼";
第二步,因为我们的目的是达到上面那个找到密码的效果,截取字符串
再声明一个变量,用来存储,截取的部分
let z = junzi.slice(0,junzi.length/2)
console.log(z);//输出内容:恐龙抗狼与
第三步,把截取外的那一部分用"*"号代替
let z = junzi.slice(0,junzi.length/2) + "*".repeat(4)
//输出内容为恐龙抗狼与****
说到这一步,如果有看上一期的,就会想到用replace()替代函数,我直接用数组把要改变的内容通过reduce()函数配合replace一样可以达到同样的效果,可是具有局限性(不建议使用)
第四把,把剩余的字符串输出!
这是最关键的一步
+ junzi.slice(junzi.length/2+4)
把他们连在一起就是这个
let junzi = "恐龙抗狼与合格的秋刀鱼";
let z = junzi.slice(0,junzi.length/2) + "*".repeat(4) + junzi.slice(junzi.length/2+4)
console.log(z);
具体原理是,第一切片函数控制前面几位,然后用"*"输出中间几位,没错是直接输出,直接取代了中间的值,再把字符串截取一边
没看懂?
用两个切片获取前部分与后部分的内容,中间用repeat函数输出
还可以看成三个切片函数,分成三段,前面一段和后面一段,中间的这一段用repeat代替
与其说是屏蔽,不如是修改,用值代替值
repeat函数的本质是由:目的(内容) + 次数
懒人版本公式:slice(0,"字符串长度/2-次数")"内容".repeat(x) + slice("字符串长度/2 + 次数")
字符长度/2这是取中间值,如果你知道中间值可以不用