ES7 中的 String.prototype.padStart() 方法

随着 ES7 的到来，JavaScript 新增了一个函数： String.prototype.padStart() 。该函数的作用是在字符串的前面添加指定的字符，使其达到指定的长度，从而实现字符串补全的功能。这是一个非常有用的函数，被广泛用于前端的开发中。下面将详细介绍 String.prototype.padStart() 函数的使用方法和相关知识点。

语法

String.prototype.padStart(targetLength, padString)

• targetLength: 统一字符串长度的目标值，即新字符串的长度；
• padString（可选）：填充字符串。默认值为空字符串。

用法

下面是一个 String.prototype.padStart() 函数的示例：

const oldString = 'foo';
const newString = oldString.padStart(5, '0');
console.log(newString); // "00foo"

在这个示例中，字符串 foo 的长度是 3，而 String.prototype.padStart() 函数填充了 2 个 0 的字符，将字符串的长度扩展至 5。

在不填充字符串的情况下，String.prototype.padStart() 函数会自动用空格填充字符串前面的部分：

const oldString = '123';
const newString = oldString.padStart(5);
console.log(newString); // "  123"

注意点

• 如果填充的字符串长度大于目标长度减去原字符串长度，那么填充字符串会被截断，以确保结果字符串不超过目标长度；

const oldString = 'foo';
const newString = oldString.padStart(5, '0123456789');
console.log(newString); // "01foo"

• String.prototype.padStart() 函数要求目标长度大于或等于原字符串长度，否则不会填充字符串；

const oldString = 'foo';
const newString = oldString.padStart(2, '0');
console.log(newString); // "foo"

使用场景

金额补全

在处理前端开发中，金额的格式化是一个非常常见的需求，特别是在金融行业。如果要将金额转换为指定位数，我们就可以使用 String.prototype.padStart() 函数来实现。

例如，我们希望将一个金额的小数位数转换为 2 位。我们可以使用以下代码：

const money = '200.1';
const newMoney = money.padEnd(money.indexOf('.') + 3, '0');
console.log(newMoney); // "200.10"

表单输入验证

在表单的前端开发中，我们会经常用到 input，而用户输入的数据有时会有一定的规则要求，例如手机号码必须是 11 位数，而身份证号码必须是 18 位数。在这种情况下，我们也可以使用 String.prototype.padStart() 函数进行补全。

例如，我们需要验证一个需要填写电话号码的表单。如果用户只输入了 10 位数，我们就可以使用以下代码将电话号码补全为 11 位数：

const phone = '1234567890';
const newPhone = phone.padStart(11, '0');
console.log(newPhone); // "01234567890"

结论

总之，String.prototype.padStart() 函数是一个非常有用的函数，在前端的开发中有着广泛的应用场景。它可以帮助开发人员快速实现字符串补全的功能，提高开发效率，确保代码的质量。在必要时，我们可以使用 String.prototype.padStart() 函数来实现金额格式化和表单验证等功能。

感谢您阅读本篇文章。如果您有任何疑问或建议，请在评论区留言。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67373105317fbffedf08bfff