Ticks invertidos llamando a una función

No estoy seguro de cómo explicar esto, pero cuando corro

console.log`1`

En Google Chrome, obtengo una salida como

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

¿Por qué la comilla invertida llama a la función de registro y por qué hace un índice de raw: Array[1]?

Pregunta planteada en la sala JS por Catgocat, pero ninguna respuesta tenía sentido además de algo sobre las cadenas de plantillas que realmente no encajaban con el motivo de esto.

Se llama Plantilla etiquetada en ES-6. Se puede leer más sobre ellos. Aquí , es curioso. Encontré el enlace en la sección destacada del mismo chat.

Pero la parte relevante del código está debajo (básicamente puede crear una clasificación filtrada).

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

Básicamente, es simplemente etiquetar el "1" con la función console.log, como lo haría con cualquier otra función. Las funciones de etiquetado aceptan valores analizados de cadenas de plantillas y los valores por separado sobre los que se pueden realizar más tareas.

Babel transpila el código anterior a

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

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

Como puede ver en el ejemplo anterior, después de ser transpilado por babel, a la función de etiquetado (console.log) se le está pasando el valor de retorno del siguiente código es6-> 5 transpilado.

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

El valor de retorno de esta función se pasa a console.log que luego imprimirá la matriz.

Plantilla con etiqueta literal:

La siguiente sintaxis:

function`your template ${foo}`;

Se llama literal de plantilla etiquetada.

La función que se llama como un literal de plantilla etiquetado recibe sus argumentos de la siguiente manera:

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

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

1. El primer argumento es una matriz de todos los caracteres de cadena individuales
2. El argumento restante se corresponde con los valores de las variables que recibimos mediante interpolación de cadenas. Observe en el ejemplo que no hay ningún valor para arg4(porque solo hay interpolación de cadenas 3 veces) y, por lo tanto, undefinedse registra cuando intentamos registrararg4

Usando la sintaxis del parámetro rest:

Si no sabemos de antemano cuántas veces se llevará a cabo la interpolación de cadenas en la cadena de la plantilla, a menudo es útil usar la sintaxis del parámetro rest. Esta sintaxis almacena los argumentos restantes que recibe la función en una matriz. Por ejemplo:

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

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