Переменные в JavaScript могут хранить значения разных типов. Но каждое значение в JavaScript имеет строго определенный тип.

Начнем с отличий между строками и числами.

Начни Учить Full-Stack 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 и нажми “ЗАПУСК”.

Каждое число должно быть выведено с новой строки.