在 ES9 中，JavaScript 带来了一些非常有趣的新功能，其中之一是 string.padStart() 和 string.padEnd() 方法。这两个方法可以让字符串填充更加方便和有趣。在本文中，我们将深入了解这两个方法的用法和示例，并探讨它们的学习和指导意义。
string.padStart() 和 string.padEnd() 方法
在介绍这两个方法之前，让我们先了解一下它们的基本语法：
str.padStart(targetLength [, padString]) str.padEnd(targetLength [, padString])
targetLength：必需。表示最终字符串的长度，如果字符串长度小于targetLength，则会填充字符串。padString：可选。表示用于填充字符串的值，默认为一个空格。
string.padStart() 方法会在字符串的左侧填充指定数量的字符，而 string.padEnd() 方法则会在字符串的右侧填充指定数量的字符。
以下是 string.padStart() 和 string.padEnd() 的示例代码：
const str = 'Hello'; console.log(str.padStart(10)); // ' Hello' console.log(str.padEnd(10)); // 'Hello ' console.log(str.padStart(10, '-')); // '-----Hello' console.log(str.padEnd(10, '-')); // 'Hello-----'
在上面的示例中，我们使用 string.padStart() 方法将字符串 'Hello' 的左侧填充了 5 个空格，使其总长度为 10。类似地，我们使用 string.padEnd() 方法将字符串 'Hello' 的右侧填充了 5 个空格。
我们还可以使用第二个参数 padString 指定填充字符串的值。在上面的示例中，我们使用了 '-' 作为填充字符串的值。
更有趣的用法
除了上面的基本用法外，string.padStart() 和 string.padEnd() 还可以用于一些更有趣的场景。以下是一些示例：
1. 对齐数字
我们可以使用 string.padStart() 方法来对齐数字，例如：
const num1 = 10; const num2 = 100; const num3 = 1000; console.log(num1.toString().padStart(5, '0')); // '00010' console.log(num2.toString().padStart(5, '0')); // '00100' console.log(num3.toString().padStart(5, '0')); // '01000'
在上面的示例中，我们使用 num1.toString().padStart(5, '0') 将数字 10 转换为字符串，并在左侧填充了 3 个 0，使其总长度为 5。同样，我们使用 num2.toString().padStart(5, '0') 将数字 100 转换为字符串，并在左侧填充了 2 个 0，使其总长度为 5。
2. 字符串模板
我们可以使用 string.padEnd() 方法在字符串模板中添加一些额外的字符，例如：
-- -------------------- ---- ------- ----- ---- - ------- ----- --- - --- ----- ---------- - ------------ ----- ------- - - ----- ----------------- - --- ---- --------------------------- - --- ----------- ----------------------- - --- -- ---------------------展开代码
在上面的示例中，我们使用 string.padEnd() 方法在字符串模板中添加了一些额外的空格，以便对齐文本。这使得输出的文本更加美观和易于阅读。
学习和指导意义
string.padStart() 和 string.padEnd() 方法不仅可以让字符串填充更加方便和有趣，还可以在一些场景中提高代码的可读性和可维护性。例如，我们可以使用这些方法来对齐数字、格式化字符串模板等。
此外，这两个方法还可以让我们更好地理解字符串操作的本质。它们可以帮助我们更深入地了解字符串的内部结构和操作方式，从而提高我们的编程能力和思考能力。
综上所述，string.padStart() 和 string.padEnd() 方法是一个非常有用和有趣的功能，它们可以让我们更好地处理字符串操作，并提高我们的编程能力和思考能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cb866be46428fe9e472a91
