JavaScript
Literales de plantilla

Introducción

Sintaxis

• message = `¡Bienvenido, $ {user.name}!`
• pattern = new RegExp (String.raw`Welcome, (\ w +)! `);
• query = SQL`INSERT INTO Usuario (nombre) VALORES ($ {nombre}) `

Observaciones

Interpolación básica y cuerdas multilínea.

Los literales de plantilla son un tipo especial de cadena literal que se puede usar en lugar del estándar '...' o "..." . Se declaran citando la cadena con comillas en lugar de las comillas simples o dobles: `...` .

Los literales de plantilla pueden contener saltos de línea y se pueden incrustar expresiones arbitrarias usando la sintaxis de sustitución ${ expression } . De forma predeterminada, los valores de estas expresiones de sustitución se concatenan directamente en la cadena donde aparecen.

const name = "John";
const score = 74;

console.log(`Game Over!

${name}'s score was ${score * 10}.`);

Game Over!

John's score was 740.

Cuerdas crudas

La función de etiqueta String.raw se puede usar con literales de plantilla para acceder a una versión de su contenido sin interpretar ninguna secuencia de escape de barra invertida.

String.raw`\n` contendrá una barra invertida y la letra minúscula n, mientras que `\n` o '\n' contendrán un solo carácter de nueva línea.

const patternString = String.raw`Welcome, (\w+)!`;
const pattern = new RegExp(patternString);

const message = "Welcome, John!";
pattern.exec(message);

["Welcome, John!", "John"]

Cuerdas etiquetadas

Una función identificada inmediatamente antes de un literal de plantilla se utiliza para interpretarla, en lo que se denomina un literal de plantilla etiquetada . La función de etiqueta puede devolver una cadena, pero también puede devolver cualquier otro tipo de valor.

El primer argumento de la función de etiqueta, strings , es una matriz de cada pieza constante del literal. Los argumentos restantes, ...substitutions , contienen los valores evaluados de cada expresión de sustitución ${} .

function settings(strings, ...substitutions) {
  const result = new Map();
  for (let i = 0; i < substitutions.length; i++) {
    result.set(strings[i].trim(), substitutions[i]);
  }
  return result;
}

const remoteConfiguration = settings`
  label    ${'Content'}
  servers  ${2 * 8 + 1}
  hostname ${location.hostname}
`;

Map {"label" => "Content", "servers" => 17, "hostname" => "stackoverflow.com"}

La strings tiene una propiedad especial .raw referencia a una matriz paralela de las mismas partes constantes del literal de la plantilla, pero exactamente como aparecen en el código fuente, sin que se reemplace ninguna barra de escape.

function example(strings, ...substitutions) {
  console.log('strings:', strings);
  console.log('...substitutions:', substitutions);
}

example`Hello ${'world'}.\n\nHow are you?`;

strings: ["Hello ", ".\n\nHow are you?", raw: ["Hello ", ".\\n\\nHow are you?"]]
substitutions: ["world"]

Plantillas de HTML con cadenas de plantillas

Puede crear una función de etiqueta de cadena de plantilla HTML`...` para codificar automáticamente los valores interpolados. (Esto requiere que los valores interpolados solo se usen como texto, y puede que no sean seguros si los valores interpolados se usan en códigos como scripts o estilos).

class HTMLString extends String {
  static escape(text) {
    if (text instanceof HTMLString) {
      return text;
    }
    return new HTMLString(
        String(text)
            .replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/\\/g, '&#39;'));
  }
}

function HTML(strings, ...substitutions) { 
  const escapedFlattenedSubstitutions =
      substitutions.map(s => [].concat(s).map(HTMLString.escape).join(''));
  const pieces = [];
  for (const i of strings.keys()) {
    pieces.push(strings[i], escapedFlattenedSubstitutions [i] || '');
  }
  return new HTMLString(pieces.join(''));
}

const title = "Hello World";
const iconSrc = "/images/logo.png";
const names = ["John", "Jane", "Joe", "Jill"];

document.body.innerHTML = HTML`
  <h1><img src="${iconSrc}" /> ${title}</h1>

  <ul> ${names.map(name => HTML`
    <li>${name}</li>
  `)} </ul>
`;

Introducción

Los literales de plantilla actúan como cadenas con características especiales. Están encerrados por el back-tick `` y pueden extenderse a lo largo de múltiples líneas.

Los literales de plantilla también pueden contener expresiones incrustadas. Estas expresiones están indicadas con un signo $ y llaves {}

//A single line Template Literal  
var aLiteral = `single line string data`;


//Template Literal that spans across lines       
var anotherLiteral = `string data that spans
         across multiple lines of code`;     

//Template Literal with an embedded expression
var x = 2;
var y = 3; 
var theTotal = `The total is ${x + y}`;     // Contains "The total is 5" 



//Comarison of a string and a template literal
var aString = "single line string data"
console.log(aString === aLiteral)                         //Returns true

Hay muchas otras características de los literales de cadena, como los literales de plantilla etiquetada y la propiedad Sin formato. Estos se demuestran en otros ejemplos.