¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Aprende ES6 - Las plantillas con cadenas

Como ya sabrás, en Función 13 estamos embarcados en que aprendas todos los entresijos de ES6. En artículos anteriores hemos hablado sobre let, const y los ámbitos, las funciones flecha, que son realmente útiles, las Promesas y las Clases, cómo podemos usar la Desestructuración o sobre parámetros y propagación. Además hemos aprendido qué nuevas opciones tienen los objetos literales. Si esto no te suena de nada y estás intentando ponerle algún sentido a las siglas, ¡no te preocupes! Echa un vistazo a nuestra Introducción a ES6.

Las cadenas en JavaScript siempre han estado bastante limitadas, faltándole opciones que uno cabría esperar tener si viene de otros lenguajes como PHP o Python. Las plantillas de cadenas cambian esto fundamentalmente.

El funcionamiento básico es el de usar el `acento` y otorgaremos a las cadenas los siguientes superpoderes:

  • Podemos interpolar variables.
  • Incluir expresiones, no solo variables.
  • Cadenas multi-línea.
  • Formato de cadena.

Usando las plantillas

Un aspecto que a menudo pasa desapercibido de estas plantillas, es el hecho de que ya podemos usar las comillas simples (') y las comillas dobles (") sin necesidad de escaparlas, sin importar lo que hayamos usado:

let conComillas = `'Esto' me parece genial`;  
let texto = `Esto está "entre comillas".`  

Veamos cómo podemos usar la interpolación:

let web = 'Función 13';  
var texto = `Aprendo ES6 en ${web}`;  
console.log(texto); // <- Aprendo ES6 en Función 13  

La sintaxis es bastante familiar a la que podemos ver en otros lenguajes. Vamos a ver cómo podemos ahora usar otras expresiones, no solo variables:

console.log(  
    `2 + 2 son ${2 + 2}`
); // 2 + 2 son 4

let hoy = new Date();

console.log(  
    `Hoy es ${hoy.toLocaleString()}`
); // Hoy es 4/26/2016

let a = 10;  
let b = 20;

console.log(  
    `${a} más ${b} es ${a + b}`
); // 10 más 20 es 30

function lorem() {  
    return 'Lorem ipsum';
}

console.log(  
    `Las cadenas de prueba suelen empezar por ${ lorem() }`
); // Las cadenas de prueba suelene empezar por Lorem ipsum

Como ves, cualquier expresión se puede utilizar entre ${ y }.

Cadenas multi-línea

Hasta ahora hacían falta algunos trucos para usar cadenas con varias líneas en JavaScript. Las soluciones pasaban por esto:

var saludo = "Hola \  
Mundo";  
var despedida = "Adios " +  
"Mundo";

Este nuevo tipo de cadenas simplifica esta tarea enormemente. Incluye saltos de línea donde quieras y... ¡ya está!

let lorem = `Lorem Ipsum  
dolor sit amet`;

console.log(lorem);  
// "Lorem Ipsum
// dolor sit amet"

Son especialmente útiles cuando queremos construir algo de marcado HTML:

let articulo = {  
    titulo: 'Aprende ES6 - Las plantillas con cadenas',
    cuerpo: 'Las cadenas multi-línea son geniales.',
    etiquetas: ['JavaScript', 'ES6']
};

let {titulo, cuerpo, etiquetas} = articulo;

let marcado = `<article>  
  <h2>${titulo}</h2>
  <div class="cuerpo">
        <p>${cuerpo}</p>
        <ul class="etiquetas">
      ${etiquetas.map(etiqueta => `<li>${etiqueta}</li>`).join('\n      ')}
    </ul>
  </div>
</article>`;  

Lo cual nos dejaría el siguiente marcado:

<article>  
  <h2>Aprende ES6 - Las plantillas con cadenas</h2>
  <div class="cuerpo">
    <p>Las cadenas multi-línea son geniales</p>
    <ul>
      <li>JavaScript</li>
      <li>ES6</li>
    </ul>
  </div>
</article>  

Sencillo y elegante, ¿no te parece?

Cadenas etiquetadas

Otra cosa que se puede hacer con este tipo de cadenas es añadirles al inicio una etiqueta, que es el nombre de una función que será llamada y que obtiene unos parámetros un tanto especiales.

Vamos a desgranar el funcionamiento antes de dar otros ejemplos:

function prueba(cadenas, ...valores) {  
    console.log(cadenas);
    // ["Esto es una prueba. ", " es un número primo,
    // aunque ", " no."]
    console.log(valores);
    // [3, 4]
}

prueba`Esto es una prueba. ${ 2 + 1 } es un número primo,  
aunque ${2 + 2} no.`;  

La función llamada, recibe un un parámetro fijo, y el resto es variable. El primer parámetro (que hemos llamado cadenas) es una matriz con todas las cadenas simples que tiene la plantilla. Y el resto de parámetros, son todos los valores interpolados que reciba. Si usamos la sintaxis del resto, podemos convertir los valores en una matriz también.

La función tiene que devolver algo para que la cadena sea transformada. Podríamos hacer algo así:

function fooMaker() {  
    return 'foo';
}

let bar = fooMaker`Esto es una prueba`;  
console.log(bar); // foo  

Aunque claro, esto no es muy útil. No obstante, uno de los casos de uso más habituales será el de sanear las cadenas para evitar que contenga algo malicioso, localizarlas, etc.

Un ejemplo de algo que podemos usar sin escribir nada de código nuevo, es String.raw que básicamente deja de escapar ciertas cosas:

let escapado = `Esto\ntiene dos líneas.`  
let sinEscapar = String.raw`Esto\nnotiene dos líneas`;

console.log(escapado);  
//"Esto
//tiene dos líneas."
console.log(sinEscapar);  
// "Esto\nnotiene dos líneas"

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!