javascript - strings - Backticks llamando a una función

template string javascript

Question

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

console.log`1`

En google chrome, obtengo resultados como

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

¿Por qué el backtick llama a la función de registro, y por qué está haciendo 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 plantillas de cadenas que realmente no encajaban por qué está sucediendo esto.

Answer 1

Etiquetado literal de la plantilla:

La siguiente sintaxis:

function`your template ${foo}`;

Se llama literalmente la plantilla etiquetada.

La función que se llama como literal de plantilla etiquetada 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 corresponde con los valores de las variables que recibimos a través de la interpolación de cadenas. Observe en el ejemplo que no hay valor para arg4 (porque solo hay 3 veces la interpolación de cadena) y, por lo tanto, se registra undefined cuando intentamos registrar arg4

Usando la sintaxis del parámetro rest:

Si no sabemos de antemano cuántas veces se realizará la interpolación de cadenas en la cadena de la plantilla, a menudo es útil utilizar la sintaxis del parámetro rest. Esta sintaxis almacena los argumentos restantes que la función recibe 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}`;

Answer 2

Se llama Plantilla etiquetada en ES-6. Se podría leer más sobre ellos. Here , curioso, encontré el enlace en la sección destacada del chat.

Pero la parte relevante del código está debajo (básicamente puede crear una ordenació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 cuales 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 que babel la transpilara, la función de etiquetado (console.log) pasa el valor de retorno del siguiente código transpilado es6-> 5.

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

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