渲染两个嵌套对象

// 嵌套对象数据
const data = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York",
    country: "USA"
  }
};

// 渲染模板
const template = `
  <div>
    <h2>Name: {{name}}</h2>
    <h3>Age: {{age}}</h3>
    <div>
      <h4>Address:</h4>
      <p>Street: {{address.street}}</p>
      <p>City: {{address.city}}</p>
      <p>Country: {{address.country}}</p>
    </div>
  </div>
`;

// 替换模板中的变量
const renderedTemplate = template
  .replace("{{name}}", data.name)
  .replace("{{age}}", data.age)
  .replace("{{address.street}}", data.address.street)
  .replace("{{address.city}}", data.address.city)
  .replace("{{address.country}}", data.address.country);

// 将渲染后的内容插入到页面中
document.getElementById("app").innerHTML = renderedTemplate;