交互式圖表

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 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之間的非負整數。 然后單擊轉換以顯示等效的羅馬數字。

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 valuelet 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 testsif (arabic == 0) {// for decimal points and negativeoutputField.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/

交互式圖表