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

Java | Amber | Комментировать запись

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

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

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

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

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

Арифметические операторы – это символы, которые определяют математические операции и возвращают результат. К примеру, в 3 + 7 = 10 символ + определяет синтаксис операции сложения.

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

Все арифметические операторы JavaScript представлены в следующей таблице.

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

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

Знак плюса позволяет складывать числа, например:

10 + 20;
30

Помимо операций с простыми числами JavaScript позволяет присваивать числа переменным и выполнять с ними вычисления. Для примера можно присвоить числовые значения переменным 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);
30

Символ минус позволяет вычитать числа или выполнять операции с переменными:

// 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);
10

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

// 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);
-7.7

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

Читайте также: Работа со строками в JavaScript

let x = 1 + "1";
console.log(x);
typeof x;
11
'string'

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

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

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

В этом случае панель будет прокручиваться на 60 пикселей от id.

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

Операторы умножения и деления 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);
100

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

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);
totalPrice.toFixed(2);
console.log("Total:", totalPrice);
Total: 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);
4

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

Модуль числа

Модуль – еще один арифметический оператор, менее популярный, чем предыдущие. Представлен символом %. Он возвращает остаток при делении первого числа на второе.

К примеру, мы знаем, что 9 делится на 3 без остатка:

9 % 3;
о

Модуль числа позволяет определить четное или нечетное число, например:

// 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);
true

В этом примере 12 делится на 2, следовательно, это четное число.

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

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

Возведение в степень – один из самых новых операторов JavaScript. Синтаксис возведения в степень – две звездочки подряд (**).

К примеру, 10 в пятой степени (10^5) записывается так:

10 ** 5;
100000

Операция 10 ** 5 имеет тот же результат, что 10 * 10, повторенная 5 раз.

10 * 10 * 10 * 10 * 10;

Также эту операцию можно записать с помощью метода Math.pow().

Math.pow(10, 5);
100000

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

Инкремент и декремент

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

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

7++
Uncaught ReferenceError: Invalid left-hand side expression in postfix operation

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

Префиксный инкремент записывается как ++х.

// Set a variable
let x = 7;
// Use the prefix increment operation
let prefix = ++x;
console.log(prefix);
8

Значение х увеличилось на 1. Постфиксный инкремент пишется как у++.

// Set a variable
let y = 7;
// Use the prefix increment operation
let postfix = y++;
console.log(postfix);
7

Постфиксная операция не увеличила значение. Это значение не будет увеличиваться до тех пор, пока выражение не будет оценено. Для этого нужно запустить операцию дважды:

let y = 7;
y++;
y++;
console.log(y);
8

Чаще всего эти операторы встречаются в циклах. В данном цикле for оператор запускается 10 раз, начиная с 0.

// Run a loop ten times
for (let i = 0; i < 10; i++) {
console.log(i);
}
0
1
2
3
4
5
6
7
8
9

В этом примере итерация цикла выполняется с помощью оператора инкремента.

Проще говоря, х++ можно воспринимать как сокращение от х = х + 1, а х—как сокращение от х = х – 1.

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

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

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

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

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

// Assign 27 to age variable
let age = 27;
age += 3;
console.log(age);
30

По сути, age += 3 – то же самое, что и age = age + 3.

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

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

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

Операторы выполняются в порядке приоритетности, как и в обычной математике.

К примеру, умножение имеет более высокий приоритет, чем сложение.

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

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

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

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

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

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