Javascript 映射一个对象，然后在页面上设置innerHTML，会导致项目之间出现逗号

我正在映射一个对象，这样我就可以提取它的一些项，并在它们周围添加HTML。然后我把这个写在页面上

这是有效的，只是页面的每个项目后面都有逗号。如何删除这些逗号

const input = document.querySelector('.search-form input');
  const shownResults = document.querySelector('.suggestions');
  let searchQuery = "";


  const updatepage = function (filteredCities) {
    let filteredCitiesHtml = filteredCities.map((item) => {
      return `<li>${item.city} - ${item.state}</li>`;
    });

    shownResults.innerHTML = filteredCitiesHtml;
    console.log(filteredCitiesHtml);
  };

  const filterCities = () => {
    const filteredCities = cities.filter((item)=> {
      if (
        item.state.toLowerCase().includes(searchQuery) ||
        item.city.toLowerCase().includes(searchQuery)
        ) {
        return true;
      }
    });
    updatepage(filteredCities);
  };

  // func to search list for string
  const getSearchQuery = function () {
    searchQuery = input.value.toLowerCase();
    filterCities();
  };

  input.addEventListener('keyup', getSearchQuery);

const input=document.querySelector（'.search form input'）；
const shownResults=document.querySelector（'.suggestions'）；
让searchQuery=“”；
const updatepage=函数（filteredCities）{
让filteredCitiesHtml=filteredCities.map（（项）=>{
返回`
${item.city}-${item.state}
`；
});
shownResults.innerHTML=filteredCitiesHtml；
console.log（filteredCitiesHtml）；
};
常量筛选器城市=（）=>{
const filteredCities=cities.filter（（项目）=>{
如果(
item.state.toLowerCase（）.includes（searchQuery）||
item.city.toLowerCase（）.includes（searchQuery）
) {
返回true；
}
});
更新页面（filteredCities）；
};
//func用于搜索字符串的列表
const getSearchQuery=函数（）{
searchQuery=input.value.toLowerCase（）；
过滤城市（）；
};
addEventListener（'keyup'，getSearchQuery）；

据我所知，函数正在返回一个数组。尝试将代码更改为：

let filteredCitiesHtml = filteredCities.map((item) => {
    return `<li>${item.city} - ${item.state}</li>`;
}).join('');

let filteredCitiesHtml=filteredCities.map（（项）=>{
返回`
${item.city}-${item.state}
`；
}).加入（“”）；

使用将返回一个字符串

样本

var filteredCities=['San Farancisco'、'San Diego'、'New York'、'New Orleans']；
var listItems=filteredCities.map（函数（城市）{
返回“
”+城市+”
”；
})
document.getElementById（'without-join'）。innerHTML=listItems；
document.getElementById（'with-join'）。innerHTML=listItems.join（''）
无连接


加入

函数返回一个数组，我知道。尝试将代码更改为：

let filteredCitiesHtml = filteredCities.map((item) => {
    return `<li>${item.city} - ${item.state}</li>`;
}).join('');

let filteredCitiesHtml=filteredCities.map（（项）=>{
返回`
${item.city}-${item.state}
`；
}).加入（“”）；

使用将返回一个字符串

样本


var filteredCities=['San Farancisco'、'San Diego'、'New York'、'New Orleans']；
var listItems=filteredCities.map（函数（城市）{
返回“
”+城市+”
”；
})
document.getElementById（'without-join'）。innerHTML=listItems；
document.getElementById（'with-join'）。innerHTML=listItems.join（''）
无连接


加入

映射返回一个数组，该数组被转换为逗号分隔的字符串。用空字符串连接返回的数组怎么样

  const updatepage = function (filteredCities) {
    let filteredCitiesHtml = filteredCities.map((item) => {
      return `<li>${item.city} - ${item.state}</li>`;
    }).join('');
    shownResults.innerHTML = filteredCitiesHtml;
    console.log(filteredCitiesHtml);
  };

const updatepage=函数（filteredCities）{
让filteredCitiesHtml=filteredCities.map（（项）=>{
返回`
${item.city}-${item.state}
`；
}).加入（“”）；
shownResults.innerHTML=filteredCitiesHtml；
console.log（filteredCitiesHtml）；
};
映射返回一个数组，该数组被转换为逗号分隔的字符串。用空字符串连接返回的数组怎么样

  const updatepage = function (filteredCities) {
    let filteredCitiesHtml = filteredCities.map((item) => {
      return `<li>${item.city} - ${item.state}</li>`;
    }).join('');
    shownResults.innerHTML = filteredCitiesHtml;
    console.log(filteredCitiesHtml);
  };

const updatepage=函数（filteredCities）{
让filteredCitiesHtml=filteredCities.map（（项）=>{
返回`
${item.city}-${item.state}
`；
}).加入（“”）；
shownResults.innerHTML=filteredCitiesHtml；
console.log（filteredCitiesHtml）；
};