padStart()方法,padEnd()方法

用法（官方）：

　　padStart() 方法用另一个字符串填充当前字符串（重复，如果需要的话），以便产生的字符串达到给定的长度。填充从当前字符串的开始（左侧）应用的。padEnd() 填充从当前字符串的末尾（右侧）应用的。

　　理解：ES2017引入了字符创补全长度的功能。如果某个字符串不够指定长度，会在头部或者尾部补全。padStart() 用于头部补全，padEnd() 用于尾部补全。

 

语法：

　　str.padStart(targetLength [, padString])

　　 str.padEnd(targetLength [, padString])

 

参数：

targetLength

　　当前字符串需要补全的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。

padString | 可选

　　补全字符串。如果字符串太长，使补全的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的缺省值为“” （U+0020）。

返回值：

　　padStart()方法在原字符串开头补全指定的补全字符串，直到目标长度所形成的新字符串。

　　padEnd()方法在原字符串末尾补全指定的补全字符串，直到目标长度所形成的新字符串。

 

适用场景：

　　1. 常见用途是为数值补全指定位数

　　2. 另一个用途是提示字符串格式

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

 

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

上面代码中，padStart()和padStart()一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

如果省略第二个参数，默认使用空格补全长度。

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

另一个用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

 

'x'.padEnd(4, 'ab') // 'xaba'