ECMAScript 2019 中的字符串方法 padStart 和 padEnd 详解

在 ECMAScript 2019 中，新增了两个字符串方法 padStart 和 padEnd，用于在字符串的前面或后面填充指定的字符，使字符串达到指定的长度。这两个方法在前端开发中非常实用，本文将详细介绍它们的用法和示例。

padStart 方法

padStart 方法用于在字符串的前面填充指定的字符，使字符串达到指定的长度。其语法如下：

str.padStart(targetLength [, padString])

其中，targetLength 表示目标长度，即最终字符串需要达到的长度；padString 表示用于填充的字符，默认为 " "（空格）。

例如，下面的代码将字符串 "hello" 前面填充了 3 个 "-"，使其长度达到了 8：

const str = 'hello';
const paddedStr = str.padStart(8, '-');
console.log(paddedStr); // "---hello"

如果目标长度小于或等于原字符串的长度，则返回原字符串：

const str = 'hello';
const paddedStr = str.padStart(3, '-');
console.log(paddedStr); // "hello"

如果不指定填充字符，则使用默认的空格：

const str = 'hello';
const paddedStr = str.padStart(8);
console.log(paddedStr); // "   hello"

padEnd 方法

padEnd 方法用于在字符串的后面填充指定的字符，使字符串达到指定的长度。其语法如下：

str.padEnd(targetLength [, padString])

其中，targetLength 表示目标长度，即最终字符串需要达到的长度；padString 表示用于填充的字符，默认为 " "（空格）。

例如，下面的代码将字符串 "hello" 后面填充了 3 个 "-"，使其长度达到了 8：

const str = 'hello';
const paddedStr = str.padEnd(8, '-');
console.log(paddedStr); // "hello---"

如果目标长度小于或等于原字符串的长度，则返回原字符串：

const str = 'hello';
const paddedStr = str.padEnd(3, '-');
console.log(paddedStr); // "hello"

如果不指定填充字符，则使用默认的空格：

const str = 'hello';
const paddedStr = str.padEnd(8);
console.log(paddedStr); // "hello   "

总结

padStart 和 padEnd 方法非常实用，可以方便地将字符串填充到指定的长度。在前端开发中，经常需要对字符串进行格式化或对齐，这两个方法可以大大简化代码的编写。在使用时，需要注意目标长度和填充字符的选择，以便达到预期的效果。

示例代码：

// javascriptcn.com 代码示例
const str = 'hello';
const paddedStr1 = str.padStart(8, '-');
const paddedStr2 = str.padStart(3, '-');
const paddedStr3 = str.padStart(8);
const paddedStr4 = str.padEnd(8, '-');
const paddedStr5 = str.padEnd(3, '-');
const paddedStr6 = str.padEnd(8);
console.log(paddedStr1); // "---hello"
console.log(paddedStr2); // "hello"
console.log(paddedStr3); // "   hello"
console.log(paddedStr4); // "hello---"
console.log(paddedStr5); // "hello"
console.log(paddedStr6); // "hello   "

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