前端开发中，会遇到字符串填充的问题，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 }}}

前端开发中，会遇到字符串填充的问题，padStart() 和 padEnd()相关推荐

前端开发中的Error以及异常捕获
本文首发于公众号:符合预期的CoyPan 写在前面在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...
初学者Web介绍一些前端开发中的基本概念用到的技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...
熟悉html css,编写HTML和CSS的前端开发中不一定熟悉JavaScript
原标题:编写HTML和CSS的前端开发中不一定熟悉JavaScript 作为前端开发人员,HTML.css.Java是必备的知识技能,但是现实工作工作中并非所有的前端都知道Java,根据外国一个网站的 ...
前端中什么是中台开发环境_Web前端开发中需要学习什么?会使用到哪些开发工具？...
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水.下面和千锋广州小编一起来看看吧! 前端工程师的主要职责: 前端工程师在不同的公司有不同的 ...
web前端开发中需要掌握的技术：
web前端开发中需要掌握的技术: 1.学习HTML,这是最简单,最基本的是要掌握div,formtable.Ulli.P.跨度.字体这些标签,这些都是最常用的,尤其是DIV和表格,DIV,表也可以用于 ...
前端开发中常用设计模式-总结篇
本文是向大家介绍前端开发中常用的设计模式,它使我们编写的代码更容易被复用,也更容易被人理解,并且保证代码的稳定可靠性. 1.什么是设计模式通俗来讲,就是日常使用设计的一种惯性思维. 因为对应的这种思 ...
前端开发中的MCRV模式
针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为基础,结合Web前端开发中内容-结构-表现-行为相分离的开发标准, ...
前端开发中遇到的问题及解决方法
前端开发中遇到的问题及解决方法 1,何为MVVM? view层: 视觉层:在前端开发中,通常是DOM层:主要作用是给用户展示各种信息: Model层: 数据层:数据可能是我们固定的死数据,更多的是来自 ...
android treeview 树形结构,前端开发中，使用TreeView控件创建树形结构
原标题:前端开发中,使用TreeView控件创建树形结构 Wijmo是一款使用Type编写的新一代Java/HTML5控件集.它秉承触控优先的设计理念,在全球率先支持AngularJS,并提供性能卓越 ...
前端开发中常用图片格式
前端开发中常用图片格式在我们的日常开发中.必不可少会使用很多种图片. 我们需要根据业务场景来选择所使用的图片类型. 这里我整理了一些常用图片类型.他们的优缺点以及建议的使用场景. 如何在计算机中显示 ...

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

前端开发中，会遇到字符串填充的问题，padStart() 和 padEnd()相关推荐

最新文章

热门文章