交互式图表_如何构建罗马数字转换器和交互式罗马数字图表

交互式图表

The Roman numerals are no longer an essential part of our daily lives. But we do use them when designing monuments, clocks, and even for sporting events.

罗马数字不再是我们日常生活中必不可少的部分。 但是我们在设计纪念碑，钟表甚至体育赛事时都会使用它们。

什么是罗马数字？ (What are the Roman Numerals?)

Roman numerals originated in ancient Rome and remained the common way of writing numbers throughout Europe for many centuries. Their use long outlived the Roman Empire itself. They were gradually replaced by the Hindu-Arabic system of numeration that we use today – the numbers zero through nine.

罗马数字起源于古罗马，并且在许多世纪以来一直是整个欧洲书写数字的常用方式。 他们的使用早已超出了罗马帝国本身。 它们逐渐被我们今天使用的印度－阿拉伯计数系统所取代-数字从零到九。

Roman numerals are represented by combinations of letters of the Latin alphabet, that serve as digits in this system. But unlike decimal base, with symbols 0 through 9, the the Roman system employs seven capitalized Latin letters I, V, X, L, C, D, M.

罗马数字由拉丁字母的组合表示，该拉丁字母在此系统中用作数字。 但是与十进制以0到9表示的十进制不同，罗马系统使用七个大写拉丁字母I，V，X，L，C，D，M 。

Originally, there was no single letter designation for zero. Instead, they used the Latin word Nulla, which means "none".

最初，没有单个字母指定为零。 相反，他们使用拉丁词Nulla ，意思是“无”。

罗马数字如何工作？ (How do Roman Numerals work?)

The Hindu-Arabic representation of these letters is as follows: I = 1, V = 5, X = 10, L = 50, C = 100, D = 500 and M = 1000.

这些字母的印度阿拉伯语表示如下： I = 1，V = 5，X = 10，L = 50，C = 100，D = 500和M = 1000 。

Other numbers are formed by combining these letters per certain rules: A symbol placed after another of equal or greater value, adds its value.

其他数由这些字母每一定的规则形成的组合：一个符号放置后另一个相等或更大的值时，增加了它的价值。

For example,   VI = V + I = 5 + 1 = 6 or LX = L + X = 50 + 10 = 60. The notations VI and LX are read as "one more than five" and "ten more than fifty".

例如， VI = V + I = 5 +1 = 6或LX = L + X = 50 + 10 = 60 。 VI和LX表示为“大于五个”和“大于十个十”。

A symbol placed before one of greater values subtracts its value. For example, IX = X - I = 10 - 1 = 9, and XC = C - X = 100 - 10 = 90.

位于较大值之一前面的符号减去其值。 例如， IX = X-I = 10-1 = 9，而XC = C-X = 100-10 = 90 。

The notations IX and XC are read as "one less than ten" and "ten less than a hundred."

标记IX和XC分别表示为“少于十个”和“少于十个十”。

Numbers greater than 1,000 are formed by placing a dash over the symbol. Thus V̅ = 5,000, X̅ = 10,000, L̅ = 50,000, C̅ = 100,000, D̅ = 500,000 and M̅ = 1,000,000.

大于1,000的数字是通过在符号上放置一个破折号而形成的。 因此， V + ＝ 5,000 ， X + ＝ 10,000 ， L + ＝ 50,000 ， C + ＝ 100,000 ， D + ＝ 500,000和M + ＝ 1,000,000 。

The so called "standard" form disallows using the same symbol more than three times in a row. But occasionally, exceptions can be seen. For example, IIII for number 4, VIIII for number 9, and LXXXX for 90.

所谓的“标准”格式不允许同一符号连续使用三遍以上。 但是偶尔也可以看到例外。 例如，IIII代表4，VIIII代表9，LXXXX代表90。

罗马数字及其组合的互动图表 (An Interactive Chart of Roman Numerals and Their Combinations)

Hover over each symbol to reveal its Hindu-Arabic equivalent:

将鼠标悬停在每个符号上，以显示其等效的印度－阿拉伯语：

I 我 II II III III IV IV V V VI VI VII VII VIII VIII IX IX

X X XX XX XXX XXX XL XL L L LX LX LXX LXX LXXX LXXX XC XC

C C CC CC CCC CCC CD CD D D DC DC DCC DCC DCCC DCCC CM CM

M V̅ X̅ L̅ C̅ D̅ M̅

中号 V̅X L C d 中号

I wrote the code for this interactive Roman numeral chart to embed here on freeCodeCamp News.

我为这个交互式罗马数字图表编写了代码，并将其嵌入在freeCodeCamp News上。

Given the fact that the HTML embed feature is not a full scale code editor, the given code is not structured and presented as separate HTML, CSS, and JavaScript files. Rather it is written as a single HTML file with <style> and <script> elements added for styling and functionality.

考虑到HTML嵌入功能不是完整的代码编辑器，因此给定的代码没有结构化并以单独HTML，CSS和JavaScript文件的形式呈现。 相反，它是作为单个HTML文件编写的，其中添加了<style>和<script>元素以用于样式和功能。

Here is the full code repository for my interactive Roman Numeral Chart.

这是我的交互式罗马数字图表的完整代码存储库 。

罗马数字转换器 (Roman Numeral Converter)

Enter a non negative integer between 0 and 5,000. Then click Convert to reveal a Roman numeral equivalent.

输入介于0到5,000之间的非负整数。 然后单击转换以显示等效的罗马数字。

Arabic to Roman

---

Convert

阿拉伯到罗马

---

兑换

There is no programmatic limitation to the number 5,000 or beyond. The algorithm that governs the conversion would work all the same.

5,000或以上的人数没有编程限制。 控制转换的算法将完全相同。

The space required to display Roman numeral equivalents of large numbers grows larger and larger without much added benefit of revealing something new.

显示大数的罗马数字等效项所需的空间越来越大，而没有揭示新事物的更多好处。

The code itself consists of an HTML part describing the content with inline styles for ease of interaction and added JavaScript for functionality.

该代码本身包括一个HTML部分，该部分以内联样式描述内容以简化交互，并添加了JavaScript以实现功能。

The is an input element of the type "number" to limit input data to numeric values and two buttons. The "Convert" button is wired to the function that performs the conversion, and the "Display" button outputs the Roman number equivalent.

是输入类型“数字”，用于将输入数据限制为数值和两个按钮。 “转换”按钮连接到执行转换的功能，“显示”按钮输出等效的罗马数字。

Why output through a button element? Styling worked well when applied to both buttons together. And considering the limited functionality of the embed, it seemed like a time saver.

为什么通过按钮元素输出？ 一起应用于两个按钮时，样式效果很好。 考虑到嵌入的功能有限，这似乎节省了时间。

For clarity, these elements are assigned to variables:

为了清楚起见，将这些元素分配给变量：

const inputField = document.querySelector('input'); // input element
const convertButton = document.getElementById('convert'); // convert button
const outputField = document.getElementById('display'); // output element

Function convertToRoman() contains the logic and renders the result:

函数convertToRoman()包含逻辑并呈现结果：

function convertToRoman() {
  let arabic = document.getElementById('arabicNumeral').value; // input value
  let roman = '';  // variable that will hold the result
}

The numerical value from input element is saved in a variable called "arabic" for further testing. The variable named "roman" will hold the string representing Roman equivalent of Arabic input.

输入元素的数值保存在名为“ arabic ”的变量中，以进行进一步测试。 名为“ roman ”的变量将保存表示与阿拉伯文输入法等效的字符串。

Next, there are two arrays of equal lengths, one holding Arabic numerals and one holding their Roman counterparts. Both are in descending order to simplify subtraction:

接下来，有两个等长的数组，一个数组包含阿拉伯数字，一个数组包含罗马数字。 两者均为降序以简化减法：

// descending order simplifies subtraction while looping
const arabicArray = [5000, 4000, 1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1] 
const romanArray = ['V̅', 'MV̅','M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']

Unicode tables help with forming symbols greater than 1,000.

Unicode表有助于形成大于1,000的符号。

Finally, here is the logic that test the inputted number and converts it.

最后，这是测试输入的数字并将其转换的逻辑。

if (/^(0|[1-9]\d*)$/.test(arabic)) {
  // Regular expression tests
  if (arabic == 0) {
    // for decimal points and negative
    outputField.innerHTML = "Nulla"; // signs
  } else if (arabic != 0) {
    for (let i = 0; i < arabicArray.length; i++) {
      while (arabicArray[i] <= arabic) {
        roman += romanArray[i];
        arabic -= arabicArray[i];
      }
    }
    outputField.innerHTML = roman;
  }
} else {
  outputField.innerHTML =
    "Please enter non negative integers only. No decimal points.";
}

The first test checks for decimal points and negative signs. If found, the message asks to "enter non-negative integers only."

第一个测试检查小数点和负号。 如果找到，该消息将要求“仅输入非负整数”。

The next test checks whether the number entered equals zero. In such a case, the string "Nulla" is displayed.

下一个测试检查输入的数字是否等于零。 在这种情况下，将显示字符串“ Nulla”。

Otherwise, the loops keep concatenating Roman strings while subtracting Arabic numbers until the latter satisfies the condition for the while loop. Then it displays the Roman equivalent of the user input.

否则，循环将继续连接罗马字符串，同时减去阿拉伯数字，直到阿拉伯数字满足while循环的条件为止。 然后显示与用户输入等效的罗马字。

Just like with the interactive chart, the code for the Roman Numeral Converter is all set for you to copy it and embed it into any article. Here's the full code repository.

就像交互式图表一样，Roman Numeral Converter的代码已全部设置好，可以将其复制并嵌入到任何文章中。 这是完整的代码存储库 。

翻译自: https://www.freecodecamp.org/news/roman-numeral-converter-interactive-roman-numerals-chart/

交互式图表