Volver
Ctrl+Space
◑
Copiar
Descargar
Restaurar
Ejecutar
Ctrl+Enter
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Strings en JS — Ejemplo 2</title> <style> body { font-family: Arial, sans-serif; padding: 20px; background: #fff; } .card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin: 10px 0; } .tag { display: inline-block; background: #F7DF1E; color: #333; font-size: 11px; font-weight: bold; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; } p { margin: 4px 0; font-family: monospace; } </style> </head> <body> <h2>Template literals — interpolación y expresiones</h2> <div class="card"> <div class="tag">INTERPOLACIÓN BÁSICA</div> <p id="r1"></p> </div> <div class="card"> <div class="tag">EXPRESIONES DENTRO DE ${}</div> <p id="r2"></p> <p id="r3"></p> <p id="r4"></p> </div> <div class="card"> <div class="tag">FORMATEO DE NÚMEROS</div> <p id="r5"></p> <p id="r6"></p> </div> <div class="card"> <div class="tag">HTML MULTILÍNEA</div> <div id="r7"></div> </div> <script> // Strings en JavaScript - Ejemplo 2: Template literals const nombre = "Ana García"; const edad = 28; const precio = 1234.567; const descuento = 0.15; // Interpolación básica document.getElementById("r1").textContent = `Me llamo ${nombre} y tengo ${edad} años.`; // Expresiones matemáticas dentro de ${} document.getElementById("r2").textContent = `En 10 años tendré ${edad + 10} años.`; document.getElementById("r3").textContent = `El doble de mi edad es ${edad * 2}.`; // Ternario dentro de ${} document.getElementById("r4").textContent = `Soy ${edad >= 18 ? "mayor" : "menor"} de edad.`; // Formateo de números con toFixed() document.getElementById("r5").textContent = `Precio: $${precio.toFixed(2)}`; // 2 decimales: 1234.57 const precioFinal = precio * (1 - descuento); document.getElementById("r6").textContent = `Con ${descuento * 100}% de descuento: $${precioFinal.toFixed(2)}`; // Generar HTML con template literal const productos = [ { nombre: "Laptop", precio: 1200 }, { nombre: "Mouse", precio: 25 }, { nombre: "Teclado", precio: 75 }, ]; let html = "<ul>"; productos.forEach(p => { html += `<li><strong>${p.nombre}</strong> — $${p.precio}</li>`; }); html += "</ul>"; document.getElementById("r7").innerHTML = html; </script> </body> </html>