- Plantillas de texto en JavaScript
- Las plantillas de cadena de texto (template strings) en JavaScript
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>'; 
No hay comentarios:
Publicar un comentario