Обратные кавычки, вызывающие функцию

Я не знаю, как это объяснить, но когда я бегу

console.log`1`

В google chrome я получаю такой вывод

console.log`1`
VM12380:2 ["1", raw: Array[1]]

Почему обратная кавычка вызывает функцию журнала и почему она делает индекс raw: Array[1]?

Вопрос, поднятый Catgocat в JS-комнате, но ни один из ответов не имел смысла, кроме чего-то о шаблонных строках, которые действительно не соответствовали тому, почему это происходит.

В ES-6 он называется Tagged Template, подробнее о них можно было прочитать Вот , забавно, я нашел ссылку в отмеченном звездочкой разделе того самого чата.

Но соответствующая часть кода ниже (вы можете создать фильтруемую сортировку).

function tag(strings, ...values) {
  assert(strings[0] === 'a');
  assert(strings[1] === 'b');
  assert(values[0] === 42);
  return 'whatever';
}
tag `a${ 42 }b`  // "whatever"

По сути, это просто пометка «1» функцией console.log, как это было бы с любой другой функцией. Функции маркировки принимают проанализированные значения строк шаблона и значения отдельно, на основе которых могут выполняться дальнейшие задачи.

Babel транслирует приведенный выше код в

var _taggedTemplateLiteralLoose = function (strings, raw) { strings.raw = raw; return strings; };

console.log(_taggedTemplateLiteralLoose(["1"], ["1"]));

Как вы можете видеть в приведенном выше примере, после переноса с помощью babel функции тегов (console.log) передается возвращаемое значение следующего транспилированного кода es6-> 5.

_taggedTemplateLiteralLoose( ["1"], ["1"] );

Возвращаемое значение этой функции передается в console.log, который затем распечатывает массив.

Тегированный литерал шаблона:

Следующий синтаксис:

function`your template ${foo}`;

Называется тегированным литералом шаблона.

Функция, которая вызывается как тегированный литерал шаблона, получает свои аргументы следующим образом:

function taggedTemplate(strings, arg1, arg2, arg3, arg4) {
  console.log(strings);
  console.log(arg1, arg2, arg3, arg4);
}

taggedTemplate`a${1}b${2}c${3}`;

1. Первый аргумент - это массив всех отдельных строковых символов.
2. Остающийся аргумент соответствует значениям переменных, которые мы получаем через интерполяцию строк. Обратите внимание, что в примере нет значения для arg4(потому что есть только трехкратная интерполяция строки) и, таким образом undefined, регистрируется, когда мы пытаемся записатьarg4

Используя синтаксис остальных параметров:

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

function taggedTemplate(strings, ...rest) {
  console.log(rest);
}

taggedTemplate `a${1}b${2}c${3}`;
taggedTemplate `a${1}b${2}c${3}d${4}`;