如何简化JavaScript代码，避免为多FAQ变量重复编写逻辑？

现有以下代码，希望无需重复编写代码，即可适配content.js中的英国区（accordionItemsUk）和国际区（accordionItemsInternational）两组FAQ数据，如何实现？

现有代码 #

HTML #

<!-- This div is populated by the code in script.js -->
<div class="accordion" id="AccordionOne">
  <div id="App">
    <p>App</p>
  </div>
</div>

content.js #

let accordionItemsUk = [
    {
        title: "FAQ1",
        content: "Content 1",
        itemNumber: "One"
    },
    {
        title: "FAQ2",
        content: "Content 2",
        itemNumber: "Two"
    }
];

let accordionItemsInternational = [
    {
        title: "FAQ1",
        content: "Content 1",
        itemNumber: "One"
    },
    {
        title: "FAQ2 Invite",
        content: "Content 2",
        itemNumber: "Two"
    }
];

原script.js代码 #

document.getElementById("App").innerHTML = accordionItemsUk.map(function fullFAQList(accordionItemsUk) {
  return ['<div class="accordion-item"><h2 class="accordion-header" id="heading'
      + accordionItemsUk.itemNumber +
      '"><button class="accordion-icon collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse'
      + accordionItemsUk.itemNumber +
      '" aria-expanded="false" aria-controls="collapse'
      + accordionItemsUk.itemNumber +
      '">'
      + accordionItemsUk.title +
      '</button></h2><div id="collapse'
      + accordionItemsUk.itemNumber +
      '" class="accordion-collapse collapse" aria-labelledby="heading'
      + accordionItemsUk.itemNumber +
      '"data-bs-parent="#AccordionOne"><div class="accordion-body">'
      + accordionItemsUk.content +
      '</div></div></div>'];
}).join('');

核心思路是把FAQ的渲染逻辑封装成可复用函数，通过传入不同的FAQ数组来生成对应内容，避免重复代码。

修改后的script.js代码 #

// 封装渲染FAQ的复用函数
function renderFAQ(faqItems) {
  return faqItems.map(item => `
    <div class="accordion-item">
      <h2 class="accordion-header" id="heading${item.itemNumber}">
        <button class="accordion-icon collapsed" type="button" 
                data-bs-toggle="collapse" data-bs-target="#collapse${item.itemNumber}" 
                aria-expanded="false" aria-controls="collapse${item.itemNumber}">
          ${item.title}
        </button>
      </h2>
      <div id="collapse${item.itemNumber}" class="accordion-collapse collapse" 
           aria-labelledby="heading${item.itemNumber}" data-bs-parent="#AccordionOne">
        <div class="accordion-body">${item.content}</div>
      </div>
    </div>
  `).join('');
}

// 渲染英国区FAQ
document.getElementById("App").innerHTML = renderFAQ(accordionItemsUk);

// 如果需要切换为国际区FAQ，只需替换为：
// document.getElementById("App").innerHTML = renderFAQ(accordionItemsInternational);

关键说明 #

1. 复用函数封装：将原有的渲染逻辑抽离为renderFAQ函数，参数faqItems支持接收任意符合格式的FAQ数组（包含title、content、itemNumber字段）。
2. 模板字符串优化：用ES6模板字符串替代繁琐的字符串拼接，让HTML结构更清晰，降低语法出错概率。
3. 灵活切换数据源：只需调用renderFAQ并传入对应区域的数组，就能快速切换渲染内容，完全无需重复编写渲染逻辑。

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