有没有办法在新行中输入模板文字表达式

如何解决有没有办法在新行中输入模板文字表达式

我正在尝试以我的段落元素中的送货地址格式编写这段代码。例如。

姓名（名字和姓氏）
数字街
城市，州邮政编码

我从给定的对象中获取这些值。我知道您可以在多行上编写模板文字，但我只看到使用模板文字字符串完成此操作，那么填充文字表达式的模板文字呢？我在函数内部使用这些模板文字表达式，以便稍后在更改我正在使用的对象的值时更改它们的值。我在互联网上找不到关于将模板文字表达式放在多行上的任何内容，我似乎可以做到这一点的唯一方法是将我想做的每一行放在一个单独的段落中并将其添加到 div，但它最终它们之间的空间太大。我希望我已经清楚地解释了我遇到的问题，我将感谢任何反馈和帮助，谢谢。这总是在 JavaScript 中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags-->
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,shrink-to-fit=no"
    />

    <meta name="description" content="Kenzie" />
    <meta name="author" content="Kenzie" />
    <meta name="keywords" content="Kenzie" />

    <!-- Title Page-->
    <title>Kenzie JavaScript Page</title>

    <!-- CSS-->
    <link href="style.css" rel="stylesheet" media="all" />
  </head>

  <body>
    <script src="code.js"></script>
  </body>
</html>

.card {
  margin: 10px;
  padding: 10px;
  width: 300px;
  text-align: center;
  background-color: lightgray;
}

ul {
  padding-left: 0;
  list-style: none;
}

//object
let examplePerson = {
  firstName: "Homer",lastName: "Simpson",hobbies: ["Television","Eating Donuts","Playing with his Kids"],address: {
    number: 742,street: "Evergreen Terrace",city: "Springfield",state: "Illinois",zipcode: "12345",},"favorite color": "yellow",};

//variables
let firstInitial = examplePerson.firstName;
let lastInitial = examplePerson.lastName;
let streetNumber = examplePerson.address.number;
let streetName = examplePerson.address.street;
let cityName = examplePerson.address.city;
let stateName = examplePerson.address.state;
let zipcodeNumber = examplePerson.address.zipcode;

function renderPerson(person) {
  //create a container/div
  let div = document.createElement("div"); 
  div.classList= "card"; // adding css class to element
  document.body.append(div); 

//create shipping address
  let heading4 = document.createElement("h4");
  document.body.append(heading4);
  heading4.textContent = "Shippping Address";
  
  let p = document.createElement("p");
  document.body.append(p);
  p.textContent = `${firstInitial} ${lastInitial}
   ${streetNumber} ${streetName}
   ${cityName} ${stateName} ${zipcodeNumber}`;

  div.append(heading4);
  div.append(p);
}

renderPerson();

有没有办法在新行中输入模板文字表达式

如何解决有没有办法在新行中输入模板文字表达式

相关推荐