Как выполнять математические операции в JavaScript с помощью операторов

Введение

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

Хотя хорошее понимание математики не является обязательным условием для того, чтобы быть способным разработчиком, важно знать, какие типы операций доступны в JavaScript и как использовать математику в качестве инструмента для выполнения практических задач.

В отличие от других языков программирования, JavaScript имеет только один числовой тип данных; например, нет различия между целыми числами (положительными или отрицательными целыми числами) и числами с плавающей запятой (числа с десятичной точкой).

В этом руководстве мы рассмотрим арифметические операторы, операторы присваивания и порядок операций, используемых с числовыми типами данных JavaScript.

Арифметические операторы

Арифметические операторы — это символы, обозначающие математическую операцию и возвращающие значение. В уравнении 3 + 7=10 + — это синтаксис, означающий сложение.

В JavaScript есть много знакомых операторов из базовой математики, а также несколько дополнительных операторов, специфичных для программирования.

Вот справочная таблица арифметических операторов JavaScript.

Operator	Syntax	Example	Definition
Addition	`+`	`x + y`	Sum of `x` and `y`
Subtraction	`-`	`x - y`	Difference of `x` and `y`
Multiplication	`*`	`x * y`	Product of `x` and `y`
Division	`/`	`x / y`	Quotient of `x` and `y`
Modulo	`%`	`x % y`	Remainder of `x / y`
Exponentiation	`**`	`x ** y`	`x` to the `y` power
Increment	`++`	`x++`	`x` plus one
Decrement	`--`	`x--`	`x` minus one

В этой статье мы более подробно рассмотрим каждый из этих операторов.

Сложение и вычитание

Операторы сложения и вычитания доступны в JavaScript и могут использоваться для нахождения суммы и разности числовых значений. В JavaScript есть встроенный калькулятор, а математические операции можно выполнять прямо в консоли.

Мы можем выполнить простое сложение с числами, например сложить 10 и 20, используя знак плюс (+).

10 + 20;

Output30

Помимо выполнения математических операций с простыми числами, мы также можем присваивать числа переменным и выполнять те же вычисления. В этом случае мы присвоим числовые значения x и y и поместим сумму в z.

// Assign values to x and y
let x = 10;
let y = 20;

// Add x and y and assign the sum to z
let z = x + y;

console.log(z);

Output30

Точно так же мы используем знак минус (-) для вычитания чисел или переменных, представляющих числа.

// Assign values to x and y
let x = 10;
let y = 20;

// Subtract x from y and assign the difference to z
let z = y - x;

console.log(z);

Output10

Мы также можем складывать и вычитать с отрицательными числами и числами с плавающей запятой (десятичными).

// Assign values to x and y
let x = -5.2;
let y = 2.5;

// Subtract y from x and assign the difference to z
let z = x - y;

console.log(z);

Output-7.7

Одна интересная вещь, о которой следует помнить в JavaScript, — это результат добавления числа и строки. Мы знаем, что 1 + 1 должно равняться 2, но это уравнение даст неожиданные результаты.

let x = 1 + "1";

console.log(x);
typeof x;

Output11
'string'

Вместо добавления двух чисел JavaScript преобразует весь оператор в строку и соединит их вместе. Важно быть осторожным с динамически типизированной природой JavaScript, так как это может привести к нежелательным результатам.

Распространенной причиной использования сложения или вычитания в JavaScript является прокрутка до идентификатора минус высота фиксированной панели навигации в пикселях.

function scrollToId() {
	const navHeight = 60;
	window.scrollTo(0, window.pageYOffset - navHeight);
}

window.addEventListener('hashchange', scrollToId);

В приведенном выше примере нажатие на идентификатор приведет к прокрутке на 60 пикселей выше идентификатора.

Сложение и вычитание — два наиболее распространенных математических уравнения, которые вы будете использовать в JavaScript.

Умножение и деление

Операторы умножения и деления также доступны в JavaScript и используются для нахождения произведения и частного числовых значений.

Звездочка (*) используется для обозначения оператора умножения.

// Assign values to x and y
let x = 20;
let y = 5;

// Multiply x by y to get the product
let z = x * y;

console.log(z);

Output100

Умножение может использоваться для расчета цены товара после применения налога с продаж.

const price = 26.5;    // Price of item before tax
const taxRate = 0.082; // 8.2% tax rate

// Calculate total after tax to two decimal places
let totalPrice = price + (price * taxRate);
let fixedPrice = totalPrice.toFixed(2);

console.log("Total:", fixedPrice);

OutputTotal: 28.67

Косая черта (/) используется для представления оператора деления.

// Assign values to x and y
let x = 20;
let y = 5;

// Divide y into x to get the quotient
let z = x / y;

console.log(z);

Output4

Деление особенно полезно при подсчете времени, например, при определении количества часов в количестве минут или при подсчете процента правильных ответов, выполненных в тесте.

Модуль

Один арифметический оператор, который немного менее известен, — это оператор по модулю (иногда известный как модуль), который вычисляет остаток от частного после деления. Модуль представлен знаком процента (%).

Например, мы знаем, что 3 переходит в 9 ровно три раза, и остатка нет.

9 % 3;

Output0

Мы можем использовать оператор по модулю, чтобы определить, является ли число четным или нечетным, как показано в этой функции:

// Initialize function to test if a number is even
const isEven = x => {
	// If the remainder after dividing by two is 0, return true
	if (x % 2 === 0) {
		return true;
	}
	// If the number is odd, return false
	return false;
}

// Test the number
isEven(12);

Outputtrue

В приведенном выше примере 12 делится на 2 без остатка, поэтому это четное число.

Часто в программировании по модулю используется в сочетании с условными операторами для управления потоком.

Возведение в степень

Возведение в степень — это один из новых операторов в JavaScript, который позволяет нам вычислять степень числа по его показателю. Синтаксис возведения в степень — две звездочки подряд (**).

10 в пятой степени, или 10^5, записывается так:

10 ** 5;

Output100000

10 ** 5 равно пятикратному умножению 10 на 10:

10 * 10 * 10 * 10 * 10;

Другой способ записать это с помощью метода Math.pow().

Math.pow(10, 5);

Output100000

Использование оператора возведения в степень — это краткий способ определения степени заданного числа, но, как обычно, при выборе между методом и оператором важно придерживаться стиля вашей кодовой базы.

Увеличение и уменьшение

Операторы инкремента и декремента увеличивают или уменьшают числовое значение переменной на единицу. Они представлены двумя знаками плюс (++) или двумя знаками минус (--) и часто используются с циклами.

Обратите внимание, что операторы увеличения и уменьшения можно использовать только для переменных; попытка использовать их для необработанного числа приведет к ошибке.

7++

OutputUncaught ReferenceError: Invalid left-hand side expression in postfix operation

Операторы инкремента и декремента могут быть классифицированы как префиксные или постфиксные операции, в зависимости от того, помещается ли оператор до или после переменной.

Во-первых, мы можем указать приращение префикса с помощью ++x.

// Set a variable
let x = 7;

// Use the prefix increment operation
let prefix = ++x;

console.log(prefix);

Output8

Значение x было увеличено на единицу. Чтобы увидеть разницу, мы проверим приращение постфикса с помощью y++.

// Set a variable
let y = 7;

// Use the prefix increment operation
let postfix = y++;

console.log(postfix);

Output7

Значение y не было увеличено в постфиксной операции. Это связано с тем, что значение не будет увеличиваться до тех пор, пока выражение не будет вычислено.

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

// Run a loop ten times
for (let i = 0; i < 10; i++) {
  console.log(i);
}

Output0
1
2
3
4
5
6
7
8
9

В приведенном выше коде показана итерация цикла, которая достигается с помощью оператора приращения.

Мы можем рассматривать x++ как сокращение для x=x + 1, а x-- — как сокращение для x=x - 1. .

Операторы присваивания

Одним из наиболее часто используемых операторов является оператор присваивания, который мы уже видели и который представлен знаком равенства (=). Мы используем =, чтобы присвоить значение справа переменной слева.

// Assign 27 to age variable
let age = 27;

В дополнение к стандартному оператору присваивания в JavaScript есть составные операторы присваивания, которые объединяют арифметический оператор с =.

Например, оператор сложения начнет с исходного значения и добавит новое значение.

// Assign 27 to age variable
let age = 27;

age += 3;

console.log(age);

Output30

В этом случае age += 3 равносильно написанию age=age + 3.

Все арифметические операторы можно комбинировать с присваиванием для создания составных операторов присваивания. Ниже приведена справочная таблица операторов присваивания в JavaScript.

Operator	Syntax
Assignment	`=`
Addition assignment	`+=`
Subtraction assignment	`-=`
Multiplication assignment	`*=`
Division assignment	`/=`
Remainder assignment	`%=`
Exponentiation assignment	`**=`

Составные операторы присваивания часто используются с циклами, подобными инкрементации и декрементации, и используются, когда необходимо повторить или автоматизировать уравнения.

Приоритет оператора

Хотя мы читаем слева направо, операторы будут оцениваться в порядке старшинства, как и в обычной математике.

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

// First multiply 3 by 5, then add 10
10 + 3 * 5;

Output25

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

// First add 10 and 3, then multiply by 5
(10 + 3) * 5;

Output65

Ниже приведена справочная таблица приоритета арифметических операций в JavaScript, от высшего к низшему. Для инкрементации и декрементации постфикс имеет более высокий приоритет, чем префикс.

Приращение/уменьшение, умножение/деление и сложение/вычитание имеют одинаковый уровень приоритета.

Operator	Syntax
Parentheses	`()`
Incrementation	`++`
Decrementation	`--`
Exponentiation	`**`
Multiplication	`*`
Division	`/`
Addition	`+`
Subtraction	`-`

Приоритет оператора включает не только арифметические операторы, но и операторы присваивания, логические операторы, условные операторы и многое другое. Чтобы увидеть полный список, просмотрите приоритет операторов в Mozilla Developer Network (MDN).

Заключение

В этой статье мы рассмотрели арифметические операторы и синтаксис, в том числе многие знакомые математические операторы и несколько специфичных для программирования.

Кроме того, мы узнали, как сочетать арифметику и присваивание для создания составных операторов присваивания, а также порядок операций в JavaScript.