字符串填充-padStart 、padEnd

大家好，欢迎来到IT知识分享网。

一、基本语法

1.padStart()

padStart(targetLength, padString)：用另一个字符串填充当前字符串（如果需要会重复填充），直到达到给定的长度。填充是从当前字符串的开头开始的。最后返回一个新的字符串。
targetLength：当前 str 填充后的长度。如果该值小于或等于 str.length，则会直接返回当前 str。
padString（可选）：用于填充当前 str 的字符串。如果 padString 太长，无法适应 targetLength，则会从末尾被截断。默认值为 Unicode“空格”字符（U+0020）。

2.padEnd()

padEndt(targetLength, padString)：用另一个字符串填充当前字符串（如果需要会重复填充），直到达到给定的长度。填充是从当前字符串的末尾开始的。最后返回一个新的字符串。
targetLength：当前 str 填充后的长度。如果该值小于或等于 str.length，则会直接返回当前 str。
padString（可选）：用于填充当前 str 的字符串。如果 padString 太长，无法适应 targetLength，则会从末尾被截断。默认值为 Unicode“空格”字符（U+0020）。

二、具体使用

1.padStart

 const str = '345' console.log(str.padStart(2)); // '345' console.log(str.padStart(4)); // ' 345' console.log(str.padStart(4, '12')); // '1345' console.log(str.padStart(5, '12')); // '12345' console.log(str.padStart(8, '12')); // '' 

2.padEnd

 const str = '345' console.log(str.padEnd(2)); // '345' console.log(str.padEnd(4)); // '345 ' console.log(str.padEnd(4, '67')); // '3456' console.log(str.padEnd(5, '67')); // '34567' console.log(str.padEnd(8, '67')); // '' 

三、使用场景

1.编号格式化

后端给我的商品编号长度并不是一致的，例如：1、11、111这种，产品要求统一格式化为：001、011、111。这时候就可以使用字符串填充来实现了。

 const list = [ { 
   code: '1'}, { 
   code: '10'}, { 
   code: '11'}, { 
   code: '111'} ] list.forEach(item => { 
    item.showCode = item.code.padStart(3, '0') }) console.log(list); /* [ {'code': '1', 'showCode': '001'}, {'code': '10', 'showCode': '010'}, {'code': '11', 'showCode': '011'}, {'code': '111', 'showCode': '111'} ] */ 

2.日期格式化

获取当前日期的时候getMonth，和getDate都可能获取到的是一位数字，例如2023-8-17，但我们习惯上格式可能是2023-08-17，这时候也能使用字符串填充

 const year = new Date().getFullYear() const month = (new Date().getMonth() + 1).toString().padStart(2, '0') const date = new Date().getDate().toString().padStart(2, '0') console.log(`${ 
     year}-${ 
     month}-${ 
     date}`);