Как пользовательская функция тега работает с теговой строкой шаблона в JavaScript?

Question

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

Эта строка - мой главный вопрос:

let str = tag`My age is ${a + b} and I love ${c}`;

как тег работает здесь как функция.

let tag = function (strings, ...values) {
    let result = "";
    for (let i = 0; i < strings.length; i++) {
        result += strings[i];
        if (i < values.length) {
            result += values[i];   
        }
    }
    return result;
};

let a = 20;
let b = 12;
let c = "JavaScript";
let str = tag`My age is ${a + b} and I love ${c}`;
console.log(str);

вывод правильный, который: Мой возраст 32 года, и я люблю JavaScript

Answer 1

Этот синтаксис:

let str = tag`My age is ${a + b} and I love ${c}`;

описано здесь в MDN . Они называются «теговыми шаблонами». Они позволяют добавлять пользовательскую логику функции, которая может влиять на способ построения результата литерала шаблона, и функция шаблона получает доступ к элементам проанализированной строки шаблона.

В приведенной выше ссылке на MDN есть несколько примеров различных способов использования теговых шаблонов.