随着 ES7 的到来，JavaScript 新增了一个函数： String.prototype.padStart() 。该函数的作用是在字符串的前面添加指定的字符，使其达到指定的长度，从而实现字符串补全的功能。这是一个非常有用的函数，被广泛用于前端的开发中。下面将详细介绍 String.prototype.padStart() 函数的使用方法和相关知识点。
语法
String.prototype.padStart(targetLength, padString)
targetLength: 统一字符串长度的目标值，即新字符串的长度；padString（可选）：填充字符串。默认值为空字符串。
用法
下面是一个 String.prototype.padStart() 函数的示例：
----- --------- - ------ ----- --------- - --------------------- ----- ----------------------- -- -------
在这个示例中，字符串 foo 的长度是 3，而 String.prototype.padStart() 函数填充了 2 个 0 的字符，将字符串的长度扩展至 5。
在不填充字符串的情况下，String.prototype.padStart() 函数会自动用空格填充字符串前面的部分：
----- --------- - ------ ----- --------- - ---------------------- ----------------------- -- - ----
注意点
- 如果填充的字符串长度大于目标长度减去原字符串长度，那么填充字符串会被截断，以确保结果字符串不超过目标长度；
----- --------- - ------ ----- --------- - --------------------- -------------- ----------------------- -- -------
String.prototype.padStart()函数要求目标长度大于或等于原字符串长度，否则不会填充字符串；
----- --------- - ------ ----- --------- - --------------------- ----- ----------------------- -- -----
使用场景
金额补全
在处理前端开发中，金额的格式化是一个非常常见的需求，特别是在金融行业。如果要将金额转换为指定位数，我们就可以使用 String.prototype.padStart() 函数来实现。
例如，我们希望将一个金额的小数位数转换为 2 位。我们可以使用以下代码：
----- ----- - -------- ----- -------- - ------------------------------- - -- ----- ---------------------- -- --------
表单输入验证
在表单的前端开发中，我们会经常用到 input，而用户输入的数据有时会有一定的规则要求，例如手机号码必须是 11 位数，而身份证号码必须是 18 位数。在这种情况下，我们也可以使用 String.prototype.padStart() 函数进行补全。
例如，我们需要验证一个需要填写电话号码的表单。如果用户只输入了 10 位数，我们就可以使用以下代码将电话号码补全为 11 位数：
----- ----- - ------------- ----- -------- - ------------------ ----- ---------------------- -- -------------
结论
总之，String.prototype.padStart() 函数是一个非常有用的函数，在前端的开发中有着广泛的应用场景。它可以帮助开发人员快速实现字符串补全的功能，提高开发效率，确保代码的质量。在必要时，我们可以使用 String.prototype.padStart() 函数来实现金额格式化和表单验证等功能。
感谢您阅读本篇文章。如果您有任何疑问或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67373105317fbffedf08bfff