青岛知名网站建设公司排名北京网站优化专家
十进制与十六进制的整数转化
- 一、十进制转十六进制
- 二、十六进制转十进制
- 三、联动demo
一、十进制转十六进制
正则表达式:
/^([0-9]||([1-9][0-9]{0,}))$/
解析:[0-9]
代表个位数,([1-9][0-9]{0,})
代表十位及以上
二、十六进制转十进制
正则表达式:
/^((0[xX])?[0-9a-fA-F]+)$/
解析:十六进制数可用0x或0X标识(可写可不写),[0-9a-fA-F]+
是十六进制数写法允许包含的字符,+
号指这个十六进制数至少有1个字符,
如果你需要限制位数,比如最多4位,可这样写:/^((0[xX])?[0-9a-fA-F]{1,4})$/
三、联动demo
要求:
1、用户输入十进制或十六进制整数
2、且用户在输入过程中可供用户选择输入进制
举例:
用户输入0xAF0为十六进制,自动为用户提示已输入项(0xAF0)与辅助转化项(2800),反之亦然
html:
<template><div><el-form :model="numForm" :rules="numRule"><el-form-item label="值:" prop="num"><!--fetch-suggestions作用:返回输入建议,我这里用的只要聚焦输入框就激活下拉,每输一个字符都会调用该方法--><el-autocomplete v-model="numForm.num" :fetch-suggestions="querySearch" placeholder="dec or hex"></el-autocomplete></el-form-item></el-form></div>
</template>
js:
<script>
export default {data(){const hexOrDec = /^(((0[xX])?[0-9a-fA-F]+)||([0-9]||[1-9][0-9]{0,}))$/;const hexOrDecCheck = (rule,value,callback) => {if((value!==null)&&(!(value).toString())){callback(new Error("必填项不能为空"))}else{hexOrDec.test(value)?callback():callback(new Error("请输入十进制或十六进制数"))}}return {decReg:/^([0-9]||[1-9][0-9]{0,})$/,//十进制整数校验hexReg:/^((0[xX])?[0-9a-fA-F]+)$/,//十六进制整数校验numForm:{num:''},numRule:{num:{validator:hexOrDecCheck},arr:[]}}},methods:{querySearch(str,cb){if(this.decReg.test(str)){//如果是整数,辅助转化十六进制,注意必须是number.toString(16)!!!//例:console.log(32.toString(16)) 输出20,转化正确// console.log("32".toString(16)) 输出32 转化无效this.arr = [{value:str},{value:parseInt(str).toString(16)}]}else if(this.hexReg.test(str)){//如果是16进制数,直接用parseInt(str,16)转//转完后需toString(),不然组件会报错//el-autocomplete要求绑定数组里元素必须有value属性,且值必须为string类型(官方文档有写),this.arr = [{value:parseInt(str,16).toString()},{value:str}]}else{this.arr = [];}cb(this.arr)}}
}
</script>
一开始只想到以0x开头来判断十六进制,其实整数也可以看成是十六进制的数,这样就无法判断用户输入的哪个进制:比如将20看成十六进制,十进制转化后为32。
用户想输入十六进制数20,按照querySearch内判断条件,却是将20作为十进制转化的,出来组合是:(20,32)。
如果按照用户的想法,十六进制数20-----对应----->十进制数14,出来的组合是:(20与14)
对于以上歧义暂没有好的处理方法,我项目中也没有要求十进制和十六进制选项谁前谁后,只要有另一个备选就行。所以:
如果用户想输十六进制20,就选原数20,另一个备选项32当作将20看成十进制转化的结果
当然,如果设计人员有更全面的约束设计会更好
附:进制转化在线工具