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

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

padStart() 方法

语法：

str.padStart(targetLength[, padString])

参数：

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

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

用法示例

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

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

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

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

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

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

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

padEnd() 方法

语法：

str.padEnd(targetLength[, padString])

参数：

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

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

用法示例

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

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

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

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

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

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

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

指导意义

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

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

结论

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

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67307ec8eedcc8a97c921227