JavaScript 字符串 padStart 与 padEnd 用法

padStart和padEnd是ES2017引入的字符串补全方法：padStart在开头填充至targetLength长度，padEnd在结尾填充，均返回新字符串，默认用空格填充，常用于数字补零、文本对齐等场景。

padstart 和 padend 是 javascript 中用于字符串补全的两个实用方法，它们能让字符串达到指定长度，并在开头或结尾填充指定字符（默认为空格）。

padStart：在字符串开头补全

语法：str.padStart(targetLength, padString)。如果原字符串长度已大于等于目标长度，则直接返回原字符串；否则，在开头添加 padString 直到满足长度要求。

• targetLength：期望的最终字符串长度，必须为非负整数
• padString：用于填充的字符串，若省略则默认用空格；若过长则会被截断
• 常见用途：格式化数字（如补零）、对齐文本、生成固定宽度 ID

例如："5".padStart(3, "0") → "005"；"hello".padStart(8, "x") → "xxxhello"。

padEnd：在字符串结尾补全

语法：str.padEnd(targetLength, padString)，逻辑与 padStart 类似，只是填充位置在末尾。

• 适合做右对齐、补齐描述字段、构造日志输出格式等
• 当 padString 长度不能整除所需填充长度时，会循环拼接并截断至刚好满足
• 注意：空字符串或 undefined 作为 padString 会抛出 TypeError

例如："abc".padEnd(6, "-") → "abc---"；"hi".padEnd(7, "12") → "hi12121"（”12″ 循环使用后截断）。

立即学习“Java免费学习笔记（深入）”；

实际使用中的注意事项

这两个方法不会修改原字符串，而是返回新字符串，所以记得赋值或链式使用。

• 目标长度小于当前长度时，返回原字符串，不报错也不填充
• 填充字符串为空时会报错，可用 padStart(len, " ") 显式传空格避免
• 结合 toString() 可安全处理数字：(42).toString().padStart(4, "0") → "0042"
• ES2017 引入，IE 不支持，需考虑兼容性或使用 polyfill

替代写法（兼容旧环境）

若需支持老旧浏览器，可手动实现简易版本：

function padStart(str, len, pad = " ") {
  return str.length >= len ? str : pad.repeat(Math.ceil((len - str.length) / pad.length)).slice(0, len - str.length) + str;
}

不过现代项目中，只要目标环境支持 ES2017，直接用原生方法更简洁可靠。