关于padStart和他的兄弟padEnd

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

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

神奇小方法

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

相关推荐
demi_meng15 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
千码君201615 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao200917 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔18 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼18 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder18 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔18 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔18 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀18 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP18 小时前
Ajax 详解
java·前端·ajax·javaweb