字符串填充方法padStart()和padEnd()

ECMAScript 8（ES2017）引入了两个实用的字符串填充方法：padStart()和padEnd()。这两个方法允许开发者通过指定长度和填充字符串来在原字符串的开头或末尾进行填充，使得字符串达到目标长度。它们在格式化输出、对齐文本等场景中非常有用。

padStart()方法

padStart()方法用于在原字符串的开头填充指定字符，直到字符串达到目标长度。如果原字符串的长度已经等于或大于目标长度，则返回原字符串。

语法

str.padStart(targetLength [, padString])

• targetLength：填充后的字符串长度。
• padString（可选）：用于填充的字符串，默认为空格（" "）。

示例

1. 基本用法：

   const str = "123";
   console.log(str.padStart(5)); // "  123"（默认用空格填充）
   console.log(str.padStart(5, "0")); // "00123"
   

2. 填充字符串长度超过目标长度： 如果padString的长度加上原字符串长度超过targetLength，padString会被截断。

   const str = "abc";
   console.log(str.padStart(5, "xyz")); // "xyabc"（只取"xy"填充）
   

3. 原字符串长度大于目标长度：

   const str = "hello";
   console.log(str.padStart(3, "0")); // "hello"（原字符串不变）
   

4. 格式化日期或数字：

   const month = "3";
   const day = "5";
   console.log(`${month.padStart(2, "0")}-${day.padStart(2, "0")}`); // "03-05"
   

padEnd()方法

padEnd()方法与padStart()类似，但填充方向相反，它是在原字符串的末尾填充字符，直到字符串达到目标长度。

语法

str.padEnd(targetLength [, padString])

• targetLength：填充后的字符串长度。
• padString（可选）：用于填充的字符串，默认为空格（" "）。

示例

1. 基本用法：

   const str = "123";
   console.log(str.padEnd(5)); // "123  "（默认用空格填充）
   console.log(str.padEnd(5, "0")); // "12300"
   

2. 填充字符串长度超过目标长度：

   const str = "abc";
   console.log(str.padEnd(5, "xyz")); // "abcxy"（只取"xy"填充）
   

3. 原字符串长度大于目标长度：

   const str = "hello";
   console.log(str.padEnd(3, "0")); // "hello"（原字符串不变）
   

4. 对齐表格数据：

   const data = [
     { name: "Alice", score: 95 },
     { name: "Bob", score: 88 },
   ];
   data.forEach(item => {
     console.log(`${item.name.padEnd(10)}: ${item.score}`);
   });
   // 输出：
   // Alice     : 95
   // Bob       : 88
   

实际应用场景

格式化输出

padStart()和padEnd()常用于格式化输出，比如对齐日志、表格数据或数字显示。例如，在控制台打印表格时，可以使用它们来对齐列：

const products = [
  { name: "Laptop", price: 999 },
  { name: "Phone", price: 699 },
  { name: "Tablet", price: 299 },
];
products.forEach(product => {
  console.log(`${product.name.padEnd(10)}: $${product.price.toString().padStart(4)}`);
});
// 输出：
// Laptop    : $ 999
// Phone     : $ 699
// Tablet    : $ 299

数字补零

在处理日期或时间时，经常需要将数字补零到固定位数：

function formatTime(hours, minutes, seconds) {
  return [
    hours.toString().padStart(2, "0"),
    minutes.toString().padStart(2, "0"),
    seconds.toString().padStart(2, "0"),
  ].join(":");
}
console.log(formatTime(5, 3, 9)); // "05:03:09"

生成固定长度的字符串

在某些场景下，可能需要生成固定长度的字符串（如生成固定长度的ID或编码）：

function generateId(length) {
  const base = Math.random().toString(36).slice(2);
  return base.padEnd(length, "0").slice(0, length);
}
console.log(generateId(8)); // 类似 "a1b2c3d0"

注意事项

1. 填充字符串的截断： 如果padString的长度不足以填满剩余空间，它会重复填充直到达到目标长度。如果padString过长，则会被截断。

2. 非字符串类型的处理： 如果原字符串不是字符串类型，padStart()和padEnd()会先将其转换为字符串：

   console.log((123).toString().padStart(5, "0")); // "00123"
   

3. 空字符串或无效参数：

   • 如果padString为空字符串，则直接返回原字符串。
   • 如果targetLength为负数，也直接返回原字符串。

与其他方法的对比

在ES8之前，开发者通常需要手动实现字符串填充功能。例如，使用循环或Array.join()：

function padStartManual(str, targetLength, padString = " ") {
  if (str.length >= targetLength) return str;
  const padLength = targetLength - str.length;
  let padding = "";
  for (let i = 0; i < padLength; i++) {
    padding += padString[i % padString.length];
  }
  return padding + str;
}
console.log(padStartManual("123", 5, "0")); // "00123"

相比之下，padStart()和padEnd()提供了更简洁、高效的解决方案。