Доброго времени суток всем, кто читает данную статью. Сегодня я во всех подробностях расскажу про сложение в JavaScript. А если точнее, то мы разберем с вами, как производится сложение простых чисел, строковых переменных и массивов, в чем разница между унарными и бинарными операторами, какие существуют приоритеты операций, а также что под собой подразумевают инкремент и декремент.
Давайте приступим!
Разберемся с терминамиВ самом начале данной статьи я хочу, чтоб вы разобрали основные термины в языках программирования, связанные с вычислениями. Возможно, большинство из вас уже давненько оперирует ими. И это отлично.
Итак, стоит знать, что обозначают такие термины, как операнд, унарный и бинарный оператор.
Операндом называется тот элемент, к которому применяются некоторые операторы. Так, например, в записи «15 — 38» оператором выступает знак «минус», а операндами являются числа 15 и 38.
А что же такое унарный или бинарный оператор? Тут также все просто. Унарный (от слова «уно», что означает «один») применяется только к одному элементу. К примеру, -7. В этом случае «минус» — это унарный оператор. А бинарный (уже понятно, что означает «два») работает с двумя объектами. Здесь можно в качестве примера привести «12*701».
«У меня есть приоритеты! Поэтому плевал я на ваш порядок!»Уверен, что всем известно о приоритетах выполнения арифметических операций. Однако с изучением языков программирования и конкретно в этот перечень добавляются и другие их виды. Всего существует 20 уровней, начиная с 0 и заканчивая 19.
В таблице, прикрепленной ниже, я перечислил несколько операторов в порядке их важности.
Если для решения какой-то задачи вам необходимо узнать и о других операторах, то перейдите на полную таблицу, представленную по ссылке.
Инкремент и декрементНачнем разбор по приоритетам. Наиболее частыми операциями в JavaScript, как и в других языках программирования, являются названные в заголовке текущей главы. Их используют для уменьшения или увеличения значения конкретного элемента на единицу.
Существует два вида как инкремента, так и декремента: постфиксный и префиксный. При чем первый тип имеет приоритет 16, а второй – 15.
Разница их состоит в том, в какой момент идет изменение числа. Так, префиксные типы увеличивают или уменьшают значение сразу. Поэтому если в строке будет указано:
то при запуске программы отобразится 2. В то время как при использовании постфиксных операторов после запуска кода
выведется 1.
Рассмотрим пример, который достаточно часто дают в тестах или на собеседованиях. Вам нужно сказать, что отобразится на экране при первом и втором выводах.
1 2 "use strict"; 3 var i = 3; 4 i--; // короткая и удобная запись для i = i - 1. 5 alert(++i + i++); // i=? 6 alert(i);// i=? 7
А теперь давайте разберем. В четвертой строке указано уменьшение i на единицу. Изменения вступят в силу при выполнении следующей строки программы. Поэтому во время вызова alert переменная i будет равна 2.
Префиксный инкремент сразу увеличивает значение на 1, а постфиксный вступает в силу на следующей строке. В итоге получим запись «3+3», а значит и в диалоговом окне выведется 6.
На следующей строке увеличение сработало и поэтому отобразится 4.
Что-то новенькое при сложении элементовВ JS складывать можно не только числа, а еще и другие типы переменных: строки, и т.д. В качестве примера ознакомьтесь с частью программы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function myFunction() { var a=3, b=7; var str1="Hi, ", str2="friend!"; var c = a+b; var str = str1+str2; var mix = str1+a; alert(c+"\n"+str+"\n"+mix); //выведет: 10 // Hi, friend! // Hi, 3 }
Во втором и третьем случае сложения происходит конкатенация строк, т.е. соединение их в одну. Вот тут и возникают проблемы у начинающих разработчиков.
Допустим вы вытащили определенное значение, которое является строковым var str1="10"; и при этом вам его надо суммировать с числом var a=3; . Если будет произведена операция var mix = str1+ a; , то при выводе alert (mix); на экране появится «103». Чтобы этого не было, текстовую переменную нужно конвертировать следующим образом:
var mix = parseInt (str1, 10)+a;. //ответ: 13
Перейдем к массивам. В скриптовом языке существует функция, которая объединяет несколько массивов в один. Это concat.
var numbers1 = ; var numbers2 = ; // получается массив ; var nums = numbers1.concat(numbers2); alert(nums);
Если же необходимо просуммировать все элементы массива, то здесь вас спасут только циклы.
1 2 3 4 | var res=0;
for (var i=0; i count_players;
document.write(count_ball + " > " + count_players + " = " + compare + " "); //false compare = count_ball < count_players; document.write(count_ball + " < " + count_players + " = " + compare + " "); //true Данные операции чаще всего используются в условных операторах if, else. Для лучшего понимания, покажу Вам таблицу истинности. Ее Вы должны знать наизусть. Для этого достаточно ее понять. Вместо true может быть 1, а вместо false 0. && - Это оператор AND, то есть И. Его можно понять как оператор умножения.
|| - Это оператор OR, то есть ИЛИ. Его можно понять как оператор сложение.
Символ "|" на клавиатуре печатается с помощью комбинации клавиш Shift + Back slesh(Обратный слеш \). ^ - Это оператор XOR, то есть Исключающее ИЛИ. Он используется редко. Но его нужно знать по любому, вдруг понадобится.
Вот и все о чем хотел Вам рассказать в этой статье. Теперь Вы знаете, какие типы переменных существуют в программировании и как использовать их в различных арифметических и логических операциях. Математические операции являются одними из самых базовых и универсальных функций любого языка программирования. В JavaScript числа часто используются в общих задачах, таких как определение размеров окна браузера, вычисление окончательной цены денежной транзакции или расстояния между элементами в документе сайта. Чтобы быть хорошим разработчиком, иметь высокие навыки в математике не обязательно, однако для этого важно знать, какие типы операций доступны в JavaScript и как использовать их для выполнения практических задач. В отличие от других языков программирования, JavaScript имеет только один числовой тип данных; он не разделяет целые числа и числа с плавающей точкой. Это руководство расскажет об арифметических операторах, операторах присваивания и порядке операций с числовыми данными JavaScript. Арифметические операторыАрифметические операторы – это символы, которые определяют математические операции и возвращают результат. К примеру, в 3 + 7 = 10 символ + определяет синтаксис операции сложения. Многие операторы JavaScript знакомы вам из базовой математики, но есть также и несколько дополнительных операторов. Все арифметические операторы JavaScript представлены в следующей таблице.
Операторы сложения и вычитания доступны в JavaScript и могут использоваться для нахождения суммы и разности числовых значений. JavaScript имеет встроенный калькулятор, а математические операции могут выполняться непосредственно в консоли. Знак плюса позволяет складывать числа, например: Помимо операций с простыми числами JavaScript позволяет присваивать числа переменным и выполнять с ними вычисления. Для примера можно присвоить числовые значения переменным x и y, а результат поместить в z. // Assign values to x and y // Assign values to x and y // Assign values to x and y В JavaScript есть одна интересная особенность, которую следует учитывать и знать, — это результат сложения числа и строки. Мы знаем, что 1 + 1 должно равняться 2, но это уравнение выдаст неожиданный результат. let x = 1 + "1"; Вместо сложения чисел JavaScript преобразует все выражение в строки и объединяет их. Важно быть осторожным с динамической типизацией JavaScript, поскольку она может иметь нежелательные результаты. Сложение и вычитание в JavaScript часто используются для прокрутки панели навигации. function scrollToId() { В этом случае панель будет прокручиваться на 60 пикселей от id. Умножение и делениеОператоры умножения и деления JavaScript используются для поиска производного и частного числовых значений. Звездочка является оператором умножения. // Assign values to x and y Умножение можно использовать для расчета цены товара после введения налога с продаж. const price = 26.5; // Price of item before tax Слеш – оператор деления. // Assign values to x and y Деление особенно полезно при расчете времени, например, при вычислении количества часов или процента правильных ответов в тесте. Модуль числаМодуль – еще один арифметический оператор, менее популярный, чем предыдущие. Представлен символом %. Он возвращает остаток при делении первого числа на второе. К примеру, мы знаем, что 9 делится на 3 без остатка: Модуль числа позволяет определить четное или нечетное число, например: // Initialize function to test if a number is even В этом примере 12 делится на 2, следовательно, это четное число. В программировании модуль числа часто используется в сочетании с условными операторами. Возведение в степеньВозведение в степень – один из самых новых операторов JavaScript. Синтаксис возведения в степень – две звездочки подряд (**). К примеру, 10 в пятой степени (10^5) записывается так: 10 ** 5; Операция 10 ** 5 имеет тот же результат, что 10 * 10, повторенная 5 раз. 10 * 10 * 10 * 10 * 10; Также эту операцию можно записать с помощью метода Math.pow(). Math.pow(10, 5); Использование оператора возведения в степень – быстрый способ определить степень заданного числа, но, как обычно, при выборе между методом и оператором важно быть последовательными и писать код в одном стиле. Инкремент и декрементОператоры инкремента и декремента увеличивают или уменьшают числовое значение переменной на единицу. Они представлены двумя плюсами (++) или двумя минусами (—) и часто используются в циклах. Обратите внимание: операторы инкремента и декремента могут использоваться только с переменными. Попытка использовать их с простыми числами приведет к ошибке. 7++ Операторы инкремента и декремента можно классифицировать как префиксные и постфиксные операции, в зависимости от того, где по отношению к переменной размещен оператор. Префиксный инкремент записывается как ++х. // Set a variable Значение х увеличилось на 1. Постфиксный инкремент пишется как у++. // Set a variable Постфиксная операция не увеличила значение. Это значение не будет увеличиваться до тех пор, пока выражение не будет оценено. Для этого нужно запустить операцию дважды: let y = 7; Чаще всего эти операторы встречаются в циклах. В данном цикле for оператор запускается 10 раз, начиная с 0. // Run a loop ten times В этом примере итерация цикла выполняется с помощью оператора инкремента. Проще говоря, х++ можно воспринимать как сокращение от х = х + 1, а х-как сокращение от х = х – 1. Операторы присваиванияОдним из наиболее часто используемых операторов является оператор присваивания, который уже встречался в этом мануале. Он представлен знаком равенства (=). Символ = используется для присвоения значения справа переменной слева. // Assign 27 to age variable Помимо стандартного оператора присваивания JavaScript имеет составные операторы присваивания, которые комбинируют арифметический оператор с оператором =. К примеру, оператор добавления начнет с исходного значения и добавит к нему новое значение. // Assign 27 to age variable По сути, age += 3 – то же самое, что и age = age + 3. Все арифметические операторы можно объединять с оператором присваивания. Ниже приведена справочная таблица операторов присваивания в JavaScript. Составные операторы присваивания часто используются в циклах, как инкременты и декременты. Приоритет операторовОператоры выполняются в порядке приоритетности, как и в обычной математике. К примеру, умножение имеет более высокий приоритет, чем сложение. // First multiply 3 by 5, then add 10 Если сначала нужно выполнить операцию сложения, возьмите ее в круглые скобки – такие операции всегда имеют наивысший приоритет. // First add 10 and 3, then multiply by 5 Ниже вы найдете таблицу приоритета арифметических операторов в JavaScript. Для инкремента и декремента постфикс имеет более высокий приоритет, чем префикс. Инкремент/декремент, умножение/деление и сложение/вычитание имеют одинаковый уровень приоритета. Приоритет имеют не только арифметические операторы, но и операторы присваивания, логические операторы, условные операторы и т. д. Полный список можно посмотреть . Tags:Тип данных строка (string) используется для представления текста. Соответственно, значениями типа string является текст. Любой текст в JavaScript является строкой. КавычкиСтроки в JavaScript должны быть заключены в кавычки. В JavaScript существует три вида кавычек: двойные (" "), одинарные (" ") и обратные (` `): "Строка в двойных кавычках" "Строка в одинарных кавычках" `Строка в обратных кавычках` Вид кавычек в начале и конце строки должен совпадать. Строки могут состоять из нуля и более символов: "" // Пустая строка "Строка" // Не пустая строка Строки с двойными и одинарными кавычками ничем не отличаются между собой по функционалу - они могут содержать лишь текст и управляющие последовательности. А вот строки с обратными кавычками имеют более широкий функционал. Такие строки могут содержать так называемые подстановки , обозначаемые знаком доллара и фигурными скобками ${выражение} . Подстановки могут содержать любые произвольные выражения: Let стр = "Мир!"; let стр2 = `Привет, ${стр}`; // Использование переменной в строке alert(стр2); // Привет, Мир! alert(`2 + 3 = ${2 + 3}.`); // 2 + 3 = 5. Выражение, расположенное в подстановке (${...}) вычисляется, и его результат становится частью строки. Строки в обратных кавычках могут занимать более одной строки, сохраняя все пробельные символы: Let числа = `Числа: 1 2`; alert(числа); // Числа: // 1 // 2 Строки с обратными кавычками называются строками-шаблонами или шаблонными литералами . Строки, заключённые в одни кавычки, могут содержать другие кавычки: "одинарные "кавычки" и `обратные` внутри двойных" "а здесь "так" и `так`!" `а здесь "так" и "так"!` Для удобства, большие строковые литералы можно разбивать на несколько строк, заканчивая каждую строку, кроме последней, символом \ : Alert("это всё одна \ длинная \ строка"); // это всё одна длинная строка alert("это всё одна \ длинная \ строка"); // это всё одна длинная строка alert(`это всё одна \ длинная \ строка`); // это всё одна длинная строка Кодировка символов строкиВне зависимости от того, какая кодировка установлена для страницы, в JavaScript для строк всегда используется кодировка UTF-16. В JavaScript строка - это неизменяемая, упорядоченная последовательность 16-битных значений, каждое из которых представляет символ Unicode. Для представления символов Unicode в JavaScript используется кодировка UTF-16. Символы включают в себя буквы, цифры, знаки пунктуации, специальные символы и пробельные символы. Длина строкиДлина строки - это количество 16-битных значений (а не самих символов), содержащихся в ней. Длину строки содержит свойство length: Alert("Привет".length); // 6 Символы, кодовые пункты которых не умещаются в 16 бит, обрабатываются в соответствии с правилами кодировки UTF-16 как последовательности из двух 16-битных значений. Это означает, что строка, имеющая длину, равную 2 (два 16-битных значения), на деле может представлять единственный символ: Alert("a".length); // 1 alert("𝑒".length); // 2 Нумерация и доступ к символам строкиКак уже было сказано, строка представляет собой упорядоченную последовательность 16-битных значений, каждому из которых соответствует определённый символ. Нумерация 16-битных значений в строке начинается с нуля, т. е. первое 16-битное значение находится под индексом 0, второе - под индексом 1 и т. д. Индекс - это порядковый номер. Получить символ строки (состоящий из одного 16-битного значения) можно с помощью индекса, заключённого в квадратные скобки [индекс] : Let стр = "Привет"; alert(стр); // П alert(стр); // В Чтобы с помощью индексов обратиться к символу, состоящему из двух 16-битных значений, нужно, используя конкатенацию, написать эти индексы так, чтобы в результате получилась последовательность из двух 16-битных значений: Let стр = "𝑒"; alert(стр + стр); // "𝑒" Строки неизменяемыеВ JavaScript строки неизменяемые. Это значит, что в уже существующей строке нельзя менять никакие символы или добавлять в неё что-то новое. Так как строки неизменяемые, то методы, используемые для работы со строками, возвращают новые строки, а не изменяют ту строку, относительно которой они были вызваны: Let стр = "Привет!"; alert(стр.toUpperCase()); // "HELLO" - новое возвращаемое методом значение alert(стр); // "hello" - первоначальная строка не изменена Чтобы изменить строку, можно создать новую строку и записать её в ту же самую переменную вместо старой строки: Let стр = "Строка"; стр = стр.toUpperCase(); alert(стр); // "СТРОКА" Управляющие последовательностиВ строковых литералах можно использовать управляющие последовательности. Управляющая последовательность - это последовательность, состоящая из обычных символов, которая обозначает символ, не представимый внутри строки другими способами. Управляющие последовательности предназначены для форматирования вывода текстового содержимого. В таблице ниже представлены управляющие последовательности:
Управляющие последовательности могут находиться в любом месте строки: Alert("Греческая буква сигма: \u03a3."); // Греческая буква сигма: Σ. alert("Многострочная\nстрока") // Многострочная // строка alert("внутри используются \"двойные\" кавычки"); // внутри используются "двойные" кавычки Если символ \ предшествует любому символу, отличному от приведённых в таблице, то он просто игнорируется интерпретатором: Alert("\k"); // "k" Символы Unicode, указываемые с помощью управляющей последовательности, можно использовать не только внутри строковых литералов, но и в идентификаторах: Let a\u03a3 = 5; alert(a\u03a3); // 5 КонкатенацияКонкатенация - это объединение двух или более строк в одну большую. Объединение происходит с помощью оператора + (плюс). При конкатенации каждая последующая строка добавляется в конец предыдущей: Var str1 = "Hello ";
var str2 = "World!";
document.write(str1 + str2 + " Значение любого типа, которое объединяется со строкой, будет неявно (автоматически) преобразовано в строку и далее будет произведена конкатенация. Var str1 = "Hello "; alert(str1 + 1); // "Hello 1" alert(true + str1); // "trueHello" alert(str1 + NaN); // "Hello NaN" Последнее обновление: 1.11.2015 Математические операцииJavaScript поддерживает все базовые математические операции: Сложение : Var x = 10; var y = x + 50; Вычитание : Var x = 100; var y = x - 50; Умножение : Var x = 4; var y = 5; var z = x * y; Деление : Var x = 40; var y = 5; var z = x / y; Деление по модулю (оператор %) возвращает остаток от деления: Var x = 40; var y = 7; var z = x % y; console.log(z); // 5 Результатом будет 5, так как наибольшее целое число, которое меньше или равно 40 и при этом делится на 7 равно 35, а 40 - 35 = 5. Инкремент : Var x = 5; x++; // x = 6 Оператор инкремента ++ увеличивает переменную на единицу. Существует префиксный инкремент, который сначала увеличивает переменную на единицу, а затем возвращает ее значение. И есть постфиксный инкремент, который сначала возвращает значение переменной, а затем увеличивает его на единицу: // префиксный инкремент var x = 5; var z = ++x; console.log(x); // 6 console.log(z); // 6 // постфиксный инкремент var a = 5; var b = a++; console.log(a); // 6 console.log(b); // 5 Постфиксный инкремент аналогичен операции: A = a + 1; // a++ Декремент уменьшает значение переменной на единицу. Также есть префиксный и постфиксный декремент: // префиксный декремент var x = 5; var z = --x; console.log(x); // 4 console.log(z); // 4 // постфиксный декремент var a = 5; var b = a--; console.log(a); // 4 console.log(b); // 5 Как и принято в математике, все операции выполняются слева направо и различаются по приоритетам: сначала операции инкремента и декремента, затем выполняются умножение и деление, а потом сложение и вычитание. Чтобы изменить стандартный ход выполнения операций, часть выражений можно поместить в скобки: Var x = 10; var y = 5 + (6 - 2) * --x; console.log(y); //41 Операции присваиванияПриравнивает переменной определенное значение: var x = 5; Сложение с последующим присвоением результата. Например: Var a = 23; a += 5; // аналогично a = a + 5 console.log(a); // 28 Вычитание с последующим присвоением результата. Например: Var a = 28; a -= 10; // аналогично a = a - 10 console.log(a); // 18 Умножение с последующим присвоением результата: Var x = 20; x *= 2; // аналогично x = x * 2 console.log(x); // 40 Деление с последующим присвоением результата: Var x = 40; x /= 4; // аналогично x = x / 4 console.log(x); // 10 Получение остатка от деления с последующим присвоением результата: Var x = 10; x %= 3; // аналогично x = x % 3 console.log(x); // 1, так как 10 - 3*3 = 1 Как правило, для проверки условия используются операторы сравнения. Операторы сравнения сравнивают два значения и возвращают значение true или false: Оператор равенства сравнивает два значения, и если они равны, возвращает true, иначе возвращает false: x == 5 Оператор тождественности также сравнивает два значения и их тип, и если они равны, возвращает true, иначе возвращает false: x === 5 Сравнивает два значения, и если они не равны, возвращает true, иначе возвращает false: x != 5 Сравнивает два значения и их типы, и если они не равны, возвращает true, иначе возвращает false: x !== 5 Сравнивает два значения, и если первое больше второго, то возвращает true, иначе возвращает false: x > 5 Сравнивает два значения, и если первое меньше второго, то возвращает true, иначе возвращает false: x < 5 Сравнивает два значения, и если первое больше или равно второму, то возвращает true, иначе возвращает false: x >= 5 Сравнивает два значения, и если первое меньше или равно второму, то возвращает true, иначе возвращает false: x 50 && percent < 12; console.log(result); //true Возвращает true, если хотя бы одна операция сравнения возвращают true, иначе возвращает false: Var income = 100; var isDeposit = true; var result = income > 50 || isDeposit == true; console.log(result); //true Возвращает true, если операция сравнения возвращает false: Var income = 100; var result1 = !(income > 50); console.log(result1); // false, так как income > 50 возвращает true var isDeposit = false; var result2 = !isDeposit; console.log(result2); // true Строки могут использовать оператор + для объединения. Например: Var name = "Том"; var surname = "Сойер" var fullname = name + " " + surname; console.log(fullname); //Том Сойер Если одно из выражений представляет строку, а другое - число, то число преобразуется к строке и выполняется операция объединения строк: Var name = "Том"; var fullname = name + 256; console.log(fullname); //Том256 В конце напишем небольшую программу, которая продемонстрирует работу с операциями над переменными. Для этого определим следующую веб-страницу index.html: JavaScript var sum = 500; // сумма вклада var percent = 10; // процент по вкладу var income = sum * percent / 100; // доход по вкладу sum = sum + income; // определяем новую сумму console.log("Доход по вкладу: " + income); console.log("Сумма вклада после первого года: " + sum); В скрипте объявляются три переменных: sum, percent и income. Переменная income вычисляется по остальным двум переменным с помощью операций умножения и деления. И в конце ее значение суммируется с значением переменной sum. |