实现 罗马数字转换 工具

分类：general ｜ 标签：罗马、数字、转换 罗马数字与阿拉伯数字互转

2.1 功能说明

罗马数字与阿拉伯数字互转

2.1.1 使用指南

功能说明

阿拉伯数字（1-3999）与罗马数字互相转换。

使用场景

章节编号、钟表、序号处理。

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> 中定义的主要函数/方法：

• toRoman()
• toArab()
• clear()

2.2.3 关键实现代码

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

import { ref } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const arab = ref('')
const roman = ref('')
const error = ref('')
const result = ref('')

const MAP = [[1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'], [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'], [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I']]

function toRoman() {
  error.value = result.value = ''
  const n = Number(arab.value.trim())
  if (!Number.isInteger(n) || n < 1 || n > 3999) { error.value = '请输入 1~3999 的整数'; return }
  let s = '', v = n
  for (const [val, sym] of MAP) { while (v >= val) { s += sym; v -= val } }
  roman.value = s
  result.value = n + ' = ' + s
}
function toArab() {
  error.value = result.value = ''
  const s = roman.value.trim().toUpperCase()
  if (!s) { error.value = '请输入罗马数字'; return }
  const VAL = { I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000 }
  let total = 0
  for (let i = 0; i < s.length; i++) {
    const cur = VAL[s[i]]
    if (cur === undefined) { error.value = '包含非法罗马字符：' + s[i]; return }
    const next = VAL[s[i + 1]] || 0
    total += cur < next ? -cur : cur
  }
  arab.value = String(total)
  result.value = s + ' = ' + total
}
function clear() { arab.value = roman.value = error.value = result.value = '' }

2.3 效果截图

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