页面上显示的反引号答案

【问题标题】：backticks showing on the page页面上显示的反引号
【发布时间】：2022-10-02 00:03:24
【问题描述】：

我正在制作一个简单的项目，该项目从 API 获取一些书籍信息，然后将它们显示为 <li> 元素，但 map 函数返回它们并带有显示为文本的反引号，并显示在页面上

JS：

    booksArray.map((book, n) => {
            let {title} = book;
            let authors = getAuthorsArray(book)
            return `<li class=\"book-card\" id=${n}>
                    <h2>${title}</h2>
                    <p>${authors}</p>
                </li>`
        }
    )

地图后，加入你的结果booksArray.map((book, n) => {return ``}).join(\'\')
有效！你能解释一下为什么吗？
@Mando, @sachin answer 到这个question
正如我在答案中提到的，map 函数返回一个数组，并且您按原样打印它。您打印的是<li>...</li>,<li>...</li>,<li>...</li> 而不是<li>...</li><li>...</li><li>...</li>，所以在每个 </li> 之后都有一个逗号。当我们加入它时，它加入了所有字符串并形成了一个没有这些逗号的大字符串。

标签： javascript html web

【解决方案1】：

问题不在于您的反引号，而在于 booksArray.map 函数。

Array.map 总是返回一个以逗号分隔的数组。
HTML 将在您呈现数据数组时添加逗号。
为避免这种情况，只需在 map 函数的末尾添加 .join("") 即可。
像这样：
```
return booksArray.map((book, n) => {  
// Your return HTML logic  
})**.join("")**
```
希望这可以帮助！

【讨论】：