support - template string javascript html

¿Cuál es el propósito de los literales de plantilla(comillas invertidas) después de una definición de variable en ES6?

Question

En GraphQL puedes escribir algo como esto para definir una consulta:

const USER_QUERY = gql`
  {
    user(id: 2) {
      name
    }
  }
`

En los componentes de estilo puede definir un componente de estilo como este:

const Button = styled.button`
    background-color: papayawhip;
`

¿Qué es esta sintaxis? Sé que con los literales de plantilla puede sububicar en variables con esta sintaxis: ${foo} pero nunca he visto esto usado. Cualquier orientación sería apreciada.

Answer 1

Estos son literales de plantilla etiquetados . La parte antes de las mochilas es una referencia a una función que se llamará para procesar la cadena.

La función pasa las variables (las partes ${} ) como argumentos, así como las partes de la cadena que rodean las variables divididas en una matriz. El valor de retorno de la función se convierte en el valor de la plantilla. Debido a este formato muy generalizado, puede hacer casi cualquier cosa con la función. Aquí hay un ejemplo rápido y sucio que toma las variables (reunidas en una matriz por conveniencia), las convierte en mayúsculas y las vuelve a colocar en la cadena:

function upperV(strings, ...vars) {
  /* make vars uppercase */
  console.log("vars: ", vars)       // an array of the passed in variables
  console.log("strings:", strings)  // the string parts

  // put them together
  return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}

let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${''man''} had split before...`;
console.log(output)

Answer 2

Los literales de plantilla tienen una característica adicional llamada plantillas etiquetadas. Ese es el prefijo antes de la apertura de apertura. El prefijo es en realidad el nombre de una función: la función pasa las partes constantes de las cadenas de la plantilla y los valores interpolados (cosas en las secciones ${} ) y puede procesar la cadena resultante en lo que quiera (aunque generalmente otra cadena, no tiene que ser).

Vea esta página en MDN para obtener más detalles sobre cómo funcionan las plantillas etiquetadas.