前端开发中,会遇到字符串填充的问题,padStart() 和 padEnd()

在这里插入图片描述
如图显示要求
原本是直接选择时间就没问题了,但是又改变了需求,就是选择时间后可以选择批次号,
有两种方法,可以做。先了解需要用到的js 语法

第一种 map 循环

定义一个方法名字,一会方便调用
const hourPici = new Array(24).fill(1).map((item,index)=>{
  return {
    value: (index+1).toString().padStart(2,'0'),
    label: (index+1).toString().padStart(2,'0')
  }
})

调用的地方:
  {
    title: '批次号',
    name: 'batchNO',
    span: 24,
    formOption: {
      type: '$radio', props: {
        options: hourPici
      }
    }
  },

解析上述方法

1 fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

可查看网址介绍 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

2 toString() 方法可把一个 Number 对象转换为一个字符串,并返回结果。
可查看 https://www.w3school.com.cn/jsref/jsref_tostring_number.asp 介绍
3 ES2017 引入了字符串补全长度的功能。
如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全

str.padStart(targetLength,string):使用指定字符串填充到目标字符串前面,使其达到目标长度;

str.padEnd(targetLength,string):使用指定字符串填充到目标字符串后面,使其达到目标长度;

可以看一下这个人的博客,写的padStart 和 padEnd介绍
https://blog.csdn.net/ixygj197875/article/details/79090578

第二种方法直接for循环
首先定义一个空数组
然后进行循环 push 尾部增加就可以了,注意
padStart( 2, “0”),使用指定字符串填充到目标字符串前面,使其达到目标长度;

let monList = [];
for (var i = 1; i < 13; i++) { // 如果到24 ,你就小于25 
    monList.push((i + "").padStart( 2, "0"))
}
引用方法
{
    title: '批次号',
    name: 'batchNO',
    span: 24,
    formOption: {
      type: '$radio', props: {
        options: monList 
      }
    }
  }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值