js将数字转十进制+十六进制（联动el-ui下拉选择框）

一、十进制转十六进制

正则表达式：

/^([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看成十进制转化的结果

当然，如果设计人员有更全面的约束设计会更好

附：进制转化在线工具