当我们需要在前端开发中处理和展示数据时，经常会遇到需要将字符串填充到确定长度的情况。例如，我们可能需要在表单中对用户输入的内容进行限制，或者在生成文件名等场景中需要保持字符长度一致。这时，是否有一个JavaScript函数可以轻松地实现这个功能呢？答案是肯定的。
padStart() 和 padEnd()
ES2017 中引入了 padStart() 和 padEnd() 两个方法，它们可以分别在字符串的头部和尾部填充指定字符，直到字符串达到目标长度。这两个方法接收两个参数：所需的最小长度和可选的填充字符（默认为空格符）。如果当前字符串的长度已经大于或等于所需长度，则不会进行任何操作。
这里是 padStart() 方法的使用示例：
const str = 'hello'; const paddedStr = str.padStart(10, ' '); console.log(paddedStr); // 输出 ' hello'
如果我们要在字符串的末尾填充指定字符，可以使用 padEnd() 方法：
const str = 'hello'; const paddedStr = str.padEnd(10, '-'); console.log(paddedStr); // 输出 'hello-----'
实现自定义填充逻辑
虽然 padStart() 和 padEnd() 提供了一种简单而便捷的方式来填充字符串，但是它们的填充字符只能是单个字符。如果我们需要自定义填充逻辑，例如在字符串中间插入多个字符或者根据字符串长度动态计算需要填充的字符数量等，就需要自己编写函数来实现了。
以下示例代码演示了如何通过自定义函数 padString() 实现将字符串填充到指定长度并插入指定字符的功能：
-- -------------------- ---- -------
---
- -------------------------
- ------ -------- --- ----------
- ------ -------- ------------ ----
- ------ -------- ------- ----
--
-------- -------------- ------------- -------- -
----- --- - -----------
-- ---- -- ------------- -
------ ----
-
----- ---- - ------------ - ----
----- -------- - --------------- - ---
----- ---------- - --- - ---------
----- ----------- - --- - ----- - ----------
----- ------- - ---------------- --------- - ------------------------- - -----
----- -------- - -------------------------- - ----------- - ------------------------
------ ------- - ---------
-
----- --- - --------
----- --------- - -------------- --- -----
----------------------- -- -- ------------这个自定义函数的逻辑比较简单，首先判断目标长度是否小于当前字符串长度，如果是则直接返回原字符串；否则计算需要填充的字符数量，并将字符串分为左右两部分进行填充。
总结
本文介绍了在前端开发中如何实现将字符串填充到指定长度的功能。通过 ES2017 中的 padStart() 和 padEnd() 方法，我们可以轻松地在字符串头部或尾部插入单个字符进行填充。如果需要自定义填充逻辑，我们可以根据需求编写函数实现该功能。希望读者通过本文的学习和示例代码的实践，能够更好地掌握在前端开发中处理字符串的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8933
