JavaScript 字符串填充技巧：padStart与padEnd用法

JavaScript 中的 padStart 和 padEnd 是高效、不可变的字符串填充方法，分别用于在字符串开头或结尾添加指定字符以精准达到目标长度，广泛应用于数字补零（如'5'.padStart(2, '0') → '05'）、时间格式化等实际场景，语法简洁、语义清晰，是现代前端开发中不可或缺的格式化利器。

在 JavaScript 中，字符串填充是格式化数据时常用的操作。当你需要确保字符串达到指定长度时，padStart 和 padEnd 提供了简洁高效的解决方案。这两个方法不会修改原字符串，而是返回一个新字符串，通过在开头或结尾添加指定字符来补足长度。

padStart：在字符串开头填充

该方法用于在字符串的前端添加字符，直到总长度满足要求。常用于格式化数字、时间或编号等场景。

语法如下：

其中，targetLength 是目标长度，padString 是用来填充的字符（可选，默认为空格）。

例如，将数字补零为两位数：

处理时间显示时非常实用：

比如，将用户名统一显示为 10 个字符宽，不足部分用点补全：

在表格化输出或日志记录中，这种对齐方式能提升可读性。

实际应用场景举例

这两个方法在日常开发中用途广泛，以下是几个典型用例：

• 格式化日期时间：月份、小时、分钟补零
• 生成订单编号：如前缀加固定位数序号 'ORD00001'
• 密码掩码显示：保留前几位明文，其余用 * 填充
• 命令行工具输出：对齐列宽，增强界面整洁度

注意事项与兼容性

padStart 和 padEnd 是 ES2017（ES8）引入的特性，现代浏览器和 Node.js 环境基本都支持。如果需兼容老旧环境，可使用 polyfill 或手动实现。

填充字符串若超过所需长度，会被自动截断。例如：

另外，传入空字符串作为填充字符会导致错误，应避免这种情况。

基本上就这些。掌握 padStart 和 padEnd 能让你的字符串处理更优雅，减少手动拼接逻辑，代码也更清晰易懂。

本篇关于《JavaScript 字符串填充技巧：padStart与padEnd用法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！