ES10 中新增的 String.prototype.padStart 方法和 padEnd 方法的使用

阅读时长 5 分钟读完

在 ES10 中,新增了两个字符串方法:String.prototype.padStart()String.prototype.padEnd()。这两个方法可以让我们更方便地对字符串进行填充操作,例如在前端开发中对数字进行格式化,或对字符串进行对齐等操作。

String.prototype.padStart()

String.prototype.padStart() 方法会在一个字符串的开头添加指定数量的字符,以达到给定的总长度。这个方法的语法比较简单:

其中 targetLength 参数表示目标长度,即最终字符串的长度,而 padString 参数则表示要填充的字符串,默认为使用空格填充。

下面是一个例子,将一个数字字符串填充至长度为 8,不足的部分使用 0 填充:

这个例子中,我们将 number 字符串填充至长度为 8,因为原字符串的长度不足 8,所以使用 padStart() 方法进行填充,并将不足的部分使用 0 填充。

String.prototype.padEnd()

String.prototype.padEnd() 方法跟 String.prototype.padStart() 类似,不同之处在于它在一个字符串的结尾添加指定数量的字符。这个方法的语法如下:

其中的 targetLengthpadString 参数与 padStart() 方法是相同的。下面是一个例子,将一个字符串填充至长度为 10,不足的部分使用 - 填充:

这个例子中,我们将 text 字符串填充至长度为 10,不足的部分使用 - 填充,因为原字符串的长度不足 10。

深入理解 padStart() 和 padEnd()

虽然 String.prototype.padStart()String.prototype.padEnd() 很容易使用,但是我们还需要深入理解它们的原理。这可以帮助我们更好地使用这两个方法,并更好地理解相关的 JavaScript 概念。

1. 只能填充字符串类型

padStart()padEnd() 方法只能对字符串进行填充,如果传入的参数不是字符串类型,则会被自动转为字符串类型的对象。

这意味着如果我们直接传入一个数字,就必须将其转为字符串类型:

2. 填充的长度不能小于原字符串的长度

无论是 padStart() 还是 padEnd(),都不能将原字符串的长度变得更短,也就是说,填充的长度不能小于原字符串的长度。如果你传入一个比原字符串长度更小的目标长度,则不会进行填充操作,直接返回原字符串。

3. 不足部分默认填充空格

如果你不传入 padString 参数,则默认会使用空格进行填充操作。

4. 使用 padStart() 和 padEnd() 进行字符串对齐

padStart()padEnd() 方法可以帮助我们对字符串进行对齐操作,例如将多个字符串对齐在一起。

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

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

在这个例子中,我们首先获取所有字符串中最大的长度 maxLength,然后使用 padEnd() 方法将所有字符串都填充至相同长度,最后将它们拼接在一起。这样就能够对齐显示了。

总结

String.prototype.padStart()String.prototype.padEnd() 方法是 JavaScript 里新增的两个字符串方法,它们可以帮助我们对字符串进行填充操作,从而实现更多的字符串操作。使用这两个方法时需要注意传入的参数类型以及填充长度等条件,以免出现错误。对于前端开发来说,这两个方法可以帮助我们更方便地处理字符串,使代码更加简洁可读,提高了开发效率。

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

纠错
反馈