JavaScript 十进制与二进制互转代码实例

Dylan

发布时间：2026-10-15 | 2人浏览过

原创

在 Web 开发中处理底层数据时，经常需要进行不同数制之间的换算。本文将通过一个具体的 HTML/JS 交互示例，演示如何编写脚本以完成十进制数值到二进制字符串的转换，以及反向操作。

基础原理

JavaScript 原生提供的核心转换逻辑依赖于 parseInt() 和 toString() 方法。其基本规则为：

十进制转二进制：使用数字对象的 .toString(2) 方法。
二进制转十进制：使用 parseInt(string, 2) 解析基数为 2 的字符串。

代码操作步骤

第1步：搭建输入界面 (HTML)

首先需要构建一个简单的用户界面，包含两个文本输入框（分别用于显示十进制和二进制结果）以及两个触发转换的按钮。我们将 ID 定义为 decimal 和 binary。

<!-- 十进制输入区域 -->
Decimal: <br />
<input type="text" id="decimal" /><br />
<input type="button" value="to Binary" onclick="return toBinary();" /><br />

<!-- 二进制输入区域 -->
Binary: <br />
<input type="text" id="binary" /><br />
<input type="button" value="to Decimal" onclick="return toDecimal();" />

第2步：获取 DOM 引用

在加载脚本时，先通过 document.getElementById() 获取页面上的输入控件引用，赋值给变量 d 和 b。

var d = document.getElementById('decimal');
var b = document.getElementById('binary');

第3步：编写转换函数 (toBinary)

点击“to Binary”按钮时执行此函数。步骤如下：

获取输入值并转为数值类型。
检查输入是否合法（非空且为数字）。
利用 .toString(2) 将其转化为二进制字符串输出。

function toBinary() {
    var num = d.value;
    // 校验输入是否为有效数字
    if (isNaN(num) || !num) {
        d.value = "";
        return false;
    }
    // 核心转换逻辑
    b.value = (parseInt(num)).toString(2);
}

第4步：编写反向转换函数 (toDecimal)

点击“to Decimal”按钮时执行此函数。步骤如下：

获取二进制输入框的值。
校验输入合法性。
使用 parseInt(inputString, 2) 将二进制字符转换为对应的十进制整数。

function toDecimal() {
    var num = b.value;
    // 校验输入是否为有效二进制串
    if (isNaN(num) || !num) {
        b.value = "";
        return false;
    }
    // 核心转换逻辑
    d.value = parseInt(num, 2);
}

完整结构整合

将上述片段按顺序放入标准的 HTML 文件中即可直接运行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
  >
<title>10进制-->2进制</title>
</head>
<body>

<!-- (此处省略上文的 HTML 和 JS 代码) -->

</body>
</html>

以上就是 JavaScript 十进制与二进制互转代码实例的详细内容，更多关于 JavaScript 进制转换的资料请关注本站其它相关文章！