我如何擺脫逗號，那么我把 .join 放在哪里
[英]How do I get rid of the comma, so where do I put the .join
問題描述
我在代碼和 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>
`
}
)}
`;
}
2 個解決方案
解決方案1
1 2020-11-16 20:34:45
不要使用外部反引號。 這通過在元素之間連接逗號將數組轉換為字符串。
使用空分隔符顯式調用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('');
}
解決方案2
0 2020-11-16 20:47:21
volData可能是一個數組（否則volData.map()失敗）。 volData.map()返回另一個Array 。
當在文本上下文中（在代碼中的模板文字內）使用對象時，調用其方法.toString()以生成其值的文本表示。
正如其文檔所揭示的， Array.toString()的實現：
連接數組並返回一個字符串，其中包含以逗號分隔的每個數組元素。
您可以使用Array.join()使用不同的字符串作為分隔符（例如，新行或空字符串）自己連接數組項。 因為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('');
}
我如何擺脫這個數組中的逗號？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.