详解JavaScript中的padStart和padEnd方法

JavaScript中的padStart和padEnd方法用于在当前字符串的开头或末尾填充指定的字符，直到达到指定的长度。padStart(targetLength, padString)方法在当前字符串的开头填充，直到字符串长度达到targetLength，填充字符由padString指定，默认为空格。padEnd(targetLength, padString)方法则在当前字符串的末尾进行填充，操作类似但方向相反。这两个方法在处理字符串格式化时非常有用，能够简化代码并提升可读性。

在JavaScript中，字符串处理是一项常见且重要的任务，为了更灵活地格式化字符串，ES2017（也称为ECMAScript 2017或ES8）引入了padStart()和padEnd()两个非常实用的字符串方法，这两个方法允许我们在字符串的开头或末尾填充指定的字符，直到达到指定的长度，下面，我们将详细探讨这两个方法的使用方法和应用场景。

（图片来源网络，侵删）

padStart() 方法

（图片来源网络，侵删）

padStart()方法在当前字符串的开头填充指定的字符，直到达到指定的长度，如果原字符串的长度已经等于或超过了目标长度，则返回原字符串。

（图片来源网络，侵删）

语法：

（图片来源网络，侵删）

str.padStart(targetLength [, padString])

targetLength：当前字符串需要填充达到的目标长度。

（图片来源网络，侵删）

padString（可选）：填充字符串，如果省略，则使用空格填充，如果padString太长，则会被截断以匹配targetLength。

（图片来源网络，侵删）

示例：

（图片来源网络，侵删）

let str = "5";
let paddedStr = str.padStart(3, "0"); // "005"
console.log(paddedStr);

在这个例子中，我们想要将字符串"5"转换为"005"，使其总长度为3，通过使用padStart(3, "0")，我们在"5"的开头填充了两个"0"。

（图片来源网络，侵删）

padEnd() 方法

（图片来源网络，侵删）

与padStart()相反，padEnd()方法在当前字符串的末尾填充指定的字符，直到达到指定的长度，如果原字符串的长度已经等于或超过了目标长度，则返回原字符串。

（图片来源网络，侵删）

语法：

（图片来源网络，侵删）

str.padEnd(targetLength [, padString])

- 参数与padStart()相同。

（图片来源网络，侵删）

示例：

（图片来源网络，侵删）

let str = "Hello";
let paddedStr = str.padEnd(10, "-"); // "Hello-----"
console.log(paddedStr);

在这个例子中，我们想要将字符串"Hello"扩展为长度为10的字符串，通过在末尾填充"-"来实现，使用padEnd(10, "-")后，我们得到了"Hello-----"。

（图片来源网络，侵删）

应用场景

（图片来源网络，侵删）

格式化数字：在显示或存储时，经常需要将数字格式化为固定长度的字符串，比如时间戳、订单号等。

（图片来源网络，侵删）

对齐文本：在生成报告或日志时，为了保持文本的对齐，可能需要使用padStart()或padEnd()来调整字符串的长度。

（图片来源网络，侵删）

生成特定格式的字符串：如生成特定长度的验证码、ID等，可以通过填充字符来确保字符串长度的一致性。

（图片来源网络，侵删）

常见问题解答

（图片来源网络，侵删）

问题1：如果padString的长度大于targetLength减去原字符串长度的差值怎么办？

（图片来源网络，侵删）

如果padString的长度大于需要填充的长度（即targetLength减去原字符串长度的差值），则padString会被截断，只使用其前缀部分进行填充，直到达到目标长度。

（图片来源网络，侵删）

示例：

（图片来源网络，侵删）

let str = "a";
let paddedStr = str.padStart(5, "abcdef"); // "abcde"
console.log(paddedStr);

在这个例子中，尽管padString是"abcdef"，但由于只需要填充4个字符（从"a"到长度为5），所以只使用了"abcdef"的前4个字符进行填充。

（图片来源网络，侵删）

问题2：如果targetLength小于或等于原字符串的长度，会发生什么？

（图片来源网络，侵删）

如果targetLength小于或等于原字符串的长度，则padStart()和padEnd()方法都会直接返回原字符串，不进行任何填充。

（图片来源网络，侵删）

示例：

（图片来源网络，侵删）

let str = "abcdef";
let paddedStr1 = str.padStart(5, "0"); // "abcdef"
let paddedStr2 = str.padEnd(6, "-"); // "abcdef"
console.log(paddedStr1);
console.log(paddedStr2);

在这个例子中，由于targetLength小于或等于原字符串的长度，所以padStart()和padEnd()都没有进行填充，直接返回了原字符串。

（图片来源网络，侵删）