我如何摆脱逗号，那么我把 .join 放在哪里

Question

I added the array in the code and the html code and it shows a comma between the 2 sets how would I take it out because I want it to be a list and have multiple volunteering opportunities without a comma Ive looked online and it says to inset a .join(``) in my js but everytime I try the array doesnt insert so basically nothing shows up我在代码和 html 代码中添加了数组，它在 2 个集合之间显示了一个逗号，我将如何将其取出，因为我希望它是一个列表，并且有多个没有逗号的志愿服务机会我在网上查看过，它说要插入.join(``) 在我的 js 中，但每次我尝试数组时都不会插入，所以基本上没有显示任何内容

 <!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"> <title>Page Title</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="/Pages/Services/Internships-Volunteering.css"> <script src="/Pages/Services/volunteering.js"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="/index.html"> <img src="/logofinalee.png"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item active" style="font-family: montserrat;font-size:17px"> <a class="nav-link" href="/index.html">Home</a> </li> <li class="nav-item active" style="font-family: montserrat;font-size:17px"> <a class="nav-link" href="/blog.html">Blog</a> </li> <li class="nav-item active" style="font-family: montserrat;font-size:17px"> <a class="nav-link" href="/Pages/About-Us.html">About Us</a> </li> <li class="nav-item dropdown active" style="font-family: montserrat;font-size:17px"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="/Pages/chatwith.html">Chat with College Students</a> <a class="dropdown-item" href="/Pages/Services/Volunteering.html">Volunteering Oppurtunities</a> <a class="dropdown-item" href="/Pages/Services/intern.html">Internship Oppurtunities</a> <a class="dropdown-item" href="/Pages/Services/sat.html">SAT and ACT</a> <a class="dropdown-item" href="/Pages/appli.html">Application Help</a> </div> </li> <li class="nav-item active" style="font-family: montserrat;font-size:17px"> <a class="nav-link " href="/Pages/Colleges/Colleges.html">Advisors</a> </li> <li class="nav-item active" style="font-family: montserrat;font-size:17px"> <a class="nav-link " href="/Pages/Contact.html">Contact</a> </li> <li class="nav-item active" style="font-family: montserrat;font-size:17px"> <a class="nav-link " href="/FAQ.html">FAQ</a> </li> </ul> </div> </div> </nav> <div class="jumbotron jumbotron-fluid text-center"> <div class="container"> <h1 style="color:white;font-size: 100px">VOLUNTEERING</h1> </div> </div> <div class="container"> <div class="row"> <div class="col-sm-12"> <br> </br> </div> <div class="col-sm-2"> <br> </br> </div> <div class="col-sm-8"> <p style="font-size: 17px"> Networking and gaining connections in the community is a very daunting and dreaded task by many. However, having certain experiences is still very valuable on resumes and college applications. We hope to make this process easier and more accessible for all. Through Unavigate, students will have the opportunity to be matched with connections in the local area that will offer internship and volunteering opportunities for specific interests. We have a wide variety of opportunities that everyone can take advantage of. <br> </br> You can find various internship opportunities ranging from pharmaceutical to accounting to law here. Each internship offers its own unique experience and requirements yet all guarantee to make your time worthwhile. Our team has hand selected these from local businesses and most are exclusively offered through our service. As we continue to grow our provided opportunities will as well. </p> </div> <div class="col-sm-12"> <br> </br> </div> </div> </div> </div> </div> <div class="jumbotron jumbotron-fluid text-center"> <div class="container"> <h1 style="color:white;font-size: 75px">OUR VOLUNTEERING</h1> </div> </div> <div class="container"> <div class="row"> <div id="volunteering"> </div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/Pages/Services/Internships-Volunteering.css"> <!-- jQuery library --> <script src="/js/jquery-3.5.1.min.js"></script> <!-- Latest compiled JavaScript --> <script src="/js/bootstrap.min.js"></script> <script src="/Pages/Services/volunteering.js"></script> </body> </html>

const volData = [
{
 company: "Translators Without Borders",
 link: "https://translatorswithoutborders.org/volunteer/",
 description: "Translators without Borders depends on volunteers to 
 translate millions of words, but also to help us run the 
 organization. We work with volunteers who have all kinds of great 
 skills – and many learn new skills that they can use in their jobs. 
 You can volunteer with TWB if you are fluent in at least one 
 language other than your native language. Whether you are 
 interested in translating medical texts or translating for crisis 
 response, there are engaging projects available to suit all 
 preferences. Professional translators are especially encouraged to 
 apply. ",
},
{
 company: "Crisis Text Line",
 link: "https://www.crisistextline.org/become-a-volunteer/",
 description:"Crisis Text Line is the free, 24/7 text line for 
 people in crisis in the United States. The service is powered by 
 volunteer Crisis Counselors who work remotely—anywhere with a 
 computer and secure internet connection works.Crisis Counselors 
 answer texts from people in crisis, bringing them from a hot moment 
 to a cool calm through active listening, collaborative problem 
 solving, and safety planning.",
} 
];

document.getElementById("volunteering");

window.onload = function(){
  document.getElementById("volunteering").innerHTML=`
  ${volData.map(function(vol){
      return `

    <h3 style="display: inline; text-align :center"> Company: </h3>
    <p style="display: inline; text-align :center"> ${vol.company} 
    </p>
    
    <h3 style="display: inline;font-size: 18px"> Link: </h3>
    <p style="display: inline;font-size: 16px"> ${vol.link} </p>
  
    <h3 style="display: inline;font-size: 18px"> Description: </h3>
    <p style="display: inline;font-size: 16px"> ${vol.description} 
     </p>
    
      `
      }
    )}
  `;
}

Answer 1

Don't use the outer backticks.不要使用外部反引号。 That converts the array to a string by joining with commas between the elements.这通过在元素之间连接逗号将数组转换为字符串。

Use an explicit call to join() with an empty delimiter.使用空分隔符显式调用join() 。

window.onload = function() {
  document.getElementById("volunteering").innerHTML =
    volData.map(function(vol) {
      return `

    <h3 style="display: inline; text-align :center"> Company: </h3>
    <p style="display: inline; text-align :center"> ${vol.company} </p>
    
    <h3 style="display: inline;font-size: 18px"> Link: </h3>
    <p style="display: inline;font-size: 16px"> ${vol.link} </p>
  
    <h3 style="display: inline;font-size: 18px"> Description: </h3>
    <p style="display: inline;font-size: 16px"> ${vol.description} </p>
    
      `
    }).join('');
}

Answer 2

volData is probably an Array (otherwise volData.map() fails with a TypeError). volData可能是一个数组（否则volData.map()失败）。 volData.map() returns another Array . volData.map()返回另一个Array 。

When an object is used in text context (inside a template literal in your code) its method .toString() is invoked to produce a text representation of its value.当在文本上下文中（在代码中的模板文字内）使用对象时，调用其方法.toString()以生成其值的文本表示。

As its documentation reveals, the implementation of Array.toString() :正如其文档所揭示的， Array.toString()的实现：

joins the array and returns one string containing each array element separated by commas.连接数组并返回一个字符串，其中包含以逗号分隔的每个数组元素。

You can use Array.join() to join the array items yourself using a different string as separator (a new line or the empty string, for example).您可以使用Array.join()使用不同的字符串作为分隔符（例如，新行或空字符串）自己连接数组项。 Because Array.join() returns a string there is no need to wrap it into a template literal any more:因为Array.join()返回一个字符串，所以不需要Array.join()它包装到模板文字中：

window.onload = function() {
  document.getElementById("volunteering").innerHTML=
    volData.map(function(vol){
      return `
      <h3 style="display: inline; text-align :center"> Company: </h3>
      <p style="display: inline; text-align :center"> ${vol.company} </p>

      <h3 style="display: inline;font-size: 18px"> Link: </h3>
      <p style="display: inline;font-size: 16px"> ${vol.link} </p>

      <h3 style="display: inline;font-size: 18px"> Description: </h3>
      <p style="display: inline;font-size: 16px"> ${vol.description} </p>
      `
    }).join('');
}

我如何摆脱逗号，那么我把 .join 放在哪里

问题描述

2 个解决方案

解决方案1
1 2020-11-16 20:34:45

解决方案2
0 2020-11-16 20:47:21

我如何摆脱逗号，那么我把 .join 放在哪里

问题描述

2 个解决方案

解决方案1 1 2020-11-16 20:34:45

解决方案2 0 2020-11-16 20:47:21

解决方案1
1 2020-11-16 20:34:45

解决方案2
0 2020-11-16 20:47:21