在 ES8（ECMAScript 2017）中，新增了一个 String.prototype.padStart() 方法，这个方法可以帮助我们用指定的字符完成字符串的前补位（padding）。在这篇文章中，我们将详细地探讨 padStart() 的原理、用法和示例。
基本用法
padStart() 方法的基本用法是：给定一个字符串长度和一个补位字符，它会将补位字符添加到当前字符串的开头，直到达到指定长度。例如：
const str = 'Hello'; console.log(str.padStart(10, '123')); // 输出 "123123Hello" console.log(str.padStart(2, '123')); // 输出 "Hello"
在上面的代码中，padStart() 将字符 '123' 补充到了字符串 'Hello' 的开头，直到字符串长度达到了 10。然后它返回了新的字符串 '123123Hello'。如果我们指定的长度小于原始字符串的长度，它将直接返回原始字符串。
需要注意，padStart() 方法不会修改原始字符串，而是返回新的字符串对象。因此，如果我们需要修改原始字符串，需要将其赋值为 padStart() 的返回值。
参数解析
padStart() 方法有两个参数：
str.padStart(targetLength [, padString])
targetLength: 必需，指定完成补位后字符串应该达到的长度。padString: 可选，用于补位的字符。如果未提供 padString，则使用空格。
需要注意的是，padString 的长度不应该超过 targetLength 进行补位操作后字符串的长度。如果 padString 长度过长，它将被截取到适当的长度，以使补位后的字符串长度等于 targetLength。
实例解析
让我们来看一个更复杂的示例。假设我们正在构建一个发票系统，需要在生成的发票号前补 0，使它们具有相同的长度。比如，我们可能生成了这样的两个发票号：
const invoice1 = '1001'; const invoice2 = '20001001';
发票号 invoice1 的长度为 4，事实上，它只需要前补 0 即可。然而，发票号 invoice2 的长度为 8，需要在其前面补充 4 个 0。这可以通过 padStart() 做到：
console.log(invoice1.padStart(8, '0')); // 输出 "00001001" console.log(invoice2.padStart(8, '0')); // 输出 "20001001"
在上面的代码中，无论是为 invoice1 还是为 invoice2，我们都将字符串长度设置为 8，并在其前面补充 0。
指导意义
String.prototype.padStart() 大幅简化了我们前补位的操作。在没有这个方法之前，我们不得不编写自定义的代码来完成这个任务。如今，padStart() 已成为了我们日常编写 JavaScript 代码时的标配之一。
然而，我们也需要注意 padStart() 的使用场景。当我们需要向前补位时，常常涉及到一些需要进行字符串长度匹配的操作。例如，如果我们正在处理时区信息，可能需要将 GMT 时间转换为本地时间。在这种情况下，我们也需要使用类似 padStart() 的方法来补充零。
需要注意的是，如果我们的字符串处理涉及到了用户输入，尤其是涉及到敏感信息（如密码），我们需要额外注意输入校验和安全性问题。不过，这些属于另一个话题，超过了本文的范围。
结论
在本文中，我们深入剖析了 ES8 中新增的 String.prototype.padStart() 方法。我们看到，padStart() 可以帮助我们快速和高效地完成向前补位的操作，无需编写自定义代码。它的使用场景非常广泛，可以应用于各种 JavaScript 应用程序。掌握 padStart() 的核心原理，可以为我们开发更高效的应用程序提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67121769ad1e889fe2029f79