实现进制转换器工具

分类：developer ｜标签：进制、二进制、十六进制、转换二进制/八进制/十进制/十六进制及任意 2-36 进制互转，支持大数

2.1 功能说明

二进制/八进制/十进制/十六进制及任意 2-36 进制互转，支持大数

核心能力

原进制
b + ' 进制'
目标进制

2.1.1 使用指南

进制转换器使用指南

支持范围

支持 2~36 进制互转，采用 BigInt 运算，不受 JavaScript 53 位精度限制，可处理超长整数（如哈希值、内存地址）。

使用说明

字母 a-z 表示数字 10-35，例如十六进制的 ff、三十二进制的 z。
输入数值必须在「原进制」合法字符范围内，否则会提示错误。
「交换进制」可快速让目标进制变为原进制，结果作为新输入。

典型场景

位运算调试、协议字段解析、内存/寄存器地址换算、颜色值（十六进制）与十进制互转。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

parseBigInt()
bigIntToBase()
process()
swapBase()
clearAll()
copy()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

vue

import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import ToolPageShell from '@/components/ToolPageShell.vue'

const bases = [2, 8, 10, 16, 32, 36]
const fromBase = ref(10)
const toBase = ref(16)
const input = ref('')
const output = ref('')
const error = ref('')

const decimalView = computed(() => {
  if (!input.value.trim() || error.value) return ''
  const n = parseBigInt(input.value, fromBase.value)
  return n === null ? '' : n.toString()
})

function parseBigInt(str, base) {
  str = String(str).trim().toLowerCase()
  if (!str) return null
  const neg = str.startsWith('-')
  if (neg) str = str.slice(1)
  const digits = '0123456789abcdefghijklmnopqrstuvwxyz'
  let result = 0n
  for (const ch of str) {
    const d = digits.indexOf(ch)
    if (d === -1 || d >= base) return null
    result = result * BigInt(base) + BigInt(d)
  }
  return neg ? -result : result
}

function bigIntToBase(num, base) {
  if (num === 0n) return '0'
  const digits = '0123456789abcdefghijklmnopqrstuvwxyz'
  let s = ''
  let n = num < 0n ? -num : num
  while (n > 0n) {
    s = digits[Number(n % BigInt(base))] + s
    n = n / BigInt(base)
  }
  return num < 0n ? '-' + s : s
}

function process() {
  error.value = ''
  output.value = ''
  const raw = input.value.trim()
  if (!raw) return
  const n = parseBigInt(raw, fromBase.value)
  if (n === null) {
    error.value = `输入包含「原进制(${fromBase.value})」不合法的字符`
    return
  }
  output.value = bigIntToBase(n, toBase.value)
}

function swapBase() {
  if (output.value && !error.value) input.value = output.value
  const t = fromBase.value
  fromBase.value = toBase.value
  toBase.value = t
  output.value = ''
  error.value = ''
  process()
}

function clearAll() {
  input.value = ''
  output.value = ''
  error.value = ''
}

async function copy(text) {
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('已复制')
  } catch {
    ElMessage.warning('复制失败，请手动复制')
  }
}

2.3 效果截图

暂未生成该工具的效果截图。

工具访问地址：https://www.i91tools.com/tools/radix-converter

实现 进制转换器 工具 ​

2.1 功能说明 ​

2.1.1 使用指南 ​