Строки и шаблонные строки

Строки — один из самых используемых типов данных в JavaScript. Любой текст на экране, любое сообщение, любой URL — это строки. Разберём их подробно: кавычки, конкатенация, шаблонные строки и главные методы работы с текстом.

📜 Строка — это последовательность символов

Строка (string) — это последовательность символов: букв, цифр, пробелов, знаков препинания, эмодзи — чего угодно. Думайте о строке как о бусах: каждая бусина — один символ, все вместе — строка. Символы в строке идут один за другим и имеют порядковые номера (индексы), начиная с 0.

// Строки можно создавать тремя видами кавычек:
let str1 = "Привет, мир!";      // двойные кавычки
let str2 = 'Hello, World!';      // одинарные кавычки
let str3 = `Бэктик-строка`;      // обратные кавычки (template literals)

// Нельзя смешивать кавычки:
// let bad = "неправильно';     // ошибка!

// Одинарная кавычка внутри двойных — нормально:
let apostrophe = "It's fine";
// И наоборот:
let quote = 'Он сказал "привет"';

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

➕ Конкатенация — склейка строк

Конкатенация — это соединение (склейка) строк. В JavaScript для этого используется оператор +. Тот же плюс, что складывает числа — но если хотя бы один операнд строка, он клеит строки.

let firstName = "Иван";
let lastName = "Петров";

// Конкатенация через +:
let fullName = firstName + " " + lastName;
console.log(fullName);  // "Иван Петров"

let age = 25;
let message = "Меня зовут " + firstName + ", мне " + age + " лет";
console.log(message);   // "Меня зовут Иван, мне 25 лет"

Конкатенация через + работает, но быстро становится некрасивой. Посмотрите на этот ужас:

// Неудобная конкатенация:
let product = "Ноутбук";
let price = 79990;
let discount = 10;
let msg = "Товар: " + product + ", цена: " + price + "₽, скидка: " + discount + "%. Итого: " + (price * (1 - discount / 100)) + "₽";
// Ужасно читать и легко ошибиться!

Именно для решения этой проблемы и были придуманы шаблонные строки.

✨ Шаблонные строки (Template Literals)

Шаблонные строки — это строки в обратных кавычках (backticks: `), которые поддерживают вставку выражений через синтаксис ${выражение}. Это называется интерполяция.

let name = "Мария";
let age = 28;
let city = "Казань";

// Старый способ (конкатенация):
let old = "Привет, " + name + "! Тебе " + age + " лет. Город: " + city;

// Новый способ (шаблонная строка):
let modern = `Привет, ${name}! Тебе ${age} лет. Город: ${city}`;

console.log(modern);
// Привет, Мария! Тебе 28 лет. Город: Казань

Внутри ${...} можно писать любое JavaScript-выражение — не только переменные, но и вычисления, вызовы функций:

let price = 1000;
let qty = 3;

console.log(`Итого: ${price * qty} ₽`);           // Итого: 3000 ₽
console.log(`2 + 2 = ${2 + 2}`);                   // 2 + 2 = 4
console.log(`Заглавные: ${"hello".toUpperCase()}`); // Заглавные: HELLO

let user = { name: "Антон", isPremium: true };
console.log(`${user.name}: ${user.isPremium ? "Premium" : "Free"}`);
// Антон: Premium

Шаблонные строки также поддерживают многострочный текст без специальных символов:

// Многострочная шаблонная строка:
let html = `
  <div class="card">
    <h2>${user.name}</h2>
    <p>Статус: ${user.isPremium ? "Premium" : "Free"}</p>
  </div>
`;
// Переносы строк сохраняются!

🛠️ Методы строк

У строк есть встроенные методы (функции) для работы с текстом. Метод вызывается через точку после строки: строка.метод(). Разберём самые важные.

let str = "Привет";
console.log(str.length);    // 6
console.log("".length);     // 0
console.log("   ".length);  // 3 (пробелы тоже считаются!)

let name = "алиса";
console.log(name.toUpperCase());  // "АЛИСА"
console.log(name.toLowerCase());  // "алиса" (не изменилась)

let email = "User@Example.COM";
console.log(email.toLowerCase()); // "user@example.com" — удобно для сравнения email

let text = "JavaScript — это круто!";
console.log(text.includes("круто"));    // true
console.log(text.includes("Python"));   // false
console.log(text.includes("javascript")); // false — регистр важен!

let str = "Привет, мир!";
console.log(str.indexOf("мир"));  // 8 (символ 'м' стоит на позиции 8)
console.log(str.indexOf("!"));    // 11
console.log(str.indexOf("xyz"));  // -1 (не найдено)

let str = "JavaScript";
//         0123456789

console.log(str.slice(0, 4));   // "Java"
console.log(str.slice(4));      // "Script" (до конца)
console.log(str.slice(-6));     // "Script" (последние 6 символов)
console.log(str.slice(0, -6));  // "Java"

let str = "Привет, мир! Привет, JavaScript!";
console.log(str.replace("Привет", "Здравствуй"));
// "Здравствуй, мир! Привет, JavaScript!" (только первое)

console.log(str.replaceAll("Привет", "Здравствуй"));
// "Здравствуй, мир! Здравствуй, JavaScript!" (все)

let input = "  Иван  ";
console.log(input.trim());        // "Иван"
console.log(input.trimStart());   // "Иван  " (только начало)
console.log(input.trimEnd());     // "  Иван" (только конец)

let str = "яблоко,банан,апельсин";
let fruits = str.split(",");
console.log(fruits);  // ["яблоко", "банан", "апельсин"]

let sentence = "Привет мир";
let words = sentence.split(" ");
console.log(words);   // ["Привет", "мир"]

let chars = "JS".split("");
console.log(chars);   // ["J", "S"] (разбить на символы)

✅ Итоги урока

• Строка — последовательность символов. Создаётся в одинарных, двойных или обратных кавычках
• Конкатенация через + — склейка строк, но быстро становится неудобной
• Шаблонные строки (`${переменная}`) — современный и чистый способ подставить значения в текст
• .length — длина строки
• .toUpperCase() / .toLowerCase() — изменение регистра
• .includes() — проверить, содержит ли строку подстроку (true/false)
• .indexOf() — найти позицию подстроки (-1 если не найдено)
• .slice(start, end) — вырезать часть строки
• .replace() / .replaceAll() — замена подстроки
• .trim() — убрать пробелы по краям
• .split() — разбить строку на массив по разделителю