利用 ES8 中字符串填充（padStart() 和 padEnd()）快速格式化数据-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常需要对数据进行格式化，以便更好的呈现给用户。而字符串填充是一种快速格式化数据的方法，ES8 中新增的 padStart() 和 padEnd() 方法，更是为开发者提供了更加方便快捷的实现方式。

padStart() 和 padEnd() 方法介绍

padStart() 和 padEnd() 方法是 ES8 中新增的字符串方法，用于将字符串填充到指定长度。这两个方法都接受两个参数，第一个参数是指定字符串的长度，第二个参数是填充的字符串。

其中，padStart() 方法用于在字符串的前面填充字符串，而 padEnd() 方法则用于在字符串的后面填充字符串。

下面是 padStart() 和 padEnd() 方法的语法：

// padStart() 方法
str.padStart(targetLength [, padString])

// padEnd() 方法
str.padEnd(targetLength [, padString])

padStart() 和 padEnd() 方法的使用

下面是一个简单的示例，演示如何使用 padStart() 方法在字符串前面填充指定长度的空格：

const str = 'hello';
const paddedStr = str.padStart(10, ' ');

console.log(paddedStr); // 输出：'     hello'

在上述示例中，我们使用 padStart() 方法将字符串 str 填充到长度为 10，并在前面填充了 5 个空格，最终输出的字符串为 ' hello'。

类似的，我们也可以使用 padEnd() 方法在字符串后面填充指定长度的字符串：

const str = 'hello';
const paddedStr = str.padEnd(10, '-');

console.log(paddedStr); // 输出：'hello-----'

在上述示例中，我们使用 padEnd() 方法将字符串 str 填充到长度为 10，并在后面填充了 5 个连字符，最终输出的字符串为 'hello-----'。

padStart() 和 padEnd() 方法的应用场景

padStart() 和 padEnd() 方法可以用于很多场景，下面是一些常见的应用场景：

1. 数字格式化

在数字格式化中，我们经常需要将数字填充到指定长度，以便更好的呈现给用户。例如，我们可以将数字填充到长度为 5，如果不足 5 位则在前面填充 0：

const num = 123;
const paddedNum = num.toString().padStart(5, '0');

console.log(paddedNum); // 输出：'00123'

2. 对齐格式化

在对齐格式化中，我们经常需要将字符串对齐到指定长度，以便更好的呈现给用户。例如，我们可以将字符串对齐到长度为 10，如果不足 10 位则在后面填充空格：

const str = 'hello';
const paddedStr = str.padEnd(10, ' ');

console.log(paddedStr); // 输出：'hello     '

3. 日志输出

在日志输出中，我们经常需要将日志信息对齐到指定长度，以便更好的查看。例如，我们可以将日志信息对齐到长度为 20，如果不足 20 位则在后面填充空格：

const logMsg = 'error: something went wrong';
const paddedLogMsg = logMsg.padEnd(20, ' ');

console.log(paddedLogMsg); // 输出：'error: something went wrong     '

总结

padStart() 和 padEnd() 方法是 ES8 中新增的字符串方法，用于将字符串填充到指定长度。这两个方法可以用于很多场景，例如数字格式化、对齐格式化和日志输出等。在实际开发中，我们可以根据不同的需求，选择适合的方法进行使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65841a4bd2f5e1655dee21fd