在JavaScript中，字符串补全功能是通过`padStart()`和`padEnd()`这两个方法实现的。这两个方法是在ES2017中引入的，它们的主要目的是在字符串的开头或结尾添加特定字符，以便使字符串达到指定的总长度。这在格式化输出，比如日期和时间的显示，或者确保数组索引的字符串前缀等场景中非常有用。
### `padStart()` 方法
`padStart()`方法用于在字符串的开始（左侧）填充指定的字符，直到达到目标长度。它的语法如下：
```javascript
str.padStart(targetLength [, padString])
```
- `targetLength`：必需，一个整数，表示期望的字符串总长度。
- `padString`：可选，用于填充的字符串。默认值为空格。
例如，如果你有一个字符串`'abc'`，并且希望将其扩展到长度为6，可以使用`padStart(6, '123')`。结果将是`'123abc'`，因为`'123'`被用作填充字符串，直到总长度达到6。
### `padEnd()` 方法
`padEnd()`方法则在字符串的末尾（右侧）填充字符，直到达到目标长度。其语法与`padStart()`相同：
```javascript
str.padEnd(targetLength [, padString])
```
同样，`targetLength`是期望的总长度，`padString`是填充字符串。
例如，`'abc'.padEnd(6, '123')`的结果是`'abc123'`，因为填充字符串`'123'`被添加到`'abc'`的末尾，使得总长度达到6。
### 应用示例
在处理时间戳转换为日期和时间格式时，`padStart()`和`padEnd()`非常有用。例如，以下是一个简单的日期格式化函数：
```javascript
function dataFormat(data) {
const dt = new Date(data * 1000);
const y = dt.getFullYear();
const m = (dt.getMonth() + 1 + '').padStart(2, '0');
const d = (dt.getDate() + '').padStart(2, '0');
const hh = (dt.getHours() + '').padStart(2, '0');
const mm = (dt.getMinutes() + '').padStart(2, '0');
const ss = (dt.getSeconds() + '').padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
```
在这个例子中，`padStart()`被用来确保月份、日期、小时、分钟和秒都是两位数，即使它们是单位数。
### 兼容性考虑
由于`padStart()`和`padEnd()`是ES2017引入的新特性，不是所有浏览器都支持。为了保证兼容性，你可以使用polyfill，如MDN文档提供的代码片段，或者从GitHub上的开源库中找到实现。
```javascript
if (!String.prototype.padStart) {
String.prototype.padStart = function padStart(targetLength, padString) {
// implementation...
};
}
```
`padStart()`和`padEnd()`是JavaScript字符串处理中的实用工具，它们简化了字符串格式化的过程，提高了代码的可读性和效率。在编写需要字符串补全功能的代码时，这两个方法是值得考虑的。
