Как да изградим конвертор на римски цифри и интерактивна диаграма на римски цифри

Римските цифри вече не са съществена част от нашето ежедневие. Но ние ги използваме при проектирането на паметници, часовници и дори за спортни събития.

Какви са римските цифри?

Римските цифри произхождат от Древен Рим и са останали обичайният начин за писане на цифри в цяла Европа в продължение на много векове. Използването им отдавна надживява самата Римска империя. Те постепенно бяха заменени от индуистко-арабската система за номериране, която използваме днес - числата от нула до девет.

Римските цифри са представени чрез комбинации от букви от латинската азбука, които служат като цифри в тази система. Но за разлика от десетични база, със символи от 0 до 9 , в римската система работят седем главни букви на латиница I, V, X, L, C, D, M .

Първоначално нямаше еднозначно обозначение за нула. Вместо това те използваха латинската дума Nulla , което означава „няма“.

Как работят римските цифри?

Индуистко-арабският образ на тези букви е както следва: I = 1, V = 5, X = 10, L = 50, C = 100, D = 500 и M = 1000 .

Други числа се образуват чрез комбиниране на тези букви според определени правила: Символ, поставен след друг с еднаква или по-голяма стойност, добавя стойността му.

Например   VI = V + I = 5 + 1 = 6 или LX = L + X = 50 + 10 = 60 .Нотациите VI и LX се четат като „едно повече от пет“ и „десет повече от петдесет“.

Символ, поставен преди една от по-големите стойности, изважда стойността му. Например IX = X - I = 10 - 1 = 9 и XC = C - X = 100 - 10 = 90 .

Нотациите IX и XC се четат като „едно по-малко от десет“ и „десет по-малко от сто“.

Числа, по-големи от 1000, се образуват чрез поставяне на тире върху символа. Така V̅ = 5000 , X̅ = 10 000 , L, = 50 000 , C, = 100 000 , D, = 500 000 и M and = 1 000 000 .

Така наречената "стандартна" форма забранява използването на един и същ символ повече от три пъти подред. Но понякога могат да се видят изключения. Например IIII за номер 4, VIIII за номер 9 и LXXXX за 90.

Интерактивна диаграма на римските цифри и техните комбинации

Задръжте курсора на мишката върху всеки символ, за да разкриете неговия хинду-арабски еквивалент:

I II III IV V VI VII VIII IX X XX XXX XL L LX LXX LXXX XC C CC CCC CD D DC DCC DCCC CM M V̅ X̅ L̅ C̅ D̅ M̅

Написах кода за тази интерактивна римска цифрова диаграма, която да вградя тук в freeCodeCamp News.

Предвид факта, че функцията за вграждане в HTML не е пълномащабен редактор на код, даденият код не е структуриран и представен като отделни HTML, CSS и JavaScript файлове. По-скоро е писано като един HTML файл с и елементи добавен за стил и функционалност.

Ето пълното хранилище на кодове за моята интерактивна римска цифрова таблица.

Преобразувател на римски цифри

Въведете неотрицателно цяло число между 0 и 5000. След това щракнете върху Конвертиране, за да разкриете римски цифров еквивалент.

От арабски на римски
Конвертиране

Няма програмно ограничение за числото 5000 или повече. Алгоритъмът, който управлява преобразуването, ще работи еднакво.

Пространството, необходимо за показване на римски цифрови еквиваленти на големи числа, става все по-голямо и по-голямо, без особена полза от разкриването на нещо ново.

Самият код се състои от HTML част, описваща съдържанието с вградени стилове за улеснение на взаимодействието и добавен JavaScript за функционалност.

Това е входен елемент от типа "число" за ограничаване на входните данни до числови стойности и два бутона. Бутонът „Конвертиране“ е свързан към функцията, която извършва преобразуването, а бутонът „Дисплей“ извежда еквивалента на римското число.

Защо да се извежда през бутонен елемент? Стилирането работи добре, когато се прилага и към двата бутона заедно. И като се има предвид ограничената функционалност на вграждането, изглеждаше като спестяване на време.

За по-голяма яснота тези елементи се присвояват на променливи:

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

Функцията convertToRoman()съдържа логиката и изобразява резултата:

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

Числовата стойност от входния елемент се записва в променлива, наречена " арабски " за по-нататъшно тестване. Променливата, наречена „ римска “, ще съдържа низа, представляващ римски еквивалент на арабски вход.

След това има два масива с еднаква дължина, един с арабски цифри и един с техните римски аналози. И двете са в низходящ ред за опростяване на изваждането:

// 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 таблиците помагат при формирането на символи, по-големи от 1000.

И накрая, ето логиката, която тества въведеното число и го преобразува.

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."; }

Първият тест проверява за десетични точки и отрицателни знаци. Ако бъде намерено, съобщението иска да „въведете само неотрицателни цели числа“.

Следващият тест проверява дали въведеното число е равно на нула. В такъв случай се показва низът "Nulla".

В противен случай циклите продължават да обединяват римски низове, докато изваждат арабски числа, докато последните удовлетворят условието за цикъла 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.