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

let name = "Иван";

// Обычная строка
let greeting1 = "Привет, " + name + "!";

// Шаблонная строка
let greeting2 = `Привет, ${name}!`;

console.log(greeting1); // "Привет, Иван!"
console.log(greeting2); // "Привет, Иван!"

let a = 5;
let b = 3;

console.log(`${a} + ${b} = ${a + b}`);
// "5 + 3 = 8"

console.log(`${a} > ${b}: ${a > b}`);
// "5 > 3: true"

console.log(`Квадрат: ${a ** 2}`);
// "Квадрат: 25"

function getGreeting(name) {
  return `Привет, ${name}!`;
}

console.log(`Сообщение: ${getGreeting("Мария")}`);
// "Сообщение: Привет, Мария!"

let name = "иван";

console.log(`Имя: ${name.toUpperCase()}`);
// "Имя: ИВАН"

let age = 20;

console.log(`Статус: ${age >= 18 ? "взрослый" : "ребёнок"}`);
// "Статус: взрослый"

// Обычная строка — нужен \n
let text1 = "Строка 1\nСтрока 2\nСтрока 3";

// Шаблонная строка — просто переносы
let text2 = `Строка 1
Строка 2
Строка 3`;

console.log(text1);
console.log(text2);

let user = {
  name: "Иван",
  age: 25,
  city: "Москва"
};

let html = `
<div class="user-card">
  <h2>${user.name}</h2>
  <p>Возраст: ${user.age}</p>
  <p>Город: ${user.city}</p>
</div>
`;

console.log(html);

let items = ["яблоко", "банан", "апельсин"];

let list = `
<ul>
  ${items.map(item => `<li>${item}</li>`).join("\n  ")}
</ul>
`;

console.log(list);
// <ul>
//   <li>яблоко</li>
//   <li>банан</li>
//   <li>апельсин</li>
// </ul>

// Обратная кавычка внутри шаблона
console.log(`Используй \`обратные кавычки\``);

// Символ $
console.log(`Цена: \$100`);

// Или просто
console.log(`Цена: ${"$"}100`);

function highlight(strings, ...values) {
  let result = "";
  strings.forEach((str, i) => {
    result += str;
    if (values[i] !== undefined) {
      result += `**${values[i]}**`;
    }
  });
  return result;
}

let name = "Иван";
let age = 25;

console.log(highlight`Имя: ${name}, возраст: ${age}`);
// "Имя: **Иван**, возраст: **25**"