10進数と16進数間の整数変換
1. 10 進数を 16 進数に変換します
正規表現：
/^([0-9]||([1-9][0-9]{0,}))$/
分析: [0-9]1 桁を表し、([1-9][0-9]{0,})10 桁以上を表します
2、16 進数から 10 進数へ
正規表現：
/^((0[xX])?[0-9a-fA-F]+)$/
[0-9a-fA-F]+分析: 16 進数は、16 進数の書き込み方法に含めることが許可されている文字である0x または 0X (書き込み可能かどうか) によって識別できます。+この数字は、16 進数に少なくとも 1 文字が含まれていることを意味します
。ビットを制限する 最大 4 桁などの数値は、次のように記述できます。/^((0[xX])?[0-9a-fA-F]{1,4})$/
3. 連携デモ
要件:
1. ユーザーは 10 進数または 16 進数の
整数を入力します。 2. 入力プロセス中に、ユーザーは 10 進数を入力することを選択できます。
たとえば、
ユーザーは 16 進数として 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>
querySearchの判定条件に従い、16進数の20を入力したいのですが、20を10進数に変換してしまうと、(20,32)となります。
ユーザーの考えによれば、16 進数 20 ----- 対応する -----> 10 進数 14 の場合、結果の組み合わせは次のようになります: (20 と 14) 上記のあいまいさに対処する良い方法はありません
。私のプロジェクト 別の選択肢がある限り、10 進数と 16 進数のオプションが最初に来るか後ろに来るかという要件はありません。したがって、
ユーザーが 16 進数の 20 を入力したい場合は、元の数値 20 を選択し、もう 1 つのオプション 32 は 20 を 10 進数に変換した結果とみなされます。もちろん、設計者がより包括的な制約設計を行った方がよいでしょう
。
添付ファイル:塩基変換用オンラインツール