ECMAScript 2017 中的 String.prototype.padStart() 和 String.prototype.padEnd()：更好的字符串处理
在编写前端应用程序时，字符串处理是一个非常常见的任务。而在 ECMAScript 2017 中，新的字符串方法 String.prototype.padStart() 和 String.prototype.padEnd() 提供了更方便和灵活的字符串处理方式。
String.prototype.padStart() 方法用于将字符串填充到指定的长度。举例来说，假设我们要将字符串填充到 10 个字符的长度，可以这样实现：
let str = 'hello'; let paddedStr = str.padStart(10, ' '); console.log(paddedStr); // " hello"
这里，第一个参数 10 表示所需填充后的长度，第二个参数 ' ' 表示用来填充的字符。如果这里的第二个参数没有指定，则默认使用空字符串。
此外，如果原字符串的长度大于或等于指定长度，则不会进行填充。例如：
let str = 'hello'; let paddedStr = str.padStart(3, ' '); console.log(paddedStr); // "hello"
这里指定的长度是 3，因为原字符串的长度大于等于 3，所以不会进行填充，直接输出原字符串。
String.prototype.padEnd() 方法与其相似，只不过是填充到指定长度的末尾。例如：
let str = 'hello'; let paddedStr = str.padEnd(10, ' '); console.log(paddedStr); // "hello "
这里的字符串填充到了 10 个字符的长度，只不过填充的位置是在字符串的末尾。
在实际开发中，这些方法可以方便我们处理字符串长度不够时的情况。例如，在用户注册页面中，可能需要在用户名、密码等输入框的前后进行填充，为用户提供更好的视觉体验。我们可以这样实现：
let usernameInput = document.getElementById('username');
let paddedUsername = usernameInput.value.padStart(20, '-');
usernameInput.value = paddedUsername;这里将用户名填充到 20 个字符的长度，并用连字符 '-' 来填充。
当然，这里需要注意的是，填充的字符并不一定要使用连字符。可以根据具体需求来选择填充的字符，例如 '0'、'_'、'!' 等等。另外，填充的长度也要根据实际情况来选择，避免出现过长或过短的情况。
总结
在 ECMAScript 2017 中，String.prototype.padStart() 和 String.prototype.padEnd() 提供了更好的字符串处理方式，可以方便地将字符串填充到指定的长度。在实际开发中，可以根据需求来灵活使用这些方法，提高程序的可维护性和用户体验。
参考代码
-- -------------------- ---- ------- --- --- - -------- --- --------- - ---------------- - --- ----------------------- -- - ------ --- --- - -------- --- --------- - --------------- - --- ----------------------- -- ------- --- --- - -------- --- --------- - -------------- - --- ----------------------- -- ------ - --- ------------- - ------------------------------------ --- -------------- - -------------------------------- ----- ------------------- - ---------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f8462cf6b2d6eab30662de