在 ES9(ECMAScript 2018)中,新增了 String.prototype.padStart()
和 String.prototype.padEnd()
两个方法。这两个方法主要是用来填充字符串的,可以让字符串达到指定的长度。本文将详细介绍这两个方法的使用方法以及示例代码。
String.prototype.padStart()
String.prototype.padStart()
方法用于在字符串的开头添加指定字符,以使字符串达到指定长度。具体的语法如下:
------------------------- -- ------------
其中,targetLength
是要达到的字符串长度,而 padString
是用来填充的字符串。如果不传入 padString
,则默认用空格填充。
下面是一个示例代码:
----- --- - -------- ------------------------------ -- - ------ ---------------------------- ------ -- ------------ ----------------------------- -- -------
在第一个示例中,str
的长度为 5,传入 10
后,就在字符串开头填充了 5 个空格,使其达到了 10 的长度。在第二个示例中,传入了 .
,所以在字符串开头填充了 5 个 .
。在第三个示例中,要达到的长度只有 2,但是 str
的长度已经大于 2 了,因此不进行填充。
需要注意的是,如果指定填充字符串的长度大于要达到的长度,那么会舍去超出要达到长度的部分。比如:
--------------------------- -------- -- -------
在这个示例中,虽然传入了 3 个字符用来填充,但只有一个字符生效了,因为字符串已经达到了 4 的长度。
String.prototype.padEnd()
String.prototype.padEnd()
方法与 String.prototype.padStart()
相似,不同的是这个方法是用来在字符串的结尾添加指定字符。具体的语法如下:
----------------------- -- ------------
其中,targetLength
和 padString
的含义与 String.prototype.padStart()
相同。下面是一个示例代码:
----- --- - -------- ---------------------------- -- ------ - -------------------------- ------ -- ------------ --------------------------- -- -------
这个示例和之前的示例类似,不再赘述。
应用场景
那么,这两个方法有什么实际的应用场景呢?主要有以下几种情况:
字符串对齐
如果我们需要把字符串对齐,可以使用 String.prototype.padStart()
和 String.prototype.padEnd()
方法。比如,我们要把以下字符串对齐:
----- ---- ---- -- -------- --- ----
可以这样做:
----- ---- - ------- ----- --- - ----- ----- ------- - ---- ------ ------------------ ------------------------ --------------------------- ------------------------
输出结果如下:
----- ---- -- --- -- ---- -- -- --- -- -------- --- ---- -- --- --
数字补位
在开发中,经常会遇到需要在数字前面补零的情况,比如时间格式化。可以使用 String.prototype.padStart()
方法来实现。比如,我们要把数字 5
转化成 005
,可以这样做:
--------------------------- ------ -- -----
实际开发中,我们还要根据要补的位数来进行补位。比如,如果要补成 4 位数,可以这样实现:
-------- -------- - - -- - ------ ----------------------- ----- - -------------------- -- ------ --------------------- -- ------ ---------------------- -- ------
这个函数可以让我们快速实现数字的补位操作。
生成 UUID
UUID (Universally Unique Identifier) 是一种唯一标识符,是在一定的时间和空间范围内,由一台计算机生成的数字。我们可以使用 String.prototype.padStart()
方法来生成 UUID。代码示例如下:
-------- -------------- - ----- -- - -- -- ------------- - -------------- - ----------------------------------- ------ ------------------------------------------------------------------------------------------- - ----------------------------
生成的 UUID 会如下所示:
--------------------------------------
总结
String.prototype.padStart()
和 String.prototype.padEnd()
两个方法可以让我们快速实现字符串的填充操作,应用场景广泛。在实际开发中,我们还可以使用它们来实现字符串对齐、数字补位和生成 UUID 等功能。因此,掌握这两个方法对于前端开发工程师来说是非常必要的。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6482ccd848841e9894228699