Арифметические операторы принимают в качестве операндов числовые значения, выполняют с ними математические операции и возвращают результат в виде одного числового значения. Стандартные операторы — это сложение +, вычитание -, деление /, умножение *, деление с возвратом остатка %.

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

ОператорОписаниеПример
+Сложениеvar x = 20 + 10; alert( x ); // 30
-Вычитаниеvar x = 20 - 10; alert( x ); // 10
*Умножениеvar x = 20 * 10; alert( x ); // 200
/Делениеvar x = 20 / 10; alert( x ); // 2
%Деление по модулюvar x = 5 % 2; alert( x ); // 1
++Инкрементvar x = 10; x ++; alert( x ); // 11
--Декрементvar x = 10; x--; alert( x ); // 9

Бинарный оператор + возвращает сумму двух операндов, если они числовые. Возвращаемый результат будет формироваться по следующим правилам:

Слагаемые операндыРезультат
Один из слагаемых операндов — значение NaNNaN
Суммируются операнды Infinity и InfinityInfinity
Суммируются операнды -Infinity и -Infinity-Infinity
Суммируются операнды Infinity и -InfinityNaN
Суммируются операнды +0 и +0+0
Суммируются операнды -0 и +0+0
Суммируются операнды -0 и -0-0

Если одним из операндов является строка, другой операнд автоматически преобразуется в строку и выполняется конкатенация (склеивание строк):

Выполнить код »

Невнимание к типам слагаемых операндов может привести к ошибке, например:

Выполнить код »

В этом примере предполагается, что алертом должна вывестись строка "Сумма 7 и 10 равна 17", однако в окне браузера выводится сообщение "Сумма 7 и 10 равна 710". Произошло это из-за того, что каждое сложение выполняется отдельно. Сначала строка "Сумма 7 и 10 равна " складывается с числом 7, что дает нам в результате строку. Затем к полученной строке прибавляется число 10, и снова у нас получается строка.

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

Выполнить код »

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

Унарный плюс + преобразует свой операнд в число (или значение NaN) и возвращает преобразованное значение. Если операндом является число, то этот оператор ничего не делает:

Выполнить код »

Если унарный плюс + применяется к нечисловому аргументу, то проявляется его «побочный эффект» – преобразование значения в число. Он может конвертировать строковые представления чисел, а также нестроковые значения true, false и null. Если аргумент не может быть преобразован, возвращается NaN.

Следующий пример поясняет применение унарного оператора + к разным типам данных:

Выполнить код »

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

Выполнить код »

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

ОперандыРезультат
Один из операндов — NaNNaN
Infinity вычитается из InfinityNaN
-Infinity вычитается из -InfinityNaN
-Infinity вычитается из InfinityInfinity
Infinity вычитается из -Infinity-Infinity
+0 вычитается из +0+0
-0 вычитается из +0-0
-0 вычитается из -0+0

Если один из аргументов – строка, faulse, true, null или undefined, он преобразуется в число с помощью функции Number(), а затем выполняется арифметическое вычитание по описанным правилам.

Рассмотрим несколько примеров использования этих правил:

Выполнить код »

Оператор умножения * возвращает произведение операндов. Возвращаемый результат будет формироваться по следующим правилам:

ОперандыРезультат
Все операнды — числа±Number
Один из операндов — NaNNaN
Infinity умножается на 0NaN
Infinity умножается на число, отличное от 0±Infinity
Infinity умножается на InfinityInfinity

Если один из аргументов не является числом, он преобразуется в число с помощью функции Number(), а затем выполняется произведение по описанным правилам.

Выполнить код »

Оператор деления / производит деление его операндов, где левый операнд – делимый, а правый – делитель. Нечисловые аргументы интерпретатор JavaScript пытается преобразовать в числа. В JavaScript все числа вещественные, поэтому результатом любого деления является значение с плавающей точкой.

Выполнить код »

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

Допустим x и y — целые числа, причём y ≠ 0. Деление с остатком x («делимого») на y («делитель») означает нахождение таких целых чисел q и z, что выполняется равенство:

x/y = q+z

Таким образом, результатом деления с остатком являются два целых числа: q – неполное частное от деления, а zостаток от деления. Нахождение остатка от деления называют взятием остатка или делением по модулю:

Выполнить код »

Инкремент ++ (от англ. increment «увеличение») — операция, увеличивающая переменную на единицу. Обратную операцию называют декремент -- («уменьшение»).

Возвращаемое значение оператора ++ зависит от его позиции относительно операнда. Если поставить его перед операндом (префиксный оператор инкремента), то к операнду прибавляется единица, а результатом является увеличенное значение операнда. Если же он размещается после операнда (постфиксный оператор инкремента), то к операнду прибавляется единица, однако результатом является первоначальное значение операнда.
Так:

var y = ++x

можно записать, как

x = x + 1;
var y = x;

В то время, как

var y = x++

эквивалентно

var y = x;
x = x + 1;

Рассмотрим различия между следующими двумя инструкциями:

Выполнить код »

Внимание: Операнд инкремента (++)/декремента (--) должен быть значением lval (т.е. переменной, элементом массива или свойством объекта). Код 7++ даст ошибку.

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

Префиксный инкремент и декремент, согласно таблицы приоритетов, имеют в инструкциях одинаковый приоритет и выполняются слева направо, например:

Выполнить код »

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

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

Выполнить код »

Результат первого выражения result1 равен 12 потому, что переменная x имеет первоначальное значение (2). Результат второго выражения result2 равен 11 потому, что здесь используется уже уменьшенное значение (1).

Применение: Постфиксная форма x++/x-- отличается от префиксной ++x/--x тем, что возвращает старое значение своего аргумента, бывшее до увеличения (уменьшения).

  • Оператор сложения возвращает сумму числовых операндов или объединяет строки.
  • Унарный плюс широко используется для преобразование значения операнда в число.
  • Если используется постфиксная форма с оператором инкремента/декремента после операнда (x++/x--), то возвращается исходное значение операнда, а затем увеличивается/уменьшается на единицу.
  • Если используется префиксная форма с оператором инкремента/декремента перед операндом (++x/--x), значение операнда возвращается увеличенным/уменьшенным на единицу.

  • Сложение чисел и строк


    Имеется три переменные var a = 1, b = 2, c = " белых медведей". Сложите переменные так, чтобы в результате получилось выражение: "12 белых медведей".

    Показать решение

    Решение:

    Вы уже знаете, что каждое сложение выполняется отдельно. Сначала строка " белых медведей" складывается с числом 2, что дает в результате строку. Далее к ней добавляется число 1, и опять получается строка.

    Выполнить код »
  • Префиксный и постфиксный инкремент

    Какой результат будет получен в каждом примере?

    (1)

    var i = 2; 
    i = i++; 
    document.write( i ); 
    

    (2)

    i = 2; 
    i = i++ + i++; 
    document.write( i ); 
    

    (3)

    i = 2; 
    i = i++ + ++i; 
    document.write( i ); 
    

    (4)

    i = 2; 
    i = ++i + ++i;
    document.write( i ); 
    
    Показать решение

    Решение:

    В первом примере, i = 2 + 1. Постфиксный инкремент не передает значение сразу. Ответ 2.

    В втором примере приоритет у инкрементов, поэтому второй инкремент получает уже инкрементное значение, т.е. 3. Так как это постфиксные инкременты конечное выражение будет следующим: i = 2 + 3. Ответ 5.

    В третьем примере операция похожа на второй, однако конечное выражение будет таким: i = 2 + 4. Здесь второй инкремент увеличивается дважды. Ответ 6.

    В четвертом примере работают префиксные инкременты, т.е. сразу увеличиваются на единицу каждый. Как и в предыдущем примере второй инкремент увеличивается дважды, поэтому конечное выражение: i = 3 + 4. Ответ 7.

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

    Запустив следующий код, вы получите число 16. Измените вторую строку так, чтобы получить число 15.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Инкремент и декремент</title>
    </head>
    <body>
    <script>
    
      var a = 5, b = 10, c;
      c = ++a + b--;
      document.write(c);
    
    </script>  
    </body>
    </html>
    
    Показать решение

    Решение:

    Выполнить код »
  • Приоритет операторов

    Запустив следующий код, вы получите число 30. Ваша задача расставить приоритетные скобки () так, чтобы получить число -390.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Инкремент и декремент</title>
    </head>
    <body>
    <script>
    
      var x = 15 * 4 + 25 - 55;
      document.write(x);
    
    </script>  
    </body>
    </html>
    
    Показать решение

    Решение:

    Выполнить код »
  • Унарные операторы

    1. Преобразуйте строковое значение переменной x в число, применив для этой цели унарный «плюс».
    2. Уменьшите переменную на единицу при помощи декремента.
    3. Сохраните значение в переменную result.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Унарные операторы</title>
    </head>
    <body>
    <script>
    
      var x = '5';
      /* ваш код */;
      document.write(result);
    
    </script>  
    </body>
    </html>
    
    Показать решение

    Решение:

    Выполнить код »

Комментарии

пожелания к комментариям…
  • Приветствуются комментарии, соответствующие теме урока: вопросы, ответы, предложения.
  • Одну строчку кода оборачивайте в тег <code>, несколько строчек кода — в теги <pre><code>...ваш код...</code></pre>.
  • Допускаются ссылки на онлайн-песочницы (codepen, plnkr, JSBin и др.).