AI 助理
文档备案控制台
开发者社区 大数据 文章 正文

Vue3进制转换器实现方案

2026-01-26 162
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这是一个支持二、八、十、十六进制实时同步转换的在线工具。采用十进制中转策略，内置防死锁、数据清洗、正则校验与格式化显示（前缀/分组），并支持2–36进制自定义转换。代码简洁健壮，兼顾实用性与可维护性。

在线工具网址：https://see-tool.com/base-converter

工具截图：
工具截图

一、核心设计思路

1.1 十进制中转策略

所有进制转换都通过十进制作为中转站:

任意进制 → parseInt(value, base) → 十进制
十进制 → decimal.toString(base) → 目标进制

这样避免了 N×(N-1) 种转换函数的组合爆炸,复杂度从 O(n²) 降至 O(n)。

1.2 防死锁机制

四个输入框实时同步时,必须防止循环触发:

let isUpdating = false

const onSyncInput = (source) => {
   
  if (isUpdating) return  // 阻止递归调用
  isUpdating = true

  // ... 执行转换逻辑

  isUpdating = false
}

二、同步转换模式实现

2.1 核心转换函数

const onSyncInput = (source) => {
   
  if (isUpdating) return
  isUpdating = true

  try {
   
    let decimalNum = 0
    let cleanValue = ''

    // 第一步: 数据清洗 + 转十进制
    switch (source) {
   
      case 'binary':
        // 去除空格、下划线、0b前缀
        cleanValue = binaryValue.value.replace(/[\s_]/g, '').replace(/^0[bB]/, '')
        // 正则验证是否为合法二进制
        if (cleanValue && /^[01]+$/.test(cleanValue)) {
   
          decimalNum = parseInt(cleanValue, 2)
        } else {
   
          clearOthers('binary')  // 清空其他框
          isUpdating = false
          return
        }
        break

      case 'octal':
        cleanValue = octalValue.value.replace(/[\s_]/g, '').replace(/^0[oO]/, '')
        if (cleanValue && /^[0-7]+$/.test(cleanValue)) {
   
          decimalNum = parseInt(cleanValue, 8)
        } else {
   
          clearOthers('octal')
          isUpdating = false
          return
        }
        break

      case 'decimal':
        cleanValue = decimalValue.value.replace(/[\s_,]/g, '')
        if (cleanValue && /^\d+$/.test(cleanValue)) {
   
          decimalNum = parseInt(cleanValue, 10)
        } else {
   
          clearOthers('decimal')
          isUpdating = false
          return
        }
        break

      case 'hex':
        cleanValue = hexValue.value.replace(/[\s_]/g, '').replace(/^0[xX]/, '')
        if (cleanValue && /^[0-9A-Fa-f]+$/.test(cleanValue)) {
   
          decimalNum = parseInt(cleanValue, 16)
        } else {
   
          clearOthers('hex')
          isUpdating = false
          return
        }
        break
    }

    // 第二步: 广播更新其他进制(跳过源输入框)
    if (source !== 'binary') {
   
      binaryValue.value = formatValue(decimalNum.toString(2), 2)
    }
    if (source !== 'octal') {
   
      octalValue.value = formatValue(decimalNum.toString(8), 8)
    }
    if (source !== 'decimal') {
   
      decimalValue.value = decimalNum.toString()
    }
    if (source !== 'hex') {
   
      let hex = decimalNum.toString(16)
      if (uppercaseHex.value) hex = hex.toUpperCase()
      hexValue.value = formatValue(hex, 16)
    }
  } catch (err) {
   
    console.error('Conversion error:', err)
  }

  isUpdating = false
}

关键点:

  1. 数据清洗: 用正则去除空格、下划线、前缀等干扰字符
  2. 严格验证: 每种进制都有对应的正则验证规则
  3. 跳过源框: 避免回填源输入框导致光标跳动
  4. 异常处理: try-catch 防止非法输入崩溃

2.2 数据验证正则

/^[01]+$/          // 二进制: 只允许 0 和 1
/^[0-7]+$/         // 八进制: 只允许 0-7
/^\d+$/            // 十进制: 只允许数字
/^[0-9A-Fa-f]+$/   // 十六进制: 允许 0-9 和 A-F(大小写)

2.3 格式化显示函数

const formatValue = (value, base) => {
   
  let formatted = value

  // 1. 添加前缀(可选)
  let prefix = ''
  if (showPrefix.value) {
   
    switch (base) {
   
      case 2:  prefix = '0b'; break
      case 8:  prefix = '0o'; break
      case 16: prefix = '0x'; break
    }
  }

  // 2. 数字分组(提升可读性)
  if (digitGrouping.value && formatted.length > 4) {
   
    let groupSize = 4
    if (base === 2)  groupSize = 4  // 二进制: 1010 1100
    else if (base === 8)  groupSize = 3  // 八进制: 123 456
    else if (base === 10) groupSize = 3  // 十进制: 123 456
    else if (base === 16) groupSize = 4  // 十六进制: 1A2B 3C4D

    // 从右向左分组
    const groups = []
    for (let i = formatted.length; i > 0; i -= groupSize) {
   
      groups.unshift(formatted.substring(Math.max(0, i - groupSize), i))
    }
    formatted = groups.join(' ')
  }

  return prefix + formatted
}

分组规则:

  • 二进制/十六进制: 每 4 位一组
  • 八进制/十进制: 每 3 位一组

2.4 辅助函数

// 清除其他输入框
const clearOthers = (except) => {
   
  if (except !== 'binary') binaryValue.value = ''
  if (except !== 'octal') octalValue.value = ''
  if (except !== 'decimal') decimalValue.value = ''
  if (except !== 'hex') hexValue.value = ''
}

// 清除全部
const clearAll = () => {
   
  binaryValue.value = ''
  octalValue.value = ''
  decimalValue.value = ''
  hexValue.value = ''
}

// 复制文本(去除格式化空格)
const copyText = async (text) => {
   
  if (!text) return

  try {
   
    // 去除空格、下划线、前缀,复制纯净数据
    const cleanText = text.replace(/[\s_]/g, '')
    await navigator.clipboard.writeText(cleanText)
    safeMessage.success(t('baseConverter.notifications.copySuccess'))
  } catch (err) {
   
    console.error('Failed to copy:', err)
    safeMessage.error(t('baseConverter.notifications.copyFailed'))
  }
}

三、自定义进制模式实现

3.1 核心转换函数

const convertCustom = () => {
   
  if (!customInput.value.trim()) {
   
    customOutput.value = ''
    return
  }

  try {
   
    // 利用原生 API 支持 2-36 进制
    const decimal = parseInt(customInput.value, customFromBase.value)
    if (isNaN(decimal)) {
   
      customOutput.value = t('common.invalidInput')
      return
    }
    customOutput.value = decimal.toString(customToBase.value).toUpperCase()
  } catch (err) {
   
    customOutput.value = t('common.conversionError')
  }
}

原生 API 优势:

  • parseInt(str, radix): 支持 2-36 进制解析
  • num.toString(radix): 支持 2-36 进制输出
  • 无需自己实现进制转换算法

3.2 进制交换函数

const swapBases = () => {
   
  // 交换源进制和目标进制
  const temp = customFromBase.value
  customFromBase.value = customToBase.value
  customToBase.value = temp

  // 将输出作为新的输入
  customInput.value = customOutput.value
  convertCustom()
}

四、响应式配置实现

4.1 大小写切换

watch(uppercaseHex, () => {
   
  if (hexValue.value) {
   
    hexValue.value = uppercaseHex.value 
      ? hexValue.value.toUpperCase() 
      : hexValue.value.toLowerCase()
  }
})

4.2 前缀/分组切换

// 监听前缀切换
watch(showPrefix, () => {
   
  if (decimalValue.value) {
   
    onSyncInput('decimal')  // 重新格式化所有输入框
  }
})

// 监听数字分组切换
watch(digitGrouping, () => {
   
  if (decimalValue.value) {
   
    onSyncInput('decimal')
  }
})

4.3 自定义进制变化

// 监听自定义进制变化,自动重新转换
watch([customFromBase, customToBase], () => {
   
  convertCustom()
})

五、状态管理

5.1 响应式状态定义

// Tab 切换
const activeTab = ref('sync')

// 同步转换模式的四个输入框
const binaryValue = ref('')
const octalValue = ref('')
const decimalValue = ref('')
const hexValue = ref('')

// 配置选项
const uppercaseHex = ref(false)    // 十六进制大写
const showPrefix = ref(false)      // 显示前缀 (0x, 0b)
const digitGrouping = ref(true)    // 数字分组

// 自定义进制模式
const customFromBase = ref(10)     // 源进制
const customToBase = ref(16)       // 目标进制
const customInput = ref('')        // 输入值
const customOutput = ref('')       // 输出值

// 防死锁标志位
let isUpdating = false

六、已知限制与改进方向

6.1 大数精度问题

当前使用 Number 类型,超过 Number.MAX_SAFE_INTEGER (2^53 - 1) 会丢失精度。

改进方案:

// 使用 BigInt 替代 Number
const decimalNum = BigInt(`0b${
     cleanValue}`)
const result = decimalNum.toString(16)

注意事项:

  • BigInt 不支持小数
  • BigInt 和 Number 不能直接运算
  • 需要特殊处理边界情况

6.2 性能优化

对于频繁输入场景,可添加防抖:

import {
    debounce } from 'lodash-es'

const onSyncInput = debounce((source) => {
   
  // ... 转换逻辑
}, 100)

七、核心流程总结

用户输入 → 数据清洗 → 正则验证 → parseInt(转十进制)
                                        ↓
                                   十进制中转
                                        ↓
    格式化显示 ← toString(转目标进制) ← 广播更新

核心原则:

  1. 十进制中转: 避免组合爆炸
  2. 防死锁机制: 阻止循环触发
  3. 数据清洗: 确保输入合法
  4. 格式化显示: 提升可读性
  5. 原生 API: 避免重复造轮子
文章标签：
数据采集
API
算法
18325730191
目录
相关文章
18325730191
|
2月前
|
JavaScript 算法 前端开发
Vue3文本差异对比器实现方案
本文介绍基于Vue 3实现的轻量级文本差异对比工具，核心采用原生JS实现LCS（最长公共子序列）算法，支持行/词/字符三级对比模式，并可忽略空格与大小写。Vue组件负责交互与渲染，Diff逻辑独立封装、动态加载，性能优化采用HTML字符串直出，兼顾效率与灵活性。
18325730191
129 6
Vue3文本差异对比器实现方案
18325730191
|
3月前
|
安全 算法 项目管理
日期计算器在线工具分享
这是一款基于Vue3开发的免费在线日期计算器，支持日期加减、天数差值、工作日计算及星期查询。界面简洁、操作便捷、结果精准，所有计算均在本地完成，保障隐私安全，无需注册即可跨设备使用。
18325730191
1026 4
日期计算器在线工具分享
18325730191
|
1月前
|
JavaScript 测试技术 索引
正则表达式测试 在线工具分享
分享一款实用的在线正则表达式测试工具，支持实时匹配高亮、分组详情查看、g/i/m标志切换、常用模板一键插入及正则替换功能，助你高效验证、提取与处理文本，是开发与学习正则的得力助手！
18325730191
392 10
18325730191
|
3月前
|
JavaScript 安全 前端开发
文本编码转换器在线工具分享
推荐一款基于Vue.js开发的在线文本编码转换器：支持12种格式互转（Base64、Unicode、UTF-8 Hex、HTML实体等），实时双向转换、自定义分隔符/前缀，纯前端运行，数据不上传，无广告，安全高效。
18325730191
376 8
文本编码转换器在线工具分享
18325730191
|
2月前
|
缓存 JavaScript 前端开发
Vue3二维码生成器实现方案
本文拆解 Vue3/Nuxt3 二维码生成器实战方案，采用「Vue 管结构与状态、独立 JS 负责 Canvas 绘制」的分层架构。通过 `data-*` 属性定义交互协议，实现类型切换、表单联动、实时预览及 PNG/SVG 导出，兼顾可维护性与跨项目复用性。
18325730191
179 10
Vue3二维码生成器实现方案
18325730191
|
3月前
|
存储
科学计算器在线工具分享
这款在线科学计算器支持键盘与鼠标双操作，具备AC、M+/M-/MR/MC存储功能，可切换角度/弧度制，一键生成随机数，界面简洁易用，无需安装即开即用。
18325730191
441 3
科学计算器在线工具分享
18325730191
|
3月前
|
程序员
进制转换器在线工具分享
这是一个在线进制转换工具，支持二、八、十、十六进制间任意互转。界面简洁，操作便捷，实时显示转换结果，附带原理说明与示例，适合程序员、学生及数字技术学习者快速使用。
18325730191
163 0
六卿
|
JavaScript 前端开发
js_Ipv4以及ipv4段正则校验
几种JavaScript正则表达式，用于校验IPv4地址的有效性，包括支持CIDR表示法的变体。
六卿
392 4
郏国上
|
网络协议 定位技术 数据安全/隐私保护
APP审核驳回和重大版本问题经典案例及解决方案
APP审核驳回和重大版本问题经典案例及解决方案
郏国上
726 1

热门文章

最新文章

  • 1
    阿里沈询：阿里技术架构演变，及基于EDAS的敏捷服务开发与架构实践
  • 2
    软件开发工作流【详解】（含公司产品研发流程图、大厂研发架构图、大厂研发流程图）
  • 3
    使用阿里云负载均衡时获取客户端真实IP的方法
  • 4
    SQL语句性能分析技巧与方法
  • 5
    Mybatis如何通过泛型来动态调整返回参数
  • 6
    免费试用Elasticsearch，轻松上手四步玩转Kibana！
  • 7
    检测输入数字中包含的重复数字
  • 8
    [译]更改自定义活动设计器上的图标
  • 9
    与众不同 windows phone (1) - Hello Windows Phone
  • 10
    opencv条码(3)图像的复制
  • 1
    基于 Tesseract.js 的OCR文字识别工具核心JS实现
    39
  • 2
    新手易懂！2026 OpenClaw Windows完整部署指南（细节拉满+报错详解）
    41
  • 3
    2026 OpenClaw Windows极速部署｜新手极简指南（无冗余）
    37
  • 4
    本地 AI 智能体 OpenClaw Windows 安装全流程
    43
  • 5
    OpenClaw 2026 Windows 一键部署与使用教程
    40
  • 6
    阿里百炼上线GLM-5.1，接入Trae畅享AI编程，如何接入和使用更划算？
    273
  • 7
    极简上手！2026 OpenClaw Windows一键部署（报错速解+官方包）
    31
  • 8
    2026 OpenClaw精简版｜Windows一键部署（双报错速解+官方包）
    30
  • 9
    新手必看！2026 OpenClaw最新版Windows部署教程（双报错速解+官方包）
    38

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    开通oss服务