使用Array.map生成HTML时如何避免空格导致ID属性截断

根因分析 #

你拼接HTML字符串时，id属性的属性值没有用引号包裹，浏览器解析时会把属性值中的空格识别为不同HTML属性的分隔符，因此仅保留了空格前的内容作为id值，后续内容被截断识别为无效属性。同时原代码存在两个语法问题：li标签开头多写了多余的"、a标签闭合语法错误写为<a/>，也会影响DOM解析结果。

修复方案 #

给id属性的变量插值外层加上双引号包裹，同时修正多余字符和标签闭合错误即可，修复后的代码如下：

const buddiesNames = ['RGX 11z Pro Buddy', 'Zedd Buddy', 'Get Carried Buddy', 'In A Bind Buddy', 'Year One Buddy'];

ulForBuddyNames.innerHTML = buddiesNames
  .map(
    (elem) =>
      `<li class="valorantHeroBuddy"><a href="#" onClick="showCharacterBuddy(event)" id="${elem}">${elem}</a></li>`
  )
  .join('');

额外优化建议 #

根据HTML规范，id属性不建议包含空格，如果你后续需要用querySelector等API通过id匹配元素，建议把属性值中的空格替换为中划线/下划线，避免选择器解析报错：

// 替换空格为中划线示例
id="${elem.replaceAll(' ', '-')}"

内容的提问来源于stack exchange，提问作者DeanWinchester88