字符串填充-padStart 、padEnd

一、基本语法

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')); // '12121345'

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'));  // '34567676'

三、使用场景

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}`);