Tengo una plantilla de cadena como:
template = `<li>${name}<li><li>${address}<li><li>${sex}<li>`He definido un objeto {nombre: "tom", dirección: "usa", sexo: "masculino"} en el archivo js.
¿Cómo puedo renderizar la plantilla por el objeto directamente? para obtener resultados como:
<li>tom<li><li>usa<li><li>male<li>:)
var obj = {name: "tom", address: "usa", sex: "male"}; var result; with(obj) result = `<li>${name}<li><li>${address}<li><li>${sex}<li>`o
var obj = {name: "tom", address: "usa", sex: "male"}; var template = "<li>${name}<li><li>${address}<li><li>${sex}<li>"; var result = template.replace(/\${(\w+)}/g, function($0, $1) { return obj[$1]; });Use el literal de la plantilla cuando acceda al objeto
También tuve que arreglar tu HTML para cerrar los LI
const arr = [ { name: "tom", address: "usa", sex: "male" }, { name: "lisa",address: "usa", sex: "female"} ]; document.getElementById('ul').innerHTML = arr .map(({ name, address, sex}) => `<li>${name}</li><li>${address}</li><li>${sex}</li>`) .join("") <ul id="ul"></ul>Solo agrega obj. en la plantilla y debería funcionar.
var obj = {name: "tom", address: "usa", sex: "male"}; var template = `<li>${obj.name}<li><li>${obj.address}<li><li>${obj.sex}<li>`; console.log(template); // <li>tom<li><li>usa<li><li>male<li>o puedes desestructurar el objeto así:
var obj = {name: "tom", address: "usa", sex: "male"}; // destructure const { name, address, sex } = obj; var template = `<li>${name}<li><li>${address}<li><li>${sex}<li>`; console.log(template); // <li>tom<li><li>usa<li><li>male<li>