关于padStart和他的兄弟padEnd

遇到一个需求，后端返回最多六位的数字，然后显示到页面上。显示大概要这种效果。

这虽然也不是很难，最开始我是这样的

//html

<div class="itemStyle" v-if="item in numList">{{item}}</div>
//script
let numList;
const setNumberBlock = ()=>{
const bit = 4
const num = '123'//后端返回的数据，这里写死了。
const zorestr = '0'.repeat(bit-num.length)//repeat方法可以重复生成字符串

      numList = (zorestr +num).split('')
//然后遍历numList
//大概就这么个意思

}

但是今天我发现了一个方法，他的名字叫padStart,他还有个兄弟叫padEnd;

padStart() 和 padEnd() 是 JavaScript 字符串方法，用于在字符串的开始位置（padStart()）或结束位置（padEnd()）填充指定的字符，直到字符串达到指定的长度。

这两个方法的语法相似，都接受两个参数：

• 
  
• targetLength：表示字符串的目标长度，如果字符串的长度小于目标长度，则会在开始或结束位置填充指定的字符，直到字符串的长度达到目标长度。
  
• padString：表示用于填充字符串的字符，它是一个可选参数。如果未提供 padString，则默认使用空格填充。
  

以下是两个方法的使用示例：

const str = '123';


const paddedStart = str.padStart(5, '0');

console.log(paddedStart); // 输出：00123


const paddedEnd = str.padEnd(5, '0');

console.log(paddedEnd); // 输出：12300

在这个示例中，padStart() 方法将在字符串的开始位置填充 0，直到字符串的长度达到 5，所以结果是 '00123'。而 padEnd() 方法将在字符串的结束位置填充 0，所以结果是 '12300'。

这两个方法通常用于格式化数字，确保数字在特定长度内，并且可以按照需要在前面或后面填充零或其他字符。

然后这个需求就可以简化为这样

//html

<div class="itemStyle" v-if="item in numList">{{item}}</div>

//script

let numList;

const setNumberBlock = ()=>{

      const num = '123'//后端返回的数据，这里写死了,需要时字符串哦。
numList = num.padStart(4,'0').split('')

      //输出[0,1,2,3]

}

神奇小方法

有什么不对和更好的方法可以留言哦