Plantillas de cadena de texto

Resumen

Las plantillas de cadena de texto (template strings) son literales de texto que habilitan el uso de expresiones embebidas. Es posible utilizar cadenas de texto de más de una línea, y funcionalidades de interpolación de cadenas de texto con ellas.

Sintaxis

`cadena de texto`

`línea 1 de cadena de texto
 línea 2 de cadena de texto`

`cadena de texto ${expresión} texto`

tag `cadena de texto ${expresión} texto`

Descripción

Las plantillas de cadena de texto se delimitan con el caracter de comillas o tildes invertidas (` `) (grave accent) , en lugar de las comillas simples o dobles. Las plantillas de cadena de texto pueden contener marcadores, indentificados por el signo de pesos, y envueltos en llaves (${expresión}). Las expresiones contenidas en los marcadores, junto con el texto entre ellas, son enviados como argumentos a una función. La función por defecto simplemente concatena las partes para formar una única cadena de texto. Si hay una expresión antes de la plantilla de cadena de texto (i.e. tag),  llamamos a esta plantilla de cadena de texto "plantilla de cadena de texto con tag". En este caso, la expresión de tag  (típicamente una función) es llamada a partir de la cadena resultante de procesar la plantilla de cadena de texto, que luego puede ser manipulada antes de ser devuelta.

Cadenas de más de una línea

Los caracteres de fin de línea encontrados son parte de la plantilla de cadena de texto. En el caso de cadenas de texto normales, esta es la sintaxis necesaria para obtener cadenas de más de una línea:

console.log("línea 1 de cadena de texto\n\
línea 2 de cadena de texto");
// "línea 1 de cadena de texto
// línea 2 de cadena de texto"

Para obtener el mismo efecto con cadenas de texto multilínea, ahora es posible escribir:

console.log(`línea 1 de cadena de texto
línea 2 de cadena de texto`);
// "línea 1 de cadena de texto
// línea 2 de cadena de texto"

Interpolación de expresiones

Para combinar expresiones dentro de cadenas de texto normales, se usa la siguiente sintaxis:

var a = 5;
var b = 10;
console.log("Quince es " + (a + b) + " y\nno " + (2 * a + b) + ".");
// "Quince es 15 y
// no 20."

Ahora, con las plantillas de cadena de texto, tenemos una sintaxis que habilita la misma funcionalidad, con un código más agradable a la vista y fácil de leer:

var a = 5;
var b = 10;
console.log(`Quince es ${a + b} y\nno ${2 * a + b}.`);
// "Quince es 15 y
// no 20."

Plantillas de cadena de texto con postprocesador

Una forma más avanzada de plantillas de cadenas de texto son aquellas que contienen una función de postprocesado . Con ellas es posible modificar la salida de las plantillas, usando una función. El primer argumento contiene un array con las cadenas de texto de la plantilla ("Hola" y "mundo" en el ejemplo). El segundo y subsiguientes argumentos con los valores procesados ( ya cocinados ) de las expresiones de la plantilla (en este caso "15" y "50"). Finalmente, la función devuelve la cadena de texto manipulada. El nombre "tag" de la función no es nada especial, se puede usar cualquier nombre de función en su lugar.

var a = 5;
var b = 10;

function tag(strings, ...values) {
  console.log(strings[0]); // "Hola "
  console.log(strings[1]); // " mundo "
  console.log(values[0]);  // 15
  console.log(values[1]);  // 50

  return "Bazinga!";
}

tag`Hola ${ a + b } mundo ${ a * b}`;
// "Bazinga!"

Cadenas en crudo (raw)

La propiedad especial raw, disponible en el primer argumento de las plantillas de cadenas de texto postprocesadas, nos permite acceder a las cadenas de texto tal como fueron ingresadas.

function tag(strings, ...values) {
  console.log(strings.raw[0]); 
  // "linea 1 de cadena de texto \\n línea 2 de cadena de texto"
}

tag`línea 1 de cadena de texto \n línea 2 de cadena de texto`;

Adicionalmente, el método  String.raw() permite crear cadenas de texto en crudo tal como serían generadas por la función por defecto de plantilla, concatenando sus partes.

String.raw`Hola\n${2+3}!`;
// "Hola\\n5!"

Seguridad

Las plantillas de cadenas de texto NO DEBEN ser construidas por usuarios no confiables, porque tienen acceso a variables y funciones.

`${console.warn("this es",this)}`; // "this es" Window

let a = 10;
console.warn(`${a+=20}`); // "30"
console.warn(a); // 30

Especificaciones

Compatibilidad de navegadores

Ver también

• String
• String.raw()
• Lexical grammar
• Template-like strings in ES3 compatible syntax