ES10 中的 String.padStart() 和 String.padEnd() 方法使用技巧-JavaScript中文网-JavaScript教程资源分享门户

在 ES10 中，新增了 String 的两个方法，即 padStart() 和 padEnd() 方法。这两个方法可以用来填充字符串，以满足某些特定的需求。本文将详细介绍这两个方法的使用技巧，帮助读者更好的理解并掌握这两个方法的使用。

padStart() 和 padEnd() 方法简介

padStart() 和 padEnd() 方法可以用来填充字符串，以满足特定的需求。它们的基本语法如下：

string.padStart(targetLength [, padString])

string.padEnd(targetLength [, padString])

其中，targetLength 为填充后字符串的长度，padString 为用来填充的字符串。如果省略 padString 参数，则默认使用空格字符填充。

这两个方法非常的灵活，可以用来满足不同的需求。下面分别介绍它们的具体用法。

这是这两个方法最基本的用法。如果想将一个字符串填充到指定长度，可以使用这两个方法来完成。

const str = 'hello';
console.log(str.padStart(10, '-')); // -----hello
console.log(str.padEnd(10, '-'));   // hello-----

上面的代码使用 padStart() 和 padEnd() 方法将字符串 'hello' 分别填充到了长度为 10 的字符串。

在写代码时，有时需要将一段字符串按照某种格式输出。这时可以使用这两个方法对字符串进行填充和格式化。

const obj = { x: 1, y: 2 };
const str = `(${obj.x.toString().padStart(2, '0')}, ${obj.y.toString().padEnd(2, '0')})`;
console.log(str); // (01, 02)

上面的代码将对象 obj 的 x 和 y 属性的值组成一个字符串，并将数字格式化为两位数。使用 padStart() 和 padEnd() 方法对数字进行填充，以保证输出的字符串格式正确。

需要打印进度条时，可以使用 padStart() 方法将进度条的长度填充满。

for (let i = 1; i <= 10; i++) {
  const progress = '#'.repeat(i).padEnd(10, '-');
  console.log(progress);
}

上面的代码使用 padEnd() 方法将进度条填充到长度为 10 的字符串，然后将每次循环得到的进度条打印出来。这样就可以实现打印进度条的效果。

本文介绍了 ES10 中新增的 padStart() 和 padEnd() 方法的使用技巧。这两个方法非常的灵活，可以用来满足不同的需求，如填充字符串、格式化输出字符串和打印进度条等。通过掌握这两个方法的用法，我们可以更加方便、快捷地实现代码中的各种需求。

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