JavaScript如何拼接变量名动态访问对象属性实现本地化文本加载

几种错误写法失效的核心逻辑非常明确：

• 写text.language时，JS的点号访问语法会直接查找text对象下键名**固定为language**的属性，不会把language识别成你定义的变量，而你的多语言对象里根本没有叫language的键，自然返回undefined。
• 用模板字符串`text.${language}`拼接出来的结果只是普通文本字符串，比如页面语言是de时，得到的就是"text.de"这串字符，JS不会自动把字符串当作代码执行去读取对应属性，直接插入页面当然会把这串文本渲染出来。

JS原生就提供了专门用于动态访问对象属性的语法：方括号访问符，完全不需要拼接字符串、也不需要执行动态代码，直接把存储键名的变量放进方括号里即可。
针对你的场景，根本不需要拼接text.前缀，直接写text[language]就能拿到对应语言的文本值。
修正后的完整可运行代码如下：

var text = {
  en: 'Hello World',
  de: 'Hallo Welt',
  es: 'Hola Mundo',
  it: 'Ciao Mondo',
  fr: 'Bonjour Le Monde'
}

/* 读取文档语言设置 */
var language = document.documentElement.lang.toLowerCase();

window.addEventListener('DOMContentLoaded', function() {
  var ele = document.body;
  // 方括号语法动态匹配对应语言的文本
  var content = text[language];
  ele.innerHTML = content;
  console.log(`当前设置的页面语言为: ${language}`);
});

优化建议 #

实际项目里建议加一层兜底逻辑，避免页面设置的语言不在你的多语言配置里时，页面渲染出undefined：

// 优先读取匹配语言的文本，匹配失败时默认回退到英文
var content = text[language] ?? text.en;

注意：不要为了实现动态属性访问用eval()执行拼接出来的字符串，这种写法会带来严重的XSS安全隐患，性能表现也很差，属于被广泛禁用的写法。方括号语法是该场景下的标准实现，完全可以覆盖所有动态属性访问需求。

你之前设想的“拼接变量a和b得到属性引用”的思路问题在于，把对象引用存成了字符串：当你写var a = 'text.'时，a只是一串文本，不是真正的text对象引用，自然没法在上面取属性。如果要拆分存储，只需要直接存对象本身即可，不需要转成字符串：

const target = text; // 直接持有对象的引用，不要存成字符串
const langKey = 'en';
const result = target[langKey]; // 等价于text.en

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