padStart()和padEnd()方法的使用

用法(官方):

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

 

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

 

语法:

  str.padStart(targetLength [, padString])

   str.padEnd(targetLength [, padString])

 

参数:

targetLength

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

padString | 可选

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

 

返回值:

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

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

 

适用场景:

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

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

 

示例: 

‘wen’.padStart(8, '12')  //  '12121Wen'  指定8位字符长度,不够用来12补全
'wen'.padStart(5, '12')  //  '12Wen'
'wen'.padEnd(8, '12')  //  'wen12121'
'wen'.padEnd(5, '12')  //  'wen12'
'wen'.padStart(10, '1234567890') //  '1234567wen'  多余的字符串会被截掉
// 如果省略第二个参数,用空格补全长度
 ‘wen’.padStart(5) //  '  wen' 
// 如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。
'wen'.padStart(2, 'ab') // 'wen'
'wen'.padEnd(2, 'ab') // 'wen'

 

 

第二个参数的其他写法:

// null将作为一个字符串来使用
'wen'.padStart(8, null)  // 'nullnwen'
// []将会原样输出
'wen'.padStart(8, [])  // 'wen'
'wen'.padStart(18, {})  // '[object object]wen'
'wen'.padStart(8, false) // 'falsewen'

  

 

  

posted @ 2019-12-26 13:24  文文iou  阅读(1105)  评论(0编辑  收藏  举报