Comillas invertidas (`…`) llamando a una función en JavaScript
No estoy seguro de cómo explicar esto, pero cuando ejecuto
console.log`1`
En Google Chrome, obtengo resultados 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é crea un índice de raw: Array[1]?
Pregunta planteada en la sala JS por Catgocat, pero ninguna respuesta tenía sentido, aparte de algo sobre la creación de plantillas para cadenas que realmente no encajaban con el motivo por el que esto sucede.
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 se encuentra a continuación (básicamente puedes 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, se trata simplemente de 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 plantilla y los valores por separado sobre los cuales se pueden realizar tareas adicionales.
Babel transpila el código anterior a
var _taggedTemplateLiteralLoose = function (strings, raw) { strings.raw = raw; return strings; };
console.log(_taggedTemplateLiteralLoose(["1"], ["1"]));
Como puede verlo en el ejemplo anterior, después de ser transpilado por babel, a la función de etiquetado (console.log) se le 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.
Literal de plantilla etiquetado:
La siguiente sintaxis:
function`your template ${foo}`;
Se denomina 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}`;- El primer argumento es una matriz de todos los caracteres de cadena individuales.
- El argumento restante 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 una interpolación de cadena de 3 veces) y, por lo tanto,undefinedse registra cuando intentamos iniciar sesión.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 plantilla, suele resultar útil utilizar 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}`;