сложение в джава скрипт
Базовые операторы, математика
В этой главе мы начнём с простых операторов, а потом сконцентрируемся на специфических для JavaScript аспектах, которые не проходят в школьном курсе арифметики.
Термины: «унарный», «бинарный», «операнд»
Прежде, чем мы двинемся дальше, давайте разберёмся с терминологией.
Унарным называется оператор, который применяется к одному операнду. Например, оператор унарный минус «-» меняет знак числа на противоположный:
Бинарным называется оператор, который применяется к двум операндам. Тот же минус существует и в бинарной форме:
Формально, в последних примерах мы говорим о двух разных операторах, использующих один символ: оператор отрицания (унарный оператор, который обращает знак) и оператор вычитания (бинарный оператор, который вычитает одно число из другого).
Математика
Поддерживаются следующие математические операторы:
Первые четыре оператора очевидны, а про % и ** стоит сказать несколько слов.
Взятие остатка %
Возведение в степень **
В выражении a ** b оператор возведения в степень умножает a на само себя b раз.
Математически, оператор работает и для нецелых чисел. Например, квадратный корень является возведением в степень 1/2 :
Сложение строк при помощи бинарного +
Давайте рассмотрим специальные возможности операторов JavaScript, которые выходят за рамки школьной арифметики.
Обычно при помощи плюса ‘+’ складывают числа.
Но если бинарный оператор ‘+’ применить к строкам, то он их объединяет в одну:
Обратите внимание, если хотя бы один операнд является строкой, то второй будет также преобразован в строку.
Как видите, не важно, первый или второй операнд является строкой.
Вот пример посложнее:
Например, вычитание и деление:
Приведение к числу, унарный +
Плюс + существует в двух формах: бинарной, которую мы использовали выше, и унарной.
Унарный, то есть применённый к одному значению, плюс + ничего не делает с числами. Но если операнд не число, унарный плюс преобразует его в число.
Необходимость преобразовывать строки в числа возникает очень часто. Например, обычно значения полей HTML-формы — это строки. А что, если их нужно, к примеру, сложить?
Бинарный плюс сложит их как строки:
Поэтому используем унарный плюс, чтобы преобразовать к числу:
С точки зрения математика, такое изобилие плюсов выглядит странным. Но с точки зрения программиста тут нет ничего особенного: сначала выполнятся унарные плюсы, которые приведут строки к числам, а затем бинарный ‘+’ их сложит.
Почему унарные плюсы выполнились до бинарного сложения? Как мы сейчас увидим, дело в их приоритете.
Приоритет операторов
В том случае, если в выражении есть несколько операторов – порядок их выполнения определяется приоритетом, или, другими словами, существует определённый порядок выполнения операторов.
Из школы мы знаем, что умножение в выражении 1 + 2 * 2 выполнится раньше сложения. Это как раз и есть «приоритет». Говорят, что умножение имеет более высокий приоритет, чем сложение.
В JavaScript много операторов. Каждый оператор имеет соответствующий номер приоритета. Тот, у кого это число больше, – выполнится раньше. Если приоритет одинаковый, то порядок выполнения – слева направо.
Отрывок из таблицы приоритетов (нет необходимости всё запоминать, обратите внимание, что приоритет унарных операторов выше, чем соответствующих бинарных):
| Приоритет | Название | Обозначение |
|---|---|---|
| … | … | … |
| 17 | унарный плюс | + |
| 17 | унарный минус | — |
| 16 | возведение в степень | ** |
| 15 | умножение | * |
| 15 | деление | / |
| 13 | сложение | + |
| 13 | вычитание | — |
| … | … | … |
| 3 | присваивание | = |
| … | … | … |
Присваивание
Присваивание = возвращает значение
Тот факт, что = является оператором, а не «магической» конструкцией языка, имеет интересные последствия.
Вызов x = value записывает value в x и возвращает его.
Благодаря этому присваивание можно использовать как часть более сложного выражения:
В примере выше результатом (a = b + 1) будет значение, которое присваивается переменной a (то есть 3 ). Потом оно используется для дальнейших вычислений.
Забавное применение присваивания, не так ли? Нам нужно понимать, как это работает, потому что иногда это можно увидеть в JavaScript-библиотеках.
Однако писать самим в таком стиле не рекомендуется. Такие трюки не сделают ваш код более понятным или читабельным.
Присваивание по цепочке
Рассмотрим ещё одну интересную возможность: цепочку присваиваний.
Опять-таки, чтобы код читался легче, лучше разделять подобные конструкции на несколько строчек:
Польза от такого стиля особенно ощущается при быстром просмотре кода.
Сокращённая арифметика с присваиванием
Часто нужно применить оператор к переменной и сохранить результат в ней же.
Эту запись можно укоротить при помощи совмещённых операторов += и *= :
JavaScript | Как сложить два числа?
Инструкция для чисел
Печатаем первое число. Ставим пробел » «. Печатаем символ сложения «+» (знак плюс). Ставим пробел » «. Печатаем второе число.
Чтобы проверить правильно ли JavaScript посчитает сумму двух чисел, нужно открыть «Инструменты разработчика» (CTRL+SHIFT+i) и вкладку «Console» в своём баузере (Google Chrome, Opera, Mozilla) и ввести туда эту команду.
Сложение двух чисел 5 и 6 — JavaScript
После ввода команды сложения нужно нажать на клавишу ввода (Enter). После этого нажатия выполнится команда сложения и мы увидим результат — число 11 (одиннадцать).
Инструкция для переменных
Наши числа могут храниться в переменных. Пример:
Как сложить два числа, которые находятся в переменных? Пользуемся аналогичной инструкцией сложения, только теперь вместо чисел мы вводим имена переменных:
Чтобы проверить правильно ли JavaScript посчитает сумму двух переменных, нужно открыть «Инструменты разработчика» (CTRL+SHIFT+i) и вкладку «Console» в своём баузере (Google Chrome, Opera, Mozilla) и ввести туда эту команду.
Сложение двух переменных из чисел — JavaScript
После ввода команды сложения нужно нажать на клавишу ввода (Enter). После этого нажатия выполнится команда сложения и мы увидим результат — число 10 (десять).
Функция, которая складывает два числа в JavaScript
Функция сложения двух чисел — JavaScript
Справка
Оператор сложения ( + ) выполняет либо конкатенацию строк, либо числовое сложение.
Базовая математика в JavaScript — числа и операторы
В этой части курса мы обсуждаем математику в JavaScript — как мы можем использовать operators (en-US) и другие функции, чтобы успешно манипулировать числами для выполнения наших задач.
| Необходимые условия: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript. |
|---|---|
| Цель: | Ознакомление с основами математики в JavaScript. |
Все любят математику
Хорошо, может быть, не все. Некоторые из нас любят математику, некоторые из нас ненавидели математику с тех пор, как мы изучали таблицу умножения в школе, а некоторые из нас находятся где-то между ними. Но никто из нас не может отрицать, что математика является фундаментальной частью жизни, и мы не можем обойтись без неё. Это особенно актуально, когда мы учимся программировать на JavaScript (или на любом другом языке, если на то пошло) — большая часть того, что мы делаем, опирается на обработку числовых данных, вычисление новых значений и т.д. Так что не удивительно, что JavaScript имеет полнофункциональный набор математических функций.
В этой статье обсуждаются только основные разделы, которые вам нужно знать сейчас.
Типы чисел
В программировании даже скромная система десятичных чисел, которую мы все так хорошо знаем, сложнее, чем вы думаете. Мы используем разные термины для описания различных типов десятичных чисел. Например:
У нас даже есть разные типы числовых систем:
Прежде чем взорвётся ваш мозг, остановитесь прямо здесь и сейчас!
Во-первых, мы просто будем придерживаться десятичных чисел на протяжении всего курса; вы редко когда будете сталкиваться с необходимостью думать в других числовых системах, если вообще когда-либо с ней столкнётесь.
Для меня всё — числа
Давайте быстро поиграем с некоторыми числами, чтобы снова познакомиться с основным синтаксисом, который нам нужен. Введите команды, перечисленные ниже, в вашу консоль (developer tools JavaScript console), или используйте простую встроенную консоль.
Арифметические операторы
Арифметические операторы — это основные операторы, которые мы используем для различных математических операций, например таких, как сложение или вычитание:
Возвращает значение остатка при делении первого числа на второе. Результат будет иметь тот же знак, что и первое число.
11 % 3 = 2 (поскольку число 3 вмещается три раза, остатком будет число 2)
Примечание: Иногда числа участвующие в математических операциях называют операндами ( operands (en-US) ).
Нам, вероятно, не нужно учить вас базовым математическим операциям, но мы хотели бы проверить ваше понимание синтаксиса. Попробуйте ввести приведённые ниже примеры в свою консоль (developer tools JavaScript console), или используйте встроенную консоль, с которой вы уже знакомы, чтобы ознакомиться с синтаксисом.
Некоторые примеры выше могут дать вам не тот результат, которого вы ожидали; приведённый ниже раздел может дать ответ на вопрос о том, почему.
Приоритет операторов
Давайте взглянем на последний пример сверху. Предположим, что num2 содержит значение 50 и num1 содержит значение 10 (как и было обозначено выше):
Будучи человеком, вы, вероятно, прочитаете это как «50 плюс 10 равно 60», затем «8 плюс 2 равно 10», и, наконец, «60 делить на 10 равно 6».
Но браузер видит это по-другому: «10 делить на 8 равно 1.25», затем «50 плюс 1.25 плюс 2 равно 53.25».
Если вы хотите переопределить порядок выполнения операторов, вы можете окружить парными скобками часть выражения, которая должна быть выполнена первой. Для получения результата 6 вам следует сделать следующее:
Результат этого выражения равен 6.
Примечание: полный список операторов JavaScript и приоритетов их выполнения можно найти по этой ссылке: Expressions and operators.
Операторы инкремента и декремента
Давайте попробуем сыграть с этим в вашей консоли. Для начала заметим, что вы не можете использовать инкремент/декремент непосредственно к числу, что может показаться странным. Дело в том, что мы присваиваем к переменной новое обновлённое число, а не просто вычисляем значение. Следующий пример приведёт к ошибке:
Таким образом, вы можете применить инкремент только к существующим переменным:
Операторы присваивания
Однако есть ещё несколько сложных конструкций, которые позволяют делать ваш код более простым и аккуратным. Наиболее часто используемые перечислены ниже:
x *= 3;
x = x * 3;
x /= 5;
x = x / 5;
Попробуйте использовать такие конструкции, что понять, как они работают. Сможете ли вы определить значение до того, как напишите вторую строку?
Заметьте, что значение справа может быть как числом (константой), так и переменной, например:
Примечание: есть ещё другие операторы присваивания, в этой статье перечислены только самые базовые.
Активное обучение: меняем размеры коробки
В коде сверху, который вы можете изменять, под комментарием есть две строчки, с помощью которых вы можете увеличивать/уменьшать размеры коробки. Мы хотим, чтобы вы выполнили несколько заданий:
Не расстраивайтесь, если вы не поняли код сверху. Нажмите кнопку Reset для запуска программы снова. Если вы смогли ответить верно на все вопросы, попробуйте поэкспериментировать с кодом ещё (или, например, предложить друзьям несколько заданий).
Операторы сравнения
Если вы попробуете использовать эти операторы в консоли, вы увидите, что все они возвращают значения true / false — о типе данных boolean мы писали в прошлой статье. С их помощью мы можем принимать решения в нашей программе, например:
Мы взглянем на то, как реализовать такую логику после знакомства с условными выражениями в следующей статье. Сейчас мы рассмотрим небольшой пример:
Примечание: Такой элемент управления, который переключается между двумя состояниями, обычно называется тумблером. Он переключается между одним состоянием и другим: свет включён, свет выключен и т. д.
Итого
В этой статье мы привели основную информацию, необходимую для работы с числами в JavaScript. Вы постоянно будете использовать числа в процессе обучения языку, поэтому желательно разобраться в этом сейчас. Если вам действительно не нравится математика, пусть вас утешит, что эта статья была сравнительно короткой.
В следующей статье мы изучим текст и то, как мы работаем с ним в JavaScript.
Арифметические операторы в JavaScript
Математические операции являются одними из самых базовых и универсальных функций любого языка программирования. В JavaScript числа часто используются в общих задачах, таких как определение размеров окна браузера, вычисление окончательной цены денежной транзакции или расстояния между элементами в документе сайта.
Чтобы быть хорошим разработчиком, иметь высокие навыки в математике не обязательно, однако для этого важно знать, какие типы операций доступны в JavaScript и как использовать их для выполнения практических задач.
В отличие от других языков программирования, JavaScript имеет только один числовой тип данных; он не разделяет целые числа и числа с плавающей точкой.
Это руководство расскажет об арифметических операторах, операторах присваивания и порядке операций с числовыми данными JavaScript.
Арифметические операторы
Арифметические операторы – это символы, которые определяют математические операции и возвращают результат. К примеру, в 3 + 7 = 10 символ + определяет синтаксис операции сложения.
Многие операторы JavaScript знакомы вам из базовой математики, но есть также и несколько дополнительных операторов.
Все арифметические операторы JavaScript представлены в следующей таблице.
| Оператор | Синтаксис | Пример | Определение |
| Сложение | + | x + y | Сумма x и y |
| Вычитание | – | x – y | Разница между x и y |
| Умножение | * | x * y | Производное x и y |
| Деление | / | x / y | Частное x и y |
| Модуль | % | x % y | Остаток x / y |
| Возведение в степень | ** | x ** y | x в степени y |
| Инкремент | ++ | x++ | x плюс один |
| Декремент | — | x– | x минус один |
Сложение и вычитание
Операторы сложения и вычитания доступны в JavaScript и могут использоваться для нахождения суммы и разности числовых значений. JavaScript имеет встроенный калькулятор, а математические операции могут выполняться непосредственно в консоли.
Знак плюса позволяет складывать числа, например:
Помимо операций с простыми числами 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
Символ минус позволяет вычитать числа или выполнять операции с переменными:
Также можно складывать и вычитать отрицательные числа и числа с плавающей запятой.
В JavaScript есть одна интересная особенность, которую следует учитывать и знать, – это результат сложения числа и строки. Мы знаем, что 1 + 1 должно равняться 2, но это уравнение выдаст неожиданный результат.
let x = 1 + «1»;
console.log(x);
typeof x;
11
‘string’
Вместо сложения чисел JavaScript преобразует все выражение в строки и объединяет их. Важно быть осторожным с динамической типизацией JavaScript, поскольку она может иметь нежелательные результаты.
Сложение и вычитание в JavaScript часто используются для прокрутки панели навигации.
В этом случае панель будет прокручиваться на 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 без остатка:
Модуль числа позволяет определить четное или нечетное число, например:
// 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 имеет тот же результат, что 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
Постфиксная операция не увеличила значение. Это значение не будет увеличиваться до тех пор, пока выражение не будет оценено. Для этого нужно запустить операцию дважды:
Чаще всего эти операторы встречаются в циклах. В данном цикле for оператор запускается 10 раз, начиная с 0.
// Run a loop ten times
for (let i = 0; i
В этом примере итерация цикла выполняется с помощью оператора инкремента.
Проще говоря, х++ можно воспринимать как сокращение от х = х + 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. Для инкремента и декремента постфикс имеет более высокий приоритет, чем префикс.
Инкремент/декремент, умножение/деление и сложение/вычитание имеют одинаковый уровень приоритета.
| Оператор | Синтаксис |
| Круглые скобки | () |
| Инкремент | ++ |
| Декремент | — |
| Возведение в степень | ** |
| Умножение | * |
| Деление | / |
| Сложение | + |
| Вычитание | – |
Приоритет имеют не только арифметические операторы, но и операторы присваивания, логические операторы, условные операторы и т. д. Полный список можно посмотреть здесь.