Как реализовать калькулятор базовых математических выражений в JavaScript с помощью MathCalc

Хорошие старые дни в классе «Школа в математике», где учителя не разрешали использовать калькуляторы в классе. В детстве я был (и, возможно, все еще) очень ленив, поэтому возможность иметь электронное устройство, способное решить любую математическую операцию (дешевая реклама для калькуляторов Casio), была просто потрясающей. Теперь, хотя я не использую калькулятор каждый день, мне как разработчику интересно узнать, как другие разработчики решают такие проблемы. Теперь в JavaScript выполнение математических операций с кодом довольно просто, по крайней мере, только для программиста, но что, если пользователь должен выполнить какую-то математическую операцию? Сегодня я хочу поделиться полезным фрагментом кода, а именно MathCalc, который позволяет вам использовать очень продуманную функцию, которая решает основные математические выражения из простой строки. Да, точно так же, как вы сделали с калькулятором, вводя значения и заменяя значения в некоторой формуле.

1. Добавьте скрипт MathCalc

Скрипт MathCalc был написан @paiv и его основная идея, хотя ее сложно достичь, очень проста в использовании и работе. Сценарий анализирует математическое выражение как tring, например, такую ​​операцию: (1 + 2 + 3) / (2), который должен вернуться 2 в результате.

Сценарий размещается в GithubHist, поэтому вы можете получить копию сценария MathCalc:

Затем включите скрипт из файла в ваш HTML-документ, используя тег script:


Вы можете посетите домашнюю страницу сценария это объясняет больше возможных вариантов использования и так. Парсер использует синтаксический анализатор сдвига реализация, которая очень эффективна и не имеет никаких зависимостей. Библиотека поддерживает следующие операторы:

  • ( )
  • func(x) (вызов)
  • - (Унарный)
  • ^ (власть, право ассоциативная)
  • * / %
  • + -
  • =
  • , (конструктор кортежей)

Числа: 42.3, 1e-7

2. Использование скрипта MathCalc

MathCalc предлагает различные функции, которые также должны быть описаны и использованы. Мы собираемся объяснить вам все с примерами:

Основное использование

Основное использование состоит в том, чтобы решить простую математическую операцию из строкового представления, в этом случае мы собираемся решить простое сложение и деление, показанные в выражении переменной, создание нового экземпляра библиотеки позволяет использовать его метод разбора который ожидает выражение в качестве первого аргумента. Парсер проверяет правильность синтаксиса, и вы можете выполнить действие, если это не так. Если все верно, вы можете использовать метод eval для решения выражения и все:

// Create instance of MathCalc
var calc = new MathCalc();
// Your mathematical operation
var expression = '(1 + 2 + 3) / 3';
// Evaluate expression
var parser = calc.parse(expression);
// Check if there's a syntax error
if (parser.error) {
console.error(
'The expression "' + expression + '" has an error',
expr.error.text
);
// Proceed to solve
}else {
// The result will be a JS number, not a string
var result = parser.eval();
// Displays 2 as results (as expected) !
console.log(
'The expression "' + expression + '" generates:',
result
);
}

Обратите внимание, что результатом метода eval является число, а не строка, и в зависимости от операции он также может возвращать NaN (не число).

Использование переменных

Чтобы использовать переменные, как это делают многие математические операции, вы можете объявить их в парсере в качестве первого аргумента внутри объекта. Например, наше выражение будет простым в этом случае x + y, где x будет иметь значение 1 а также y из 2:

// Create instance of MathCalc
var calc = new MathCalc();
// Your mathematical operation
var expression = 'x + y';
// Evaluate result
var parser = calc.parse(expression);
// Check if there's a syntax error
if (parser.error) {
console.error(
'The expression "' + expression + '" has an error',
expr.error.text
);
// Proceed to solve
}else {
// The result will be a JS number, not a string
// Insert the variables value
var result = parser.eval({
x: 1,
y: 2
});
// Displays 3 as results (as expected) !
console.log(
'The expression "' + expression + '" generates:',
result
);
}

Создание пользовательских математических функций

Вроде работает функция квадратного корня (sqrt(25) равно 5), вы также можете объявить свои собственные функции. Например,

// Create instance of MathCalc
var calc = new MathCalc();
// Your mathematical operation
var expression = 'addNumbers(1 , 3)';
// Evaluate result
var parser = calc.parse(expression);
// Declare addNumbers function in the parser
parser.scope.addNumbers = function(a, b) {
return a + b;
};
// Check if there's a syntax error
if (parser.error) {
console.error(
'The expression "' + expression + '" has an error',
expr.error.text
);
// Proceed to solve
}else {
// The result will be a JS number, not a string
// Insert the variables value
var result = parser.eval();
// Displays 4 as results (as expected) !
console.log(
'The expression "' + expression + '" generates:',
result
);
}

Обрабатывать ошибки времени выполнения

Если пользовательская реализованная функция не работает должным образом, вы можете не знать, что произошло без правильно обработанного процесса. Проверьте, имеет ли область свойство runtimeError, чтобы проверить, не вызвали ли ваши пользовательские функции ошибку:

// Create instance of MathCalc
var calc = new MathCalc();
// Your mathematical operation
var expression = 'functionThatDoesnExist(1 , 3)';
// Evaluate result
var parser = calc.parse(expression);
// Check if there's a syntax error
if (parser.error) {
console.error(
'The expression "' + expression + '" has an error',
expr.error.text
);
// Proceed to solve
}else {
// The result will be a JS number, not a string
// Insert the variables value
var result = parser.eval();
if (parser.scope.runtimeError) {
alert('Runtime JS Error');
}
// Displays 4 as results (as expected) !
console.log(
'The expression "' + expression + '" generates:',
result
);
}

Живой пример

Следующая скрипта реализует очень простую реализацию скрипта. Ввод, который действует как экран, где вы можете вставить свое выражение и кнопку, которая вычисляет результат:

Ссылка на основную публикацию
Adblock
detector