$ sudo teach IT

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

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

Что вы узнаете в рамках статьи

  • Какие математические операторы есть в JavaScript и как ими пользоваться.
  • Как использовать оператор остатка от деления и возведение в степень.
  • Что такое конкатенация строк и как она работает.
  • Как применять интерполяцию (шаблонные строки) для более читаемого кода.

Ключевые термины

  • Примитив — неизменяемое значение простого типа данных (числа, строки, булевы значения и др.).
  • Математический оператор — специальный символ или комбинация символов, выполняющая арифметические операции.
  • Конкатенация — объединение двух или более строк в одну.
  • Интерполяция — встраивание переменных или выражений внутрь строки с использованием шаблонных литералов.
  • Остаток от деления (%) — часть, которая остаётся после деления числа на другое число без остатка.

1. Математические операторы

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

Сложение (+)

Оператор + складывает два числа и возвращает их сумму.

const sum = 5 + 3; // 8

Важно: если хотя бы один из операндов — строка, то + будет работать как оператор конкатенации строк, а не сложения:

console.log(5 + "3"); // "53", а не 8

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

Вычитание (-)

Оператор - вычитает второе число из первого.

const difference = 10 - 4; // 6

Работает только как математическая операция, даже если один из операндов — строка с числом:

console.log("10" - 4); // 6

Полезно, например, для расчёта оставшегося времени или количества оставшихся предметов.

Умножение (*)

Оператор * перемножает два числа.

const product = 6 * 7; // 42

Часто используется для вычисления масштабов, цен с коэффициентом, площади и т.д.

Деление (/)

Оператор / делит первое число на второе.

const quotient = 20 / 5; // 4

Если деление не нацело, результат будет с плавающей точкой:

console.log(7 / 2); // 3.5

Особенность: деление на ноль в JavaScript не вызывает ошибку, а возвращает Infinity или -Infinity, а 0 / 0 — NaN.

Остаток от деления (%)

Оператор % возвращает остаток после деления одного числа на другое.

const remainder = 10 % 3; // 1

Пример из жизни: у вас 10 яблок и 3 друга. Каждому можно выдать по 3 яблока, и 1 яблоко останется — это и есть остаток.

Остаток часто используется:

  • для определения чётности числа (num % 2 === 0);
  • для циклического перебора элементов (например, при переключении слайдов);
  • в игровых механиках, когда нужно «сбрасывать» счётчик.

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

Оператор ** возводит число в заданную степень.

const power = 2 ** 3; // 8

Это аналог Math.pow(2, 3), но более короткий и читаемый.

Используется:

  • в математических расчётах;
  • при вычислении геометрических величин;
  • в финансовых формулах (например, процент с капитализацией).

2. Операторы работы со строками

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

Строки часто используют для вывода сообщений, хранения имён пользователей, формирования шаблонов писем, URL-адресов и множества других задач.

Конкатенация (+)

Оператор + объединяет две или более строки в одну. Это один из самых старых способов соединения текста в JavaScript.

const greeting = "Привет, ";
const name = "Мир!";
const message = greeting + name;
console.log(message); // "Привет, Мир!"

Особенности:

Если хотя бы один из операндов — строка, + выполняет конкатенацию, а не сложение чисел:

console.log(5 + "5"); // "55"

Конкатенацию можно использовать для «склеивания» значений переменных и текста:

const product = "ноутбук";
const price = 50000;
console.log("Цена на " + product + " — " + price + " рублей.");

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

Длина строки (.length)

Свойство .length возвращает количество символов в строке, включая пробелы и специальные символы.

const str = "Hello";
console.log(str.length); // 5

Примеры применения:

Проверка длины пароля:

const password = "12345";
if (password.length < 8) {
  console.log("Пароль слишком короткий!");
}

Ограничение текста в интерфейсе (например, обрезка длинного заголовка).

Важно: .length — это свойство, а не метод, поэтому оно используется без скобок.

Интерполяция (шаблонные строки)

Интерполяция — это встраивание значений переменных и выражений прямо внутрь строки с использованием шаблонных литералов (обратных кавычек ```).

const user = "Алексей";
console.log(`Привет, ${user}!`); // "Привет, Алексей!"

Преимущества:

Можно подставлять не только переменные, но и выражения:

const a = 5;
const b = 3;
console.log(`Сумма: ${a + b}`); // "Сумма: 8"

Поддерживает многострочные строки без дополнительных символов \n:

const text = `Это первая строка
А это вторая строка`;

console.log(text);

Частая ошибка: использование одинарных ' или двойных " кавычек вместо обратных. В таком случае подстановка не произойдёт:

console.log('Привет, ${user}'); // Выведет: Привет, ${user}

Наиболее частые ошибки

Использование + для чисел и строк без понимания типа

console.log(5 + "5"); // "55", а не 10

Причина: + для строки превращает числа в строки и выполняет конкатенацию.

Забывают про скобки в сложных выражениях

console.log(2 + 3 * 4); // 14, а не 20

Сначала выполняется умножение, потом сложение.

Неверное использование шаблонных строк

console.log('Привет, ${name}'); // Выведет текст без подстановки

Нужно использовать обратные кавычки ```, а не одинарные или двойные.

Наиболее частые вопросы

Вопрос: Можно ли использовать интерполяцию без обратных кавычек?

Ответ: Нет, интерполяция работает только с шаблонными литералами (обратные кавычки).

Вопрос: Почему 10 + "5" даёт "105"?

Ответ: Потому что JavaScript преобразует число к строке и выполняет конкатенацию.

Вопрос: Как округлить число?

Ответ: С помощью Math.round(), Math.floor(), Math.ceil().

Итоги

Сегодня мы:

  • Изучили основные математические операторы (+, , , /, %, *).
  • Узнали, как работать со строками: конкатенация, длина строки, интерполяция.
  • Разобрали типичные ошибки, чтобы их избежать в будущем.

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

 

На следующий урок