1. Строки в JavaScript
Строка — это просто текст. Любой текст: "Привет, мир!", "42", "JavaScript — это весело!", "user@example.com". В программировании строка — это последовательность символов, заключенная в кавычки.
В JavaScript строки можно записывать тремя способами:
- В двойных кавычках: "Привет"
- В одинарных кавычках: 'Мир'
- В обратных кавычках (шаблонные литералы): `Hello, JS!`
Пример:
let message1 = "Это строка в двойных кавычках";
let message2 = 'А это — в одинарных';
let message3 = `А это — в обратных (шаблонных) кавычках`;
Все три способа работают одинаково для хранения текста. Выбор стиля — дело вкуса, но про обратные кавычки мы поговорим чуть позже, потому что они умеют кое-что особенное.
Почему нужны строки?
- Для вывода сообщений пользователю.
- Для хранения имен, email, адресов и вообще любого текста.
- Для динамического формирования HTML-кода (да, это тоже бывает).
Аналогия:
Если числа — это кирпичи для расчетов, то строки — это кирпичи для общения с пользователем и хранения любой текстовой информации.
2. Конкатенация строк: склеиваем текст
Конкатенация — это не страшное заклинание, а всего лишь "склеивание" строк между собой. В JavaScript для этого используется оператор +.
Пример:
let firstName = "Иван";
let lastName = "Иванов";
let fullName = firstName + " " + lastName;
console.log(fullName); // Иван Иванов
Здесь мы склеили две переменные и добавили между ними пробел (иначе получится "ИванИванов" — а это уже не очень читаемо).
Можно склеивать сколько угодно строк:
let greeting = "Привет, " + firstName + " " + lastName + "!";
console.log(greeting); // Привет, Иван Иванов!
Можно склеивать строки и числа:
let age = 25;
let info = "Возраст: " + age;
console.log(info); // Возраст: 25
Внимание! Если вы складываете строку и число, результат — всегда строка (JavaScript автоматически преобразует число в строку).
3. Шаблонные литералы: магия обратных кавычек
Шаблонные литералы — это строки, которые заключаются не в обычные кавычки, а в обратные (` — они же backticks, обычно слева от цифры 1 на клавиатуре). Они позволяют вставлять переменные прямо внутрь строки с помощью конструкции ${...}.
Пример:
let name = "Мария";
let age = 30;
let message = `Меня зовут ${name}. Мне ${age} лет.`;
console.log(message); // Меня зовут Мария. Мне 30 лет.
Почему это удобно?
- Не нужно склеивать строки с помощью +.
- Можно вставлять любые выражения:
let a = 5;
let b = 10;
let sum = `Сумма: ${a + b}`;
console.log(sum); // Сумма: 15
- Можно писать многострочные строки:
let poem = `Роза красная,
Фиалка синяя,
JS прекрасен,
И это не шутка!`;
console.log(poem);
Когда использовать шаблонные литералы?
- Когда нужно вставить переменные или выражения в текст.
- Когда строка длинная или многострочная.
- Когда хочется выглядеть современно и стильно (шутка, но в каждой шутке…).
| Склейка через + | Шаблонный литерал |
|---|---|
|
|
|
|
4. Boolean: логический тип
Что такое boolean?
В программировании часто нужно отвечать на вопросы "Да или нет?", "Истина или ложь?", "Выполнено или нет?". Для этого существует специальный тип данных — boolean (логический тип).
В JavaScript всего два значения boolean:
- true — истина
- false — ложь
Примеры:
let isOnline = true;
let isAdmin = false;
console.log(isOnline); // true
console.log(isAdmin); // false
Где используются boolean?
- В условиях (if), чтобы решать, выполнять ли какой-то код.
- Для хранения состояния (например, "пользователь авторизован?").
- В логических выражениях и сравнениях.
Пример:
let age = 18;
let isAdult = age >= 18; // true
console.log(isAdult); // true
Здесь выражение age >= 18 возвращает true, если возраст больше или равен 18, и false — если меньше. Подробнее о сравнениях мы поговорим в одной из следующих лекций.
5. Примеры: объединяем знания
Давайте попробуем собрать вместе строки, числа и boolean, чтобы увидеть, как они могут работать в одном простом приложении. Мы продолжаем развивать ваше учебное "приветственное приложение".
Пример 1: Формируем приветствие
let userName = "Алексей";
let userAge = 22;
let greeting = `Привет, ${userName}! Тебе уже ${userAge} года?`;
console.log(greeting); // Привет, Алексей! Тебе уже 22 года?
Пример 2: Проверяем совершеннолетие
let isAdult = userAge >= 18;
console.log(`Совершеннолетний: ${isAdult}`); // Совершеннолетний: true
Пример 3: Комбинируем всё вместе
let message = `Пользователь: ${userName}
Возраст: ${userAge}
Совершеннолетний: ${isAdult}`;
console.log(message);
/*
Пользователь: Алексей
Возраст: 22
Совершеннолетний: true
*/
Пример 4: Склейка строк по-старому и по-новому
// Старый способ
let oldWay = "Имя: " + userName + ", возраст: " + userAge;
// Новый способ
let newWay = `Имя: ${userName}, возраст: ${userAge}`;
console.log(oldWay);
console.log(newWay);
6. Особенности работы со строками и boolean
Строки — это не числа!
Если вы попробуете сложить строку и число, получится строка:
let str = "10";
let num = 5;
let result = str + num;
console.log(result); // "105"
А если захотите сложить две строки, которые выглядят как числа:
let a = "2";
let b = "3";
console.log(a + b); // "23"
Внимание: если хотите получить сумму чисел, убедитесь, что складываете именно числа, а не строки.
Boolean в условиях
Boolean-значения чаще всего используются в условиях:
let isMember = true;
if (isMember) {
console.log("Добро пожаловать в клуб!");
} else {
console.log("Только для членов клуба.");
}
Подробнее об условиях в следующих лекциях :P
7. Многострочные строки и спецсимволы
С помощью обычных кавычек ('...' или "...") нельзя просто так писать многострочные строки. Если попробуете, получите ошибку.
Неправильно:
let text = "Это первая строка
А это вторая"; // Ошибка!
Правильно:
С помощью \n (символ новой строки):
let text = "Это первая строка\nА это вторая";
console.log(text);
// Это первая строка
// А это вторая
Или с помощью шаблонных литералов:
let text = `Это первая строка
А это вторая`;
console.log(text);
// Это первая строка
// А это вторая
Спецсимволы в строках
| Символ | Что делает |
|---|---|
|
Перевод строки |
|
Табуляция (отступ) |
|
Одинарная кавычка |
|
Двойная кавычка |
|
Обратный слэш |
Пример:
let poem = "Роза красная,\n\tФиалка синяя.";
console.log(poem);
// Роза красная,
// Фиалка синяя.
8. Типичные ошибки при работе со строками и boolean
Ошибка №1: Путаница кавычек
Если вы начали строку с двойной кавычки, завершайте тоже двойной! То же самое с одинарной. А вот в шаблонных литералах — только обратные кавычки.
let s = "Hello'; // Ошибка!
let t = `Привет"; // Ошибка!
Ошибка №2: Склейка строк и чисел
Если вы складываете строку и число, результат — строка, а не число. Это приводит к неожиданным результатам.
let a = "5";
let b = 10;
console.log(a + b); // "510" (а не 15!)
Ошибка №3: Попытка использовать многострочную строку в обычных кавычках
Нельзя писать многострочные строки в одинарных или двойных кавычках без спецсимволов или шаблонных литералов.
let text = "Строка
нельзя так писать"; // Ошибка!
Ошибка №4: Присваивание не-boolean значения переменной, предполагая, что это boolean
Иногда забывают, что результат сравнения — это boolean, а не строка.
let isAdult = "age >= 18"; // Это строка, а не boolean!
Ошибка №5: Использование переменных до их объявления
JavaScript позволяет "подсовывать" переменные в шаблонные литералы, но если переменная не объявлена — будет ошибка.
console.log(`Привет, ${userName}`); // ReferenceError, если userName не объявлен
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ