Переменные в JavaScript могут хранить значения разных типов. Но каждое значение в JavaScript имеет строго определенный тип.
Начнем с отличий между строками и числами.
Строки
Любая текстовая информация в JavaScript считается строкой.
Чтобы создать строку — оберни текст в кавычки.
Кавычки могут быть одинарными, двойными или косыми.
let hello = 'Hello, World!';
let name = "John";
let s = `some string`;
Во всех трех случаях в переменных hello, name и s будут сохранены строки.
Строки можно склеивать между собой используя оператор +
let name = 'Jack';
let surname = 'Jones';
let fullName = name + surname;
Попробуем вывести на экран значение переменной fullName:
console.log(fullName);
И увидим сообщение
JackJones
Чтобы добавить пробел между Jack и Jones, нам нужно немного изменить начальный код.
Начнем все так же со строки Jack добавим к ней строку состоящую из одного символа (пробел) и в конце приклеим строку Jones.
Так как строки Jack и Jones хранятся в переменных name и surname, мы можем использовать их.
let fullName = name + ' ' + surname;
console.log(fullName);
Вывод на экран изменится и между именем и фамилией появится пробел.
Jack Jones
Числа
Кроме строк, в JavaScript переменные часто сохраняют числа. Числа могут быть любыми. Отрицательными, положительными или с плавающей точкой.
let a = 1;
let b = 0.5;
let c = -15.25;
let year = 2021;
Выше мы создали 4 переменные a, b, c и year и сохранили в них числовые значения 1, 0.5, -15.25 и 2021.
Обрати внимание, что в этот раз мы не использовали кавычки.
Числа можно вывести на экран так же, как и строки.
console.log(year);
console.log(c);
Мы увидим на экране два сообщения:
2021
-15.25
Отличия между числами и строками становятся очевидны, когда мы попробуем сложить их.
let x = 2;
let y = 3;
let sum = x + y;
console.log(sum);
В результате выполнения этой программы на экране появится число 5.
Попробуем проверить, что будет, если мы обернем значения переменных x и y в кавычки:
let x = '2';
let y = '3';
let sum = x + y;
console.log(sum);
В этом случае на экране появится строка 23, так как JavaScript просто склеит строки 2 и 3, не применяя арифметическую операцию сложения.
Динамическая типизация
JavaScript — это язык с динамической типизацией. Это значит, что тип переменной не закреплен за ней жестко и определяется тем, что в этой переменной хранится.
Мы можем создать переменную, сохранить в нее строку, а потом перезаписать ее и сохранить число.
let x = 1;
let y = 2;
console.log(x + y);
y = 'hello';
console.log(x + y);
Мы сохранили числа 1 и 2 в переменные x и y. После этого, вывели на экран их сумму. Никаких сюрпризов и в консоли появилось значение 3.
После этого, мы перезаписали значение переменной y и сохранили в ней строку hello. Теперь JavaScript не может выполнить арифметическое сложение и на экране появится строка 1hello.
3
1hello
Практические задачи
Попробуем вывести на экран значение переменных и на разберемся на практике в отличиях между строками и числами в JS.
Задача 1
Перед программистом стояла задача сохранить числа 2 и 3 в переменные x и y и вывести их сумму на экран. Похоже что он ошибся и вместо чисел сохранил строки.
let x = '2';
let y = '3';
console.log(x + y);
Перепиши код, измени строки на числа убрав кавычки и нажми “ЗАПУСК”.
Задача 2
В этой задаче переменные были созданы, но остались пустыми.
let greeting = '';
let name = '';
console.log(greeting + ' ' + name);
Сохрани строки Hello и Hero в переменные greeting и name и нажми “ЗАПУСК”.
Задача 3
На экране должна появиться строка 2 + 2 = 4, а вместо этого мы получили ошибку.
const result = 4;
console.log('2 + 2 = ' + x);
Найди проблему, исправь ее и нажми “ЗАПУСК”.
Задача 4
Начинаем с чистого листа. Выведи на экран 3 числа — 0, 2.5 и -100 и нажми “ЗАПУСК”.
Каждое число должно быть выведено с новой строки.