字符串填充-padStart 、padEnd
一、基本语法
1.padStart()
padStart(targetLength, padString)
:用另一个字符串填充当前字符串(如果需要会重复填充),直到达到给定的长度。填充是从当前字符串的开头开始的。最后返回一个新的字符串。
targetLength
:当前 str 填充后的长度。如果该值小于或等于 str.length,则会直接返回当前 str。
padString
(可选):用于填充当前 str 的字符串。如果 padString 太长,无法适应 targetLength,则会从末尾被截断。默认值为 Unicode“空格”字符(U+0020)。
2.padEnd()
padEndt(targetLength, padString)
:用另一个字符串填充当前字符串(如果需要会重复填充),直到达到给定的长度。填充是从当前字符串的末尾开始的。最后返回一个新的字符串。
targetLength
:当前 str 填充后的长度。如果该值小于或等于 str.length,则会直接返回当前 str。
padString
(可选):用于填充当前 str 的字符串。如果 padString 太长,无法适应 targetLength,则会从末尾被截断。默认值为 Unicode“空格”字符(U+0020)。
二、具体使用
1.padStart
const str = '345'
console.log(str.padStart(2)); // '345'
console.log(str.padStart(4)); // ' 345'
console.log(str.padStart(4, '12')); // '1345'
console.log(str.padStart(5, '12')); // '12345'
console.log(str.padStart(8, '12')); // '12121345'
2.padEnd
const str = '345'
console.log(str.padEnd(2)); // '345'
console.log(str.padEnd(4)); // '345 '
console.log(str.padEnd(4, '67')); // '3456'
console.log(str.padEnd(5, '67')); // '34567'
console.log(str.padEnd(8, '67')); // '34567676'
三、使用场景
1.编号格式化
后端给我的商品编号长度并不是一致的,例如:1、11、111这种,产品要求统一格式化为:001、011、111。这时候就可以使用字符串填充来实现了。
const list = [
{
code: '1'},
{
code: '10'},
{
code: '11'},
{
code: '111'}
]
list.forEach(item => {
item.showCode = item.code.padStart(3, '0')
})
console.log(list);
/*
[
{'code': '1', 'showCode': '001'},
{'code': '10', 'showCode': '010'},
{'code': '11', 'showCode': '011'},
{'code': '111', 'showCode': '111'}
]
*/
2.日期格式化
获取当前日期的时候getMonth,和getDate都可能获取到的是一位数字,例如2023-8-17,但我们习惯上格式可能是2023-08-17,这时候也能使用字符串填充
const year = new Date().getFullYear()
const month = (new Date().getMonth() + 1).toString().padStart(2, '0')
const date = new Date().getDate().toString().padStart(2, '0')
console.log(`${
year}-${
month}-${
date}`);