В какой момент выполнится функция вызванная в интерполяции строки

В какой момент выполнится функция вызванная в интерполяции строки

Функция, вызванная в интерполяции строки (строки с шаблонной подстановкой), выполнится во время обработки (парсинга) строки, то есть синхронно в момент выполнения кода, когда интерпретатор встречает эту строку.

Немедленное выполнение при обработке строки

В JavaScript есть два вида строк с подстановками:

1. Обычные строки с конкатенацией

const getName = () => {
  console.log("getName вызвана");
  return "John";
};

// Функция вызовется ДО создания строки
const message = "Hello, " + getName(); // Выведет: "getName вызвана"
console.log(message); // "Hello, John"

2. Template literals (шаблонные строки)

Темplate literals (обратные кавычки) работают так же — функция выполняется сразу при обработке строки:

const greet = () => {
  console.log("greet вызвана");
  return "Alice";
};

const text = `Hello, ${greet()}!`; // Выведет: "greet вызвана"
console.log(text); // "Hello, Alice!"

Порядок выполнения

Порядок выполнения функций в интерполяции — слева направо:

const a = () => { console.log("A"); return "a"; };
const b = () => { console.log("B"); return "b"; };
const c = () => { console.log("C"); return "c"; };

const result = `${a()} ${b()} ${c()}`;

// Вывод:
// A
// B
// C
// result = "a b c"

Сравнение с отложенным выполнением

Значительная разница с функциями, переданными как аргументы (колбэки):

// ❌ Функция выполнится СРАЗУ, вернет результат
const result1 = `Value: ${getValue()}`;

// ✅ Функция выполнится ПОЗЖЕ, когда её вызовут
const callback = getValue; // передали саму функцию
setTimeout(() => callback(), 1000); // выполнится через 1 сек

Практический пример

const fetchData = async () => {
  console.log("Начало загрузки");
  const response = await fetch("/api/data");
  return response.json();
};

// ❌ Это НЕ сработает — fetch отправится ДО создания строки
// и строка будет содержать Promise, а не результат
const url = `Data: ${fetchData()}`; // "Data: [object Promise]"

// ✅ Правильно — функция в обработчике события
button.addEventListener("click", async () => {
  const data = await fetchData();
  const message = `Data: ${data}`; // теперь дождались результата
});

В React компонентах

Когда функция вызывается в JSX интерполяции — она выполняется при рендере компонента:

function MyComponent() {
  const getTime = () => {
    console.log("Рендер компонента");
    return new Date().toLocaleTimeString();
  };

  return (
    <div>
      {/* getTime вызовется ПРИ КАЖДОМ РЕНДЕРЕ */}
      <p>Время: {getTime()}</p>
    </div>
  );
}

Если нужно избежать лишних вызовов:

import { useMemo } from "react";

function MyComponent() {
  // Функция выполнится только при изменении зависимостей
  const time = useMemo(() => {
    console.log("Вычисляем время");
    return new Date().toLocaleTimeString();
  }, []);

  return <p>Время: {time}</p>;
}

Ключевые выводы

• Интерполяция вызывает функцию синхронно и немедленно
• Порядок выполнения — слева направо
• В React — функция выполняется при каждом рендере
• Используй useMemo для оптимизации в React компонентах
• Не путай с колбэками — те выполняются в момент события, не в момент определения