在 ES10 中,新增了两个字符串方法:String.prototype.padStart()
和 String.prototype.padEnd()
。这两个方法可以让我们更方便地对字符串进行填充操作,例如在前端开发中对数字进行格式化,或对字符串进行对齐等操作。
String.prototype.padStart()
String.prototype.padStart()
方法会在一个字符串的开头添加指定数量的字符,以达到给定的总长度。这个方法的语法比较简单:
str.padStart(targetLength [, padString])
其中 targetLength
参数表示目标长度,即最终字符串的长度,而 padString
参数则表示要填充的字符串,默认为使用空格填充。
下面是一个例子,将一个数字字符串填充至长度为 8,不足的部分使用 0 填充:
const number = '123'; const paddedNumber = number.padStart(8, '0'); console.log(paddedNumber); // '00000123'
这个例子中,我们将 number
字符串填充至长度为 8,因为原字符串的长度不足 8,所以使用 padStart()
方法进行填充,并将不足的部分使用 0 填充。
String.prototype.padEnd()
String.prototype.padEnd()
方法跟 String.prototype.padStart()
类似,不同之处在于它在一个字符串的结尾添加指定数量的字符。这个方法的语法如下:
str.padEnd(targetLength [, padString])
其中的 targetLength
和 padString
参数与 padStart()
方法是相同的。下面是一个例子,将一个字符串填充至长度为 10,不足的部分使用 -
填充:
const text = 'Hello'; const paddedText = text.padEnd(10, '-'); console.log(paddedText); // 'Hello-----'
这个例子中,我们将 text
字符串填充至长度为 10,不足的部分使用 -
填充,因为原字符串的长度不足 10。
深入理解 padStart() 和 padEnd()
虽然 String.prototype.padStart()
和 String.prototype.padEnd()
很容易使用,但是我们还需要深入理解它们的原理。这可以帮助我们更好地使用这两个方法,并更好地理解相关的 JavaScript 概念。
1. 只能填充字符串类型
padStart()
和 padEnd()
方法只能对字符串进行填充,如果传入的参数不是字符串类型,则会被自动转为字符串类型的对象。
这意味着如果我们直接传入一个数字,就必须将其转为字符串类型:
const number = 123; // 错误的写法,数字类型不能直接填充 const paddedNumber = number.padStart(8, '0'); // TypeError: number.padStart is not a function // 正确的写法,先将数字转为字符串 const paddedNumber = number.toString().padStart(8, '0'); console.log(paddedNumber); // '00000123'
2. 填充的长度不能小于原字符串的长度
无论是 padStart()
还是 padEnd()
,都不能将原字符串的长度变得更短,也就是说,填充的长度不能小于原字符串的长度。如果你传入一个比原字符串长度更小的目标长度,则不会进行填充操作,直接返回原字符串。
const text = 'Hello'; // 填充长度小于原字符串长度,不会进行填充操作 const paddedText = text.padEnd(3, '-'); console.log(paddedText); // 'Hello'
3. 不足部分默认填充空格
如果你不传入 padString
参数,则默认会使用空格进行填充操作。
const text = 'Hello'; // 不传入 padString,使用空格进行填充 const paddedText = text.padEnd(10); console.log(paddedText); // 'Hello '
4. 使用 padStart() 和 padEnd() 进行字符串对齐
padStart()
和 padEnd()
方法可以帮助我们对字符串进行对齐操作,例如将多个字符串对齐在一起。
-- -------------------- ---- ------- ----- ---- - --------- --------- --------- -------- ----- --------- - ------------------------- -- -------------- ----- ----------- - ------------- -- ---------------------- - ---- ------------------------------------ -- ----- -- ------ -- ------ -- ----
在这个例子中,我们首先获取所有字符串中最大的长度 maxLength
,然后使用 padEnd()
方法将所有字符串都填充至相同长度,最后将它们拼接在一起。这样就能够对齐显示了。
总结
String.prototype.padStart()
和 String.prototype.padEnd()
方法是 JavaScript 里新增的两个字符串方法,它们可以帮助我们对字符串进行填充操作,从而实现更多的字符串操作。使用这两个方法时需要注意传入的参数类型以及填充长度等条件,以免出现错误。对于前端开发来说,这两个方法可以帮助我们更方便地处理字符串,使代码更加简洁可读,提高了开发效率。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64debbd8f6b2d6eab39dc4b9