如何修改多语言取值函数使其支持点分隔嵌套键名路径取值

原来的实现仅支持读取语言包的一级属性，传入sidebar.a时会直接将整串作为属性名查找，语言包中不存在对应属性所以返回undefined，按如下方式修改函数即可支持嵌套路径取值：

function l(key) {
  const selectedLang = window.localStorage.getItem('language') || lang.default;
  const currentLangPack = lang[selectedLang];
  // 把点分隔的key拆成路径数组
  const keyPath = key.split('.');
  let result = currentLangPack;
  // 逐层遍历路径取值
  for (const k of keyPath) {
    // 中间层级不存在时提前返回，也可以根据需求配置兜底默认值
    if (result === undefined || result === null) return undefined;
    result = result[k];
  }
  return result;
}

功能验证 #

用你提供的多语言配置测试效果如下：

const en = {
  sidebar : {
    "a" : "b",
  }
}

l('sidebar') // 返回 {a: "b"}，完全兼容原有调用逻辑
l('sidebar.a') // 返回 "b"，满足嵌套取值需求
l('sidebar.none.exist') // 返回 undefined，异常场景无报错

可选优化：可以在返回前增加兜底逻辑，找不到对应值时返回传入的key本身，避免页面显示空白：

return result === undefined ? key : result;

内容的提问来源于stack exchange，提问作者Şahin Ersever