使用模板字面量结合map函数渲染DOM时变量无法访问的问题

DevOps 小满

2026-8-21

问题解决

你的代码存在几个关键问题，导致模板字面量无法正确解析变量，直接输出了字符串内容，下面是修正后的代码和问题分析：

修正后的代码

`<tr>
  <td class="clc-${concept.conceptCode}">
    ${getSortedLevelCurriculumList(concept).map((levelCurriculumInfo, index) => {
      if(levelCurriculumInfo.levelName !== levelCurriculumInfo.currName) {
        return `
          <span id="clc-tag-${levelCurriculumInfo.clcId}" class="level label label-success">${levelCurriculumInfo.levelName}</span>
          <span id="clc-tag-curr-${levelCurriculumInfo.clcId}" class="curriculum">- ${levelCurriculumInfo.currName}</span>
        `;
      } else {
        return `<span class="na" style="font-weight: 700;">No Subject/Grade Tagged To This Concept</span>`;
      }
    }).join('')}
  </td>
</tr>`

关键问题解析

map函数未正确插值：你之前把map调用写在了${}外面，导致整个map代码被当成普通字符串输出。必须把整个getSortedLevelCurriculumList(concept).map(...)包裹在${}里，才会执行JS逻辑并插入结果。
map回调语法错误：map的回调函数需要用(参数) => { ... }或者function(参数) { ... }的形式，你之前漏掉了参数的括号和箭头/function关键字，语法不合法。
内部HTML未用模板字符串：map内部生成HTML时，你用了+拼接字符串，但变量没有放在${}里，而且引号嵌套混乱。改用模板字符串包裹内部HTML，才能正确解析变量。
数组转字符串：map返回的是数组，直接插入模板字符串会自动用逗号分隔每个元素，所以必须调用.join('')把数组拼接成完整的HTML字符串。