JS进制转换输入合法字母字符返回NaN问题修复方案

• 核心bug出在输入值读取环节：calculate函数里用parseFloat()处理输入框内容，这个API只能解析纯数字构成的字符串，遇到十二进制、十六进制里合法的字母字符（比如a对应数值10）时会直接返回NaN，后续转换函数接收到无效值，自然输出NaN。
• 代码还存在3个隐藏问题：
  • 十进制转八进制的配置项写错，现有逻辑v => v.toString(2)是转二进制，不是转八进制
  • 空值/零值判断顺序错误：现有逻辑先执行转换给结果框赋值，再判断是否显示0.00，输入为空时会先渲染NaN再替换，存在闪屏
  • 转换配置不全，目前只支持二进制、八进制、十进制、十二进制作为输入源，选中十六进制等其他进制时会直接抛找不到函数的错误；另外原代码漏了inputPlace元素的DOM获取，运行时会直接报引用错误。

1. 去掉输入值的parseFloat预处理，直接读取输入框原始字符串传给转换函数即可：parseInt本身就支持识别对应进制下的合法字母字符，自动兼容大小写输入。
2. 不要手动写每个进制的转换映射，通过进制基数表自动生成全量转换配置，避免手动写错规则，后续加新进制也只需要在基数表里加一行配置。所有转换统一走「输入字符串 -> 按源进制parseInt转十进制数 -> 按目标进制toString输出」的逻辑，保证类型一致。
3. 调整calculate函数执行顺序，先判断空值直接返回默认结果，再执行转换，同时增加非法输入兜底，避免出现NaN或者脚本报错。

修复后的可运行核心代码：

/* Calculation Board */
// 进制基数映射表，新增进制只需要在这里加配置即可
const radixMap = {
    binary: 2,
    octal: 8,
    decimal: 10,
    duodecimal: 12,
    hexadecimal: 16,
    vigesimal: 20,
    tetravigesimal: 24,
    duotrigesimal: 32,
    hexatrigesimal: 36
}

// 自动生成所有进制互转的配置
const config = {}
Object.keys(radixMap).forEach(fromRadix => {
    config[fromRadix] = {}
    Object.keys(radixMap).forEach(toRadix => {
        config[fromRadix][toRadix] = v => {
            if (fromRadix === toRadix) return v
            const num = parseInt(v.toString().toLowerCase(), radixMap[fromRadix])
            return num.toString(radixMap[toRadix])
        }
    })
})

/* Calculate sum */
// 补全原代码缺失的DOM获取
const listFrom = document.getElementById("listFrom");
const listTo = document.getElementById("listTo");
const inputPlace = document.getElementById("inputPlace");
const resultPlace = document.getElementById("resultPlace");

// 直接复用calculate函数，不用写重复的匿名函数
inputPlace.addEventListener("keyup", calculate);
listFrom.addEventListener("change", calculate);
listTo.addEventListener("change", calculate);

function calculate() {
    const inputVal = inputPlace.value.trim();
    // 空值/0值提前判断，避免无效计算
    if (inputVal === "" || inputVal === "0") {
        resultPlace.innerHTML = "0.00";
        return;
    }

    const fromType = listFrom.value;
    const toType = listTo.value;
    
    const convertFn = config[fromType][toType];
    const result = convertFn(inputVal);
    // 非法输入兜底
    resultPlace.innerHTML = isNaN(result) ? "请输入当前进制下的合法字符" : result;
};

内容的提问来源于stack exchange，提问作者Gibon