ES2017引入了字符串补全长度的功能。如果一个字符串不够长，它会在头部或尾部完成。padStart()用于头部补全，padEnd()用于尾部补全。conststring='hi';string.padStart(3,'c');//"chi"string.padEnd(4,'l');//"hill"语法string.padStart(,)string.padEnd(,)理解参数padEnd和padStart接受相同的参数。1.maxLength最终字符串的长度。constresult=string.padStart(5);result.length;//5看到这个我也学了好久。我一直以为maxLength是填充字符串参数的重复次数。所以这里我只想强调一下，这个参数是当前字符串需要填充到的目标长度，而不是填充字符串的重复次数。如果此数字小于当前字符串的长度，则返回当前字符串本身。当然，我相信读者比我聪明得多，所以我相信你们不会有这种困惑😆2.padStringpadString表示填充字符串。如果字符串太长以至于填充后的字符串长度超过目标长度，则只保留最左边的部分，其余部分将被截断。该参数默认值为空格""(U+0020.'hi'.padStart(5);//等同于'hi'.padStart(5,'');如果传入空字符串，constresult='hi'.padStart(5,'');result;//"hi"result.length;//2如何处理其他数据类型对于第二个参数padString，它接受一个字符串。如果我们尝试将其他数据类型传递给它。它会调用toString方法将其强制为字符串。让我们看看在不同值类型上使用toString时会发生什么。//Number(100).toString();//'100'//Booleantrue.toString();//'true'false.toString();//'false'//Array['A'].toString();//'A'[''].toString();//''//Object({}).toString();//'[objectObject]'({hi:'hi'})。toString();//'[objectObject]'有了这些知识，让我们看看是否可以将这些其他值类型传递给padStart（padEnd具有相同的行为）。'SAM'.padStart(8,100);//'10010SAM''SAM'.padStart(8,true);//'trueSAM''SAM'.padStart(8,false);//'falseSAM''SAM'.padStart(5,['']);//'SAM''SAM'.padStart(5,['hi']);//'hiSAM''SAM'.padStart(18,{});//'[objectObject]SAM''SAM'.padStart(18,{hi:'hi'});//'[objectObject]SAM'处理undefined这里有个有趣的例子，如果强制undefined转成字符串，GetaTypeError:undefined.toString();//TypeError:Cannotreadproperty'toString'ofundefined但是当我们将undefined作为第二个参数传递给padStart时，我们会得到这个：'SAM'.padStart(10,undefined);//'SAM'所以上面说的padString参数会用toString强制转换成字符串，这里又感觉不对了🙊。先看规范：ECMAScript规范：如果填充的字符串未定义，则填充的字符串将按空格（0x0020）进行调节。好吧，我们纠正一下，除了undefined，其他传递的数据类型都会使用toString转成字符串。如果padString超过maxLength怎么办？如果maxLength值小于或等于当前字符串的长度，则返回当前字符串本身。'hi'.padEnd(2,'SAM');//'hi'如果maxLength小于padString的长度，padString将被截断。'hi'.padEnd(7,'SAMANTHA');//'hiSAMAN'padStart/padEndvspadLeft/padRighttrim方法有别名。trimLeft是trimStart的别名trimRight是trimStart的别名，但对于字符串填充方法，没有别名。所以不要使用padLeft和padRight，它们不存在。这也是为什么建议大家不要使用trim别名的原因，这样在代码库中才有一致性😄实践中使用padStart右对齐字符串：console.log('JavaScript'.padStart(15));console.log('HTML'.padStart(15));console.log('CSS'.padStart(15)));console.log('Vue'.padStart(15));得到的结果：JavaScriptHTMLCSSVue数字编码：constbankNumber='2222222222222222';constlast4Digits=bankNumber.slice(-4);last4Digits.padStart(bankNumber.length,'*');//****************2222浏览器同时引入了padStart和padEnd，所以它们的浏览器支持相似，除了IE，两者都可以使用。本文转载自微信公众号《伟大的走向世界》，您可以通过以下二维码关注。转载请联系****公众号。【责任编辑：赵宁宁电话：（010）68476606】
