交互式数学分解：用纯 JavaScript 构建客户端二进制/十进制转换器

IT加油站2026-08-29 08:31206分钟

原文：https://dev.to/hoangvibecode/building-a-client-side-binary-to-decimal-converter-with-interactive-mathematical-breakdown-5g6e（作者 @hoangvibecode）

在计算机科学、底层网络和固件开发中，二进制（基数-2）与十进制（基数-10）之间的转换是一项常见任务。无论你是在检查子网掩码、分析硬件寄存器标志，还是调试位运算，理解转换步骤都非常有用。

虽然网上有许多进制转换工具，但其中许多依赖服务器处理或页面刷新。当你需要审计专有代码字符串或网络配置时，你更希望工具能完全在本地设备上运行。

为了解决这个问题，我利用 AI 辅助开发，构建了一个响应式的、完全在客户端运行的二进制转十进制转换器，它能为每次计算展示交互式的、逐步推导的数学过程。

本文将详细介绍底层的进制转换数学原理，并展示一个简洁的、原生 JavaScript 的实现方案，你可以轻松地将其整合到自己的工具箱中。

数制转换的数学原理

在深入代码之前，我们先来看看控制二进制与十进制之间双向转换的基本数学公式。

1. 二进制转十进制（基数-2 到基数-10）

二进制是一种位置记数法，每个数字（位）对应一个 2 的幂次，从最右边的索引 0 开始。

计算十进制值的数学公式为：

{% katex %} \text{十进制值} = (d_n \times 2^n) + (d_{n-1} \times 2^{n-1}) + \dots + (d_1 \times 2^1) + (d_0 \times 2^0) {% endkatex %}

其中 {% katex inline %} d {% endkatex %} 表示位的值（0 或 1），{% katex inline %} n {% endkatex %} 是索引位置（从右向左计数，从 0 开始）。

例如，将二进制数 10110 转换为十进制：

* {% katex inline %} (1 \times 2^4) = 16 {% endkatex %}

* {% katex inline %} (0 \times 2^3) = 0 {% endkatex %}

* {% katex inline %} (1 \times 2^2) = 4 {% endkatex %}

* {% katex inline %} (1 \times 2^1) = 2 {% endkatex %}

* {% katex inline %} (0 \times 2^0) = 0 {% endkatex %}

求和：* {% katex inline %} 16 + 0 + 4 + 2 + 0 = 22 {% endkatex %}

2. 十进制转二进制（基数-10 到基数-2）

要进行反向转换，我们使用连续除以 2 并记录余数的方法：

将十进制整数除以 2。
记录余数（0 或 1）。
使用整数商进行下一步除法。
重复此过程，直到商为 0。
从下到上（反向）读取余数，即可得到最终的二进制表示。

标准 JavaScript 实现

下面是执行双向转换的简洁、模块化的 JavaScript 逻辑。它还能动态收集算术步骤，以便展示给用户：

/**
 * 将二进制字符串转换为十进制数，并显示详细步骤。
 * @param {string} binaryStr - 二进制数字（仅包含 0 和 1）
 * @returns {object|null} 包含十进制值和计算步骤的对象
 */
function binaryToDecimal(binaryStr) {
    // 验证输入是否只包含 0 和 1
    if (!/^[01]+$/.test(binaryStr)) return null;

    let sum = 0;
    const steps = [];

    for (let i = 0; i < binaryStr.length; i++) {
        // 从右到左读取位
        const bit = parseInt(binaryStr[binaryStr.length - 1 - i], 10);
        const weight = Math.pow(2, i);
        const term = bit * weight;
        sum += term;
        
        steps.push(`(${bit} × 2^${i}) = ${bit} × ${weight} = ${term}`);
    }

    return {
        decimalValue: sum,
        steps: steps // 从右到左的计算步骤数组
    };
}

/**
 * 将正十进制整数转换为二进制字符串，并显示详细步骤。
 * @param {number|string} decimalInput - 正十进制整数
 * @returns {object|null} 包含二进制字符串和除法步骤的对象
 */
function decimalToBinary(decimalInput) {
    let num = parseInt(decimalInput, 10);
    if (isNaN(num) || num < 0) return null;

    let tempNum = num;
    const steps = [];
    let binaryResult = '';

    if (tempNum === 0) {
        binaryResult = '0';
        steps.push('0 ÷ 2 = 0 余数 0');
    } else {
        while (tempNum > 0) {
            const remainder = tempNum % 2;
            const quotient = Math.floor(tempNum / 2);
            steps.push(`${tempNum} ÷ 2 = ${quotient} 余数 ${remainder}`);
            tempNum = quotient;
        }
        binaryResult = num.toString(2);
    }

    return {
        binaryValue: binaryResult,
        // 反转除法步骤，以从头到尾的顺序显示计算过程
        steps: steps.reverse()
    };
}