关于padStart和他的兄弟padEnd

乐观的用户2024-03-12 14:17

遇到一个需求，后端返回最多六位的数字，然后显示到页面上。显示大概要这种效果。这虽然也不是很难，最开始我是这样的

js 复制代码

//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，则默认使用空格填充。

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

ini 复制代码

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'。

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

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

ini 复制代码

//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]
}

神奇小方法

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