【JavaScript】字符串01 - padStart() 和 padEnd()

夏洛的网 / 2024-08-22 / 原文

在 JavaScript 中，我们可以使用 padStart() 和 padEnd() 方法来完成字符串补全。下面给大家介绍一下这两个方法的使用。

padStart() 方法用于在当前字符串的前面填充指定的字符，直到字符串的长度达到指定的长度。
padEnd() 方法用于在当前字符串的后面填充指定的字符，直到字符串的长度达到指定的长度。

语法：

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])

接受两个参数：

targetLength 是填充后的结果字符串的长度。
padString 是一个可选参数，用于填充字符串，此参数的默认值为" "。

返回值：

在原字符串开头或末尾填充指定的填充字符串直到目标长度所形成的新字符串。
如果 targetLength 小于当前字符串的长度，则字符串补全不生效，返回当前字符串本身。

'abc'.padStart(1, 'd');       // "abc"
'abc'.padEnd(1, 'd');         // "abc"

如果 targetLength 小于用来填充的字符串长度与原字符串的长度之和，则截掉超出位数的补全字符串。

'abc'.padStart(6, '123456'); // "123abc"
'abc'.padEnd(6, '123456');   // "abc123"

如果省略第二个参数 padString，即使用空格补全长度。

'abc'.padStart(6);          // "   abc"
'abc'.padEnd(6);            // "abc   "

应用：

用的比较多的就是时间或者日期前面的补 0，如格式化日期时，我们多采用 4-2-2 的表示形式：

function formatDate(date) {
  const d = new Date(date); // 必须是可被new Date() 解析的格式
  const year = d.getFullYear();
  const month = d.getMonth() + 1;
  const day = d.getDate();

  return [year, month, day].map(formatNumber).join('-');
}

function formatNumber(n) {
  n = n.toString();
  return n[1] ? n : n.padStart(2, '0');
}

到此，关于 JS 字符串补全方法 padStart() 和 padEnd() 的使用就介绍到这里了，希望对大家有所帮助。如有疑问，欢迎留言交流。