ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()
用于头部补全,padEnd()
用于尾部补全。
const string = 'hi';string.padStart(3, 'c'); // "chi"string.padEnd(4, 'l'); // "hill"登录后复制
这里有一个有趣的例子,如果你强制把 undefined
转成一个字符串,得到一个TypeError
:
undefined.toString(); // TypeError: Cannot read property 'toString' of undefined登录后复制
但当我们把undefined
作为第二个参数传入padStart
,会得到这个:
'SAM'.padStart(10, undefined);// ' SAM'登录后复制
所以上面说的 padString
参数会使用 toString
强制转成字符串使用,到这里感觉又不对了 ??。我们先来看下规范:
undefined
,该填充的字符串就会被规制成空格( 0x0020)。好吧,我们更正一下, 除了undefined
,否则传递的所有其他数据类型都将使用toString
强制转成字符串。
如果 maxLength
数值小于等于当前字符串的长度,则返回当前字符串本身。
'hi'.padEnd(2, 'SAM');// 'hi'登录后复制
如果 maxLength
小于 padString
的长度,则 padString
会被截断。
'hi'.padEnd(7, 'SAMANTHA');// 'hiSAMAN'登录后复制padStart/padEnd vs padLeft/padRight
trim
方法具有的别名。
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));登录后复制
得到的结果
JavaScript HTML CSS Vue登录后复制
数字打码
const bankNumber = '2222 2222 2222 2222';const last4Digits = bankNumber.slice(-4);last4Digits.padStart(bankNumber.length, '*');// ***************2222登录后复制浏览器支持
padStart
和padEnd
是同时引入的,因此它们共享相似的浏览器支持, 除了 IE 之外,都 可以用 ??
原文地址:dmitripavlutin/replace-all-string-occurrences-javascript/
作者: Dmitri Pavlutin
译文地址:segmentfault/a/1190000023721944
更多编程相关知识,请访问:编程入门!!
以上就是详解JavaScript中的padStart()和padEnd()方法的详细内容,更多请关注易企推科技其它相关文章!
本文地址:网络百科频道 https://www.eeeoo.cn/wangluo/1150610.html,嗨游网一个专业手游免费下载攻略知识分享平台,本站部分内容来自网络分享,不对内容负责,如有涉及到您的权益,请联系我们删除,谢谢!