使用 ES7 的 String.prototype.padStart() 和 String.prototype.padEnd() 补全字符串长度

简介

在前端开发中，我们有时需要固定字符串长度，如果长度不足时需要在字符串前面或者后面添加字符使字符串长度达到要求。JavaScript ES7 中提供了两个新的字符串方法： padStart()和padEnd()，可以方便地实现这个功能。本文将介绍这两个方法的使用及其在实际开发中的应用。

String.prototype.padStart()

String.prototype.padStart()方法用于将字符串填充为固定长度，如果原字符串长度不足指定长度，会在字符串的前面添加一些字符。padStart()方法接受两个参数，第一个参数表示填充后的长度，第二个参数则表示填充字符，默认值是空格。

下面是padStart()方法的基本语法：

str.padStart(targetLength [, padString])

• targetLength：填充后的长度，必须为正整数。
• padString：填充字符，默认值为 " "。

接下来展示一个简单的代码示例：

const str = 'abc';
const str1 = str.padStart(6, '0');
console.log(str1); // '00abc'

上面的代码将str字符串填充为长度为6的字符串，并在前面加上0，输出结果为'00abc'。

String.prototype.padEnd()

String.prototype.padEnd()方法与padStart()方法类似，只不过它是在字符串的末尾添加字符，将字符串填充为固定长度。

下面是padEnd()方法的基本语法：

str.padEnd(targetLength [, padString])

与padStart()方法类似，padEnd()方法也接受两个参数：

• targetLength：填充后的长度，必须为正整数。
• padString：填充字符，默认值为 " "。

接下来展示一个简单的代码示例：

const str = 'abc';
const str1 = str.padEnd(6, '0');
console.log(str1); // 'abc000'

上面的代码将str字符串填充为长度为6的字符串，并在末尾加上0，输出结果为'abc000'。

在实际开发中的应用

字符串填充在实际开发中非常常见，比如在开发一个倒计时功能时，需要将时间的字符串表示补全为固定的长度。下面是一个简单的示例代码：

-- -------------------- ---- -------
-------- ---------------------------- -
    -- ------
    ----- ------- -------- -------- - -------------------
    ----- -------- - ----------------- -----
    ----- ---------- - ------------------- -----
    ----- ---------- - ------------------- -----
    
    ------ ------------------------------------------
-

------------------------------------------ -- ----------

上面的代码中，formatCountdownTime()函数接受一个时间字符串，例如'1:3:5'，然后使用padStart()方法将时间格式化为'01:03:05'的格式。这个方法可以在实际的倒计时功能中使用。

总结

String.prototype.padStart()和String.prototype.padEnd()是 ES7 中新增的两个字符串方法，可以方便地实现字符串填充。这两个方法在实际的开发中能够大大提高开发效率，在需要处理字符串长度的场景中非常实用。

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