ES8 中的 String.prototype.padStart 与 String.prototype.padEnd：更好的格式化字符串-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常需要对字符串进行格式化，以满足特定的要求。ES8 中新增了两个方法 String.prototype.padStart 和 String.prototype.padEnd，可以更好地完成字符串格式化的任务。本文将详细介绍这两个方法的使用方法和指导意义。

String.prototype.padStart

String.prototype.padStart 方法用于在字符串的开头填充指定的字符，直到字符串达到指定的长度。该方法的语法如下：

str.padStart(targetLength [, padString])

其中，targetLength 表示目标长度，即最终字符串的长度；padString 表示用于填充的字符串，如果未指定，则默认使用空格。

下面是一个示例：

const str = 'hello';
const result = str.padStart(10, 'x');
console.log(result); // 'xxxxxhello'

在上面的示例中，str 的长度为 5，而 targetLength 为 10，因此需要在字符串开头填充 5 个 x，最终得到的字符串为 'xxxxxhello'。

当 padString 参数未指定时，默认使用空格进行填充：

const str = 'hello';
const result = str.padStart(10);
console.log(result); // '     hello'

在上述示例中，targetLength 为 10，因此需要在字符串开头填充 5 个空格，最终得到的字符串为 ' hello'。

String.prototype.padEnd

String.prototype.padEnd 方法用于在字符串的结尾填充指定的字符，直到字符串达到指定的长度。该方法的语法如下：

str.padEnd(targetLength [, padString])

其中，targetLength 表示目标长度，即最终字符串的长度；padString 表示用于填充的字符串，如果未指定，则默认使用空格。

下面是一个示例：

const str = 'hello';
const result = str.padEnd(10, 'x');
console.log(result); // 'helloxxxxx'

在上面的示例中，str 的长度为 5，而 targetLength 为 10，因此需要在字符串结尾填充 5 个 x，最终得到的字符串为 'helloxxxxx'。

当 padString 参数未指定时，默认使用空格进行填充：

const str = 'hello';
const result = str.padEnd(10);
console.log(result); // 'hello     '

在上述示例中，targetLength 为 10，因此需要在字符串结尾填充 5 个空格，最终得到的字符串为 'hello '。

指导意义

String.prototype.padStart 和 String.prototype.padEnd 方法可以方便地完成字符串格式化的任务，特别是在需要对齐的场景下，更加方便快捷。例如，在输出日志时，可以使用这两个方法对齐时间戳和日志内容。

此外，这两个方法还可以用于生成指定长度的随机字符串。例如，可以使用以下代码生成一个长度为 10 的随机字符串：

const randomStr = Math.random().toString(36).substring(2).padEnd(10, 'x');
console.log(randomStr); // 'j1zq3yq3vx'

在上述代码中，Math.random().toString(36).substring(2) 用于生成一个随机的字符串，而 padEnd 方法用于将字符串长度填充到 10。

总结

String.prototype.padStart 和 String.prototype.padEnd 方法是 ES8 中新增的字符串方法，用于在字符串的开头和结尾填充指定的字符，以达到指定的长度。这两个方法可以方便地完成字符串格式化的任务，特别是在需要对齐的场景下，更加方便快捷。同时，这两个方法还可以用于生成指定长度的随机字符串等任务。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658e3a04eb4cecbf2d40c9a2