在 ECMAScript 2017（ES8）中使用 String.padStart 和 String.padEnd 方法将字符串填充到指定长度-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对字符串进行格式化和对齐处理。在 ECMAScript 2017（ES8）中，新增了两个方法 String.padStart 和 String.padEnd，用于将字符串填充到指定长度。本文将详细讲解这两个方法的使用方法，以及其深度和学习以及指导意义。

方法介绍

String.padStart()

String.padStart() 方法用于在字符串的开头填充指定的字符，使字符串达到指定的长度。方法接收两个参数，第一个参数表示需要填充的总长度，第二个参数表示用于填充的字符，如果不传递第二个参数，则默认使用空格。

const str = '123';
console.log(str.padStart(5, '0')); // '00123'
console.log(str.padStart(5)); // '  123'

String.padEnd()

String.padEnd() 方法用于在字符串的末尾填充指定的字符，使字符串达到指定的长度。方法接收两个参数，第一个参数表示需要填充的总长度，第二个参数表示用于填充的字符，如果不传递第二个参数，则默认使用空格。

const str = '123';
console.log(str.padEnd(5, '0')); // '12300'
console.log(str.padEnd(5)); // '123  '

使用场景

数字位数对齐

在进行数字排版时，很常见的需求就是数字位数对齐，例如在某些情况下，我们需要以两位数的格式显示小时，分钟和秒钟。我们可以使用 String.padStart() 方法将数字转化为指定长度的字符串，然后使用 String.join() 方法将所有数字拼接起来。

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

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

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

字符串对齐

在某些情况下，我们需要将字符串对齐，例如在展示单元格内容时，需要将字符串对齐，使其对齐显示。我们可以使用 String.padEnd() 方法将字符串填充到指定长度，然后使用 String.slice() 方法截取指定长度的字符串。

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

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

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

总结

在 ECMAScript 2017（ES8）中，String.padStart 和 String.padEnd 方法为字符串格式化和对齐提供了非常方便的方法。我们可以利用这些方法将字符串格式化成任意指定的长度和格式，从而展示更加美观和专业的界面。

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