ES8 的字符串填充（String Padding）方法 padStart() 和 padEnd() 入门介绍-JavaScript中文网-JavaScript教程资源分享门户

在 ES8 中，新增了两个字符串填充方法 padStart() 和 padEnd()，它们可以方便地将字符串填充到指定长度，并且可以指定填充字符。

padStart()

padStart() 方法用于将字符串填充到指定长度，如果字符串长度小于指定长度，则向字符串开头添加指定字符，直到达到指定长度为止。

语法

str.padStart(targetLength [, padString])

targetLength：必需，填充后字符串的目标长度。
padString：可选，填充的字符，默认为 " "（空格）。

示例

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

padEnd()

padEnd() 方法用于将字符串填充到指定长度，如果字符串长度小于指定长度，则向字符串末尾添加指定字符，直到达到指定长度为止。

语法

str.padEnd(targetLength [, padString])

targetLength：必需，填充后字符串的目标长度。
padString：可选，填充的字符，默认为 " "（空格）。

示例

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

应用场景

对齐输出

使用 padStart() 和 padEnd() 方法可以方便地对齐输出，如下所示：

const name = "Tom";
const age = 18;
const job = "Web Developer";

console.log("Name:".padEnd(15), name);
console.log("Age:".padEnd(15), age);
console.log("Job:".padEnd(15), job);

输出结果为：

Name:          Tom
Age:           18
Job:           Web Developer

数字前导零

在某些情况下，需要将数字填充到指定长度，并在前面添加前导零，如下所示：

const number = 7;
const length = 3;

console.log(number.toString().padStart(length, "0")); // "007"

总结

padStart() 和 padEnd() 方法是 ES8 中新增的字符串填充方法，它们可以方便地将字符串填充到指定长度，并且可以指定填充字符。在对齐输出和数字前导零等场景中，它们都可以发挥重要作用。

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