我有一个包含元素列表的数组,我尝试使用模板字符串将此列表附加到 HTML 元素:
var description = [
'HTML & CSS',
'Javascript object-oriented programming',
'Progressive Web apps (PWAs)',
'Website Performance Optimization',
'Webpack and Gulp workflows',
'Fullstack React.js',
'Web Components',
'Responsive web design',
'Sketch design',
'GraphQL and Relay'
]
$('body').append(
`
<div class="description">
<ul>
${description.map(
function(work) {
return `<li>${work}</li>`
}
)}</ul>
</div>
`
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
结果,我在每个列表元素之间出现了意外的逗号。 (当您运行上面的代码片段时,您可以看到这一点。)
我怎样才能避免这种情况?
解释
模板文字使用toString()
方法默认通过以下方式连接返回的数组map
与一个,
.
为了避免这个“问题”,你可以使用join('')
Code
var description = [
'HTML & CSS',
'Javascript object-oriented programming',
'Progressive Web apps (PWAs)',
'Website Performance Optimization',
'Webpack and Gulp workflows',
'Fullstack React.js',
'Web Components',
'Responsive web design',
'Sketch design',
'GraphQL and Relay'
]
$('body').append(
`
<div class="description">
<ul>
${
description.map(function(work) {
return `<li>${work}</li>`
}).join('')
}
</ul>
</div>
`
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)