如何去掉逗号，将.join放在哪里？
如何去掉逗号，将.join放在哪里？
提问于 2020-11-17 04:25:18
我在代码和html代码中添加了数组，它显示了两个集合之间的逗号，我应该如何取出它，因为我希望它是一个列表，并且有多个不带逗号的志愿服务机会。我在网上看过，它告诉我要在js中插入一个.join()，但每次尝试时，数组都没有插入，所以基本上什么都没有显示
<!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
Stack Overflow用户
发布于 2020-11-17 04: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('');
}Stack Overflow用户
发布于 2020-11-17 04:47:21
volData可能是一个数组(否则volData.map()会失败并返回TypeError)。volData.map()返回另一个Array。
当一个对象在文本上下文中使用时(在代码中的template literal中)，它的方法.toString()将被调用以生成其值的文本表示。
正如其documentation所揭示的那样，Array.toString()的实现
连接数组并返回一个字符串，该字符串包含用逗号分隔的每个数组元素。
您可以使用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('');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64865204
复制相关文章
相似问题
腾讯云开发者
