ES6 for Now

ES6 por ahora: Cadenas de plantilla

ES6 es el futuro de JavaScript y ya está aquí. Es una especificación terminada y trae muchas características que un lenguaje requiere para seguir siendo competitivo con las necesidades de la web actual. No todo en ES6 es para ti y en esta pequeña serie de publicaciones mostraré funciones que son muy útiles y ya utilizables.

Si observa el código JavaScript que he escrito, encontrará que siempre uso comillas simples para definir cadenas en lugar de comillas dobles. JavaScript está bien con cualquiera de los dos, los siguientes dos ejemplos hacen exactamente lo mismo:

var animal = "cow";
var animal="cow";

La razón por la que prefiero las comillas simples es que, en primer lugar, facilita el ensamblaje de cadenas HTML con atributos correctamente citados de esa manera:

// with single quotes, there's no need to 
 // escape the quotes around the class value
var but="<button class="big">Save</button>";
// this is a syntax error:
  var but = "<button class="big">Save</button>";
// this works:
var but = "<button class="big">Save</button>";

La única vez que necesita escapar ahora es cuando usa una comilla simple en su HTML, lo que debería ser una ocasión muy rara. Lo único que se me ocurre es JavaScript o CSS en línea, lo que significa que es muy probable que hagas algo turbio o desesperado con tu marcado. Incluso en sus textos, probablemente sea mejor que no use una sola comilla sino la tipográficamente más agradable ‘.

Aparte: por supuesto, HTML perdona lo suficiente como para omitir las comillas o usar comillas simples alrededor de un atributo, pero prefiero crear un marcado legible para los humanos en lugar de confiar en el perdón de un analizador. Hicimos que el analizador de HTML5 perdonara porque las personas escribieron marcas terribles en el pasado, no como una excusa para seguir haciéndolo.

He sufrido lo suficiente en los días de DHTML de document.write para crear un documento dentro de un conjunto de marcos en una nueva ventana emergente y otras abominaciones para no querer usar el carácter de escape nunca más. A veces, necesitábamos triples, y eso fue incluso antes de que tuviéramos códigos de colores en nuestros editores. Fue un desastre.

¿Sustitución de expresiones en cadenas?

Otra razón por la que prefiero las comillas simples es que escribí mucho PHP en mi tiempo para sitios web muy grandes donde el rendimiento importaba mucho. En PHP, hay una diferencia entre comillas simples y dobles. Las cadenas entre comillas simples no tienen ninguna sustitución, las que tienen comillas dobles sí.

Eso significaba en los días de PHP 3 y 4 que usar comillas simples era mucho más rápido ya que el analizador no tiene que pasar por la cadena para sustituir valores. Aquí hay un ejemplo de lo que eso significa:

<?php   $animal="cow";
  $sound = 'moo';
  echo 'The animal is $animal and its sound is $sound';   
  // => The animal is $animal and its sound is $sound
  echo "The animal is $animal and its sound is $sound";    
  // => The animal is cow and its sound is moo
?>

JavaScript no tenía esta sustitución, por lo que tuvimos que concatenar cadenas para lograr el mismo resultado. Esto es bastante difícil de manejar, ya que necesita entrar y salir de las comillas todo el tiempo.

var animal="cow";
var sound = 'moo';
alert('The animal is ' + animal + ' and its sound is ' +
   sound);
// => "The animal is cow and its sound is moo"

Lío de varias líneas

Esto se vuelve realmente complicado con cadenas más largas y complejas y especialmente cuando ensamblamos mucho HTML. Y, lo más probable es que tarde o temprano termine con su herramienta de pelusa quejándose de los espacios en blanco después de un + al final de una línea. Esto se basa en el problema de que JavaScript no tiene cadenas de varias líneas:

// this doesn't work
  var list="<ul>
  <li>Buy Milk</li>
  <li>Be kind to Pandas</li>
  <li>Forget about Dre</li>
</ul>"; 
// This does, but urgh… 
  var list="<ul>
    <li>Buy Milk</li>
    <li>Be kind to Pandas</li>
    <li>Forget about Dre</li>
  </ul>"; 
// This is the most common way, and urgh, too…
  var list="<ul>" +
  '  <li>Buy Milk</li>' +
  '  <li>Be kind to Pandas</li>' +
  '  <li>Forget about Dre</li>' +
'</ul>';

Soluciones de plantillas del lado del cliente

Para evitar el lío que es el manejo y la concatenación de cadenas en JavaScript, hicimos lo que siempre hacemos: escribimos una biblioteca. Hay muchas bibliotecas de plantillas HTML con Bigote.js probablemente haber sido el seminal. Todos estos siguen una sintaxis propia, no estandarizada, y funcionan en ese estado de ánimo. Es un poco como decir que escribes tu contenido en Markdown y luego te das cuenta de que hay muchas ideas diferentes de lo que significa «markdown».

Introducir cadenas de plantilla

Con la llegada de ES6 y su estandarización, ahora podemos regocijarnos ya que JavaScript ahora tiene un nuevo chico en el bloque cuando se trata de manejar cadenas: Cadenas de plantilla. los compatibilidad con cadenas de plantillas en los navegadores actuales es alentador: Chrome 44+, Firefox 38+, Borde de Microsoft y Webkit están todos a bordo. Safari, lamentablemente, no lo es, pero llegará allí.

La genialidad de las cadenas de plantilla es que utiliza un nuevo delimitador de cadenas, que no se usa ni en HTML ni en textos normales: el acento grave (`).
Usando este, ahora tenemos sustitución de expresión de cadena en JavaScript:

var animal="cow";
var sound = 'moo';

alert(`The animal is ${animal} and its sound is ${sound}`);
// => "The animal is cow and its sound is moo"

La construcción ${} puede tomar cualquier expresión de JavaScript que devuelva un valor, por ejemplo, puede hacer cálculos o acceder a las propiedades de un objeto:

var out = `ten times two totally is ${ 10 * 2 }`;
// => "ten times two totally is 20"
var animal = {
    name: 'cow',
    ilk: 'bovine',
    front: 'moo',
    back: 'milk',
  } 
  alert(`
    The ${animal.name} is of the 
    ${animal.ilk} ilk, 
    one end is for the ${animal.front}, 
    the other for the ${animal.back}
  `);
  // => 
  /*
    The cow is of the
    bovine ilk, 
    one end is for the moo,
    the other for the milk
*/

Ese último ejemplo también muestra que las cadenas de varias líneas ya no son un problema.

Plantillas etiquetadas

Otra cosa que puede hacer con las cadenas de plantilla es anteponerles una etiqueta, que es el nombre de una función que se llama y obtiene la cadena como parámetro. Por ejemplo, podría codificar la cadena resultante para las URL sin tener que recurrir al horriblemente llamado encodeURIComponent todo el tiempo.

function urlify (str) {
  return encodeURIComponent(str);
} 
urlify `http://beedogs.com`;
  // => "http%3A%2F%2Fbeedogs.com"
  urlify `woah$£$%£^$"`;
  // => "woah%24%C2%A3%24%25%C2%A3%5E%24%22"
// nesting also works:
var str = `foo ${urlify `&&`} bar`;
// => "foo %26%26 bar"

Esto funciona, pero se basa en la coerción implícita de matriz a cadena. El parámetro enviado a la función no es una cadena, sino una matriz de cadenas y valores. Si se usa de la manera que muestro aquí, se convierte en una cadena por conveniencia, pero la forma correcta es acceder directamente a los miembros de la matriz.

Recuperación de cadenas y valores de una cadena de plantilla

Dentro de la función de etiqueta, no solo puede obtener la cadena completa sino también sus partes.

function tag (strings, values) {
  console.log(strings);
  console.log(values);
  console.log(strings[1]);
} 
tag `you ${3+4} it`;
/* =>

Array [ "you ", " it" ]
7
it
*/

También se le proporciona una matriz de cadenas sin procesar, lo que significa que obtiene todos los caracteres de la cadena, incluidos los caracteres de control. Digamos, por ejemplo, que agrega un salto de línea con n. Obtendrá el doble espacio en blanco en la cadena, pero los caracteres n en las cadenas sin formato:

function tag (strings, values) {
  console.log(strings);
  console.log(values);
  console.log(strings[1]);
  console.log(string.raw[1]);
} 
tag `you ${3+4} nit`;
/* =>
Array [ "you ", "  it" ]
7
it
 nit
*/

Conclusión

Las cadenas de plantilla son una de esas ingeniosas pequeñas victorias en ES6 que se pueden usar ahora mismo. Si tiene que admitir navegadores más antiguos, por supuesto puede transpilar su ES6 a ES5; puede hacer una prueba de características para el soporte de cadenas de plantilla usando una biblioteca como Featuretests.io o con el siguiente código:

var templatestrings = false;
try {
  new Function( "`{2+2}`" );
  templatestrings = true;
} catch (err) {
  templatestrings = false;
} 
if (templatestrings) {
         // …
}

Más artículos sobre cadenas de plantillas:

Más prácticas con JavaScript

Este artículo es parte de la serie de desarrollo web de los evangelistas tecnológicos de Microsoft sobre aprendizaje práctico de JavaScript, proyectos de código abierto y mejores prácticas de interoperabilidad, que incluyen Borde de Microsoft navegador y el nuevo Motor de renderizado EdgeHTML.

Lo alentamos a probar en todos los navegadores y dispositivos, incluido Microsoft Edge, el navegador predeterminado para Windows 10, con herramientas gratuitas en dev.modern.ES:

Aprendizaje tecnológico en profundidad sobre Microsoft Edge y la plataforma web de nuestros ingenieros y evangelistas:

Más herramientas y recursos multiplataforma gratuitos para la plataforma web:

#ES6 #por #ahora #Cadenas #plantilla

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *