如何合并多段功能相同的JavaScript代码实现多语言文本适配

核心逻辑是抽离重复配置+封装公共逻辑，原来的重复判断代码可以完全合并，后续加新语言、新文本只需要修改配置项即可，无需重复写逻辑：

合并后的完整代码（仅需1个script标签即可） #

// 1. 统一判断当前使用语言，避免重复判断
let currentLang = 'en' // 默认英文
if (italian) currentLang = 'it'
else if (french) currentLang = 'fr'
else if (german) currentLang = 'de'

// 2. 集中配置所有多语言文本，key为对应元素的id，值为各语言的文本内容
const langConfig = {
  mainphrase: {
    it: 'Buongiorno',
    fr: 'Bonjour',
    de: 'Guten Morgen',
    en: 'Good morning'
  },
  registerphrase: {
    it: 'clicca qui',
    fr: 'clicquer ici', // 你原代码此处未闭合字符串和标签，已补全
    de: 'hier clicken', // 你原代码此处未闭合字符串和标签，已补全
    en: 'click here'
  },
  textphrase: {
    it: 'Ciao a tutti',
    fr: 'Salut a tous',
    de: 'Guten Tag',
    en: 'Hello World'
  }
}

// 3. 批量遍历配置，给所有元素设置对应语言的内容
Object.keys(langConfig).forEach(elId => {
  const el = document.getElementById(elId)
  if (!el) return // 元素不存在自动跳过，避免报错
  // 统一拼接外层的strong、em标签，无需每个文本重复写
  el.innerHTML = `<strong><em>${langConfig[elId][currentLang]}</em></strong>`
})

优化优势 #

• 完全消除重复逻辑，代码量大幅精简
• 后续新增语言时，只需要在langConfig的每个文本配置项中加对应语言的键值即可
• 后续新增需要多语言适配的元素，只需要在langConfig中加对应id的配置项即可，无需新增判断逻辑
• 样式标签和文本内容分离，后续要修改外层标签样式只需修改一处即可

内容的提问来源于stack exchange，提问作者D. Dragon