> Как реализовать функцию шаблонизатора строки с подстановкой параметров в JavaScript? (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Яндекс

Стек: JavaScript

> Пример ответа

Вот пример реализации простого шаблонизатора строк с подстановкой параметров:

JAVASCRIPT
function template(str, params) {
  return str.replace(/\$\{(\w+)\}/g, (match, key) => {
    return params.hasOwnProperty(key) ? params[key] : match;
  });
}

// Пример использования:
const greeting = template('Привет, ${name}! Тебе ${age} лет.', { name: 'Анна', age: 25 });
console.log(greeting); // "Привет, Анна! Тебе 25 лет."

Этот код использует регулярное выражение /\$\{(\w+)\}/g для поиска всех вхождений вида ${ключ}. Функция замены извлекает имя ключа и подставляет соответствующее значение из объекта params. Если ключ отсутствует, исходный шаблон остается без изменений.

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

JAVASCRIPT
function advancedTemplate(str, params) {
  return str.replace(/\$\{([^}]+)\}/g, (match, path) => {
    const keys = path.trim().split('.');
    let value = params;
    for (const key of keys) {
      if (value && typeof value === 'object' && key in value) {
        value = value[key];
      } else {
        return match; // или вернуть значение по умолчанию
      }
    }
    return value;
  });
}

// Пример:
const data = { user: { name: 'Иван' } };
console.log(advancedTemplate('Привет, ${user.name}!', data)); // "Привет, Иван!"

Такой подход безопаснее использования eval или new Function, так как не выполняет произвольный код, а только подставляет значения из переданного объекта.