Páginas

▼
▼

jueves, 26 de septiembre de 2019

Las plantillas de cadena de texto (template strings) en JavaScript

Esta entrada forma parte de una serie.

Desde la versión JavaScript 6 (ECMAScript 6 o también denominado ES6) disponemos de plantillas de cadenas de texto o template strings que nos permite incrustar cadenas de texto con código HTML puro o incluso con variables.


Podemos incluir código HTML entre comillas simples, pero lo interesante es que también podemos incluir varias líneas de código entre comillas invertidas y esto nos permite que el código HTML lleve variables. Las variables van precedidas por el simbolo dolar $ y van entre llaves {}.


HTML

 <!DOCTYPE html>  
 <html lang="es">  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>template strings en JS</title>  
  </head>  
  <body>  
   <h1>Template strings en JavaScript</h1>  
   <div id='persona'></div>  
   <div id="datos"></div>  
   <script type="text/javascript" src="script.js"></script>  
  </body>  
 </html>

JavaScript

 var nombre="Juan";  
 var ciudad="Madrid";  
 var altura=650  
 var persona=document.getElementById('persona');  
 persona.innerHTML='Autor: '+nombre;  
 //template strings: permite incluir el html entre comillas invertidas  
 var datos=document.getElementById('datos');  
 datos.innerHTML=`  
  <h2>Mi nombre es ${nombre}</h2>  
  <h3>Soy de ${ciudad}</h3>  
 `;  
 //comillas invertidas  
 datos.innerHTML += `<h4>Es una ciudad a ${altura} metros sobre el nivel del mar</h4>`;  
 //comillas simples normales  
 datos.innerHTML += '<h5>6.5 millones de habitantes en la Comunidad de Madrid</h5>';
en

No hay comentarios:

Publicar un comentario