在 ECMAScript 2018 中，有两个新的方法被添加到 String 原型中，它们分别是 padStart 和 padEnd。这两个方法的作用是在当前字符串的开头或结尾填充一定数量的字符，直到达到指定的长度。这个特性在实际开发中非常实用，可以用来对齐数据或者生成格式化的字符串。本文将详细探讨这两个方法的使用实例。
padStart 方法
padStart 方法的语法如下：
String.prototype.padStart(targetLength [, padString])
其中，targetLength 是填充后字符串的目标长度，padString 是用来填充的字符串（如果不传入 padString 参数，则默认使用空格）。返回填充后的新字符串。
以下是几个使用实例：
例一：填充字符串
const str = 'Hello'; console.log(str.padStart(10, '0')); // 输出：00000Hello console.log(str.padStart(10, 'abcdef')); // 输出：abcdHelloHel
这里使用了不同的填充字符（0 和 abcdef），它们将被用来填充到长度为 10 的字符串中，直到字符串开头达到指定长度。注意，第二个例子中填充字符的长度超过了目标长度，所以只有一部分填充字符被使用。
例二：生成固定长度的编号
function createSerialNumber(num) {
const str = num.toString();
return str.padStart(6, '0');
}
console.log(createSerialNumber(1)); // 输出：000001
console.log(createSerialNumber(12345)); // 输出：012345
console.log(createSerialNumber(9876543)); // 输出：9876543在这个例子中，使用 padStart 方法来生成一个固定长度的编号。如果需要不同长度的编号，只需要更改 padStart 的第一个参数即可。
padEnd 方法
padEnd 方法的语法和 padStart 类似：
String.prototype.padEnd(targetLength [, padString])
其中，targetLength 是目标字符串长度，padString 是填充字符串（默认为空格），方法返回填充后的新字符串。使用示例如下：
例三：生成格式化的字符串
const product = { name: 'iPhone', price: 999 };
const formatPrice = price => `$${price.toFixed(2)}`;
console.log(`${product.name.padEnd(8)}${formatPrice(product.price)}`); // 输出：iPhone $999.00这个例子是一个常见的用途，将数据按照格式转换成字符串。这里使用了 padEnd 方法将字符串 iPhone 填充到了长度为 8，左侧对齐。拼接字符串时使用了 ${} 语法将数据变量和字符串拼接在一起。
总结
本文探讨了 ECMAScript 2018 中新增的 padStart 和 padEnd 方法的使用实例，这两个方法在实际开发中非常实用，可以用来对齐数据或者生成格式化的字符串。需要注意的是，填充长度超过目标长度时，只有部分填充字符会被使用。在实际应用中，可以根据需要调整填充字符的长度和内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d39fb0b5eee0b525b40564