ES8 中的字符串扩展方法：padStart() 和 padEnd()

目录

padStart() 方法

用法示例

padEnd() 方法

用法示例

最佳实践（日期补零）

结论

---

在 ES8 中，JavaScript 新增了两个字符串扩展方法：padStart() 和 padEnd()。这两个方法可以在字符串头部或尾部插入指定字符，补全字符串长度。

padStart() 方法

语法：

str.padStart(targetLength[, padString])

参数：

• targetLength：目标字符串长度，必需，整数类型。
• padString：[可选]填充到目标长度时所使用的字符串。默认为 ' '。

返回值：返回一个新的字符串，原字符串不变。

用法示例

在指定字符串的头部插入指定字符，补全字符串长度。

• 补全长度为 5，字符为 '0'：

const str = '12';
const result = str.padStart(5, '0');
console.log(result); // '00012'

• 目标长度小于原字符串长度，原字符串不变：

const str = '12345';
const result = str.padStart(3, '0');
console.log(result); // '12345'

• 不指定填充字符，默认使用空格：

const str = 'hello world';
const result = str.padStart(15);
console.log(result); // '    hello world'

padEnd() 方法

语法：

str.padEnd(targetLength[, padString])

参数：

• targetLength：目标字符串长度，必需，整数类型。
• padString：[可选]填充到目标长度时所使用的字符串。默认为 ' '。

返回值：返回一个新的字符串，原字符串不变。

 

用法示例

在指定字符串的尾部插入指定字符，补全字符串长度。

• 补全长度为 8，字符为 '.'：

const str = 'hello';
const result = str.padEnd(8, '.');
console.log(result); // 'hello...'

• 目标长度小于原字符串长度，原字符串不变：

const str = 'world';
const result = str.padEnd(3, '.');
console.log(result); // 'world'

• 不指定填充字符，默认使用空格：

const str = 'hello world';
const result = str.padEnd(15);
console.log(result); // 'hello world  

最佳实践（日期补零）

padStart() 和 padEnd() 方法可以方便地用于格式化字符串，例如在输出日志时，为了对齐字符串长度，可使用其中一个方法。它们还可以用于制作表格或其他需要对齐的数据展示页面。

需要注意的是，这两个方法在 IE 浏览器中不兼容，因此在开发过程中需要使用 polyfill 或其他处理方法兼容该浏览器。

const formatDate = (date, format = "YYYY-MM-DD") => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return format.replace("YYYY", year).replace("MM", month).replace("DD", day);
};

结论

ES8 中的 padStart() 和 padEnd() 方法提供了一种方便简单的方式来补全字符串长度和格式化字符串，为开发者提供了更多可用的工具。在应用上述方法时，需要注意是否需要兼容 IE 浏览器。

  '