JavaScript中如何将字符串转为属性名并获取对应属性值？

嘿，这个需求其实很常见，核心就是利用JavaScript的动态属性访问语法来实现，我给你一步步拆解并提供完整的可运行示例：

因为你要根据用户输入的动态字符串来获取对象属性，所以不能用常规的.点语法（点语法只能访问固定名称的属性），必须用方括号[]语法——它允许你用变量或动态字符串作为属性名来访问对象的属性值。

1. 获取输入框的用户输入：先拿到输入框里的字符串，记得去除前后空格避免无效的属性名。
2. 动态访问全局对象属性：用方括号语法把输入的字符串作为属性名，去全局对象里取值。
3. 处理边界情况：比如用户输入为空、输入的属性名不存在的情况，给用户明确的提示。

<!-- HTML结构：输入框、触发按钮、结果展示区 -->
<input type="text" id="propertyInput" placeholder="请输入属性名">
<button onclick="fetchPropertyValue()">获取对应属性值</button>
<p id="resultDisplay"></p>

<script>
// 你的全局对象（所有属性值都是字符串）
const myGlobalObj = {
  username: "john_doe",
  email: "john@example.com",
  role: "admin"
};
// 如果你的对象还不是全局的，把它挂载到window上（浏览器环境的全局对象是window）
window.myGlobalObj = myGlobalObj;

function fetchPropertyValue() {
  // 获取输入框的值并清理空格
  const inputPropertyName = document.getElementById('propertyInput').value.trim();
  const resultElement = document.getElementById('resultDisplay');
  
  // 处理空输入
  if (!inputPropertyName) {
    resultElement.textContent = "请输入有效的属性名哦～";
    return;
  }
  
  // 动态获取属性值
  const targetValue = window.myGlobalObj[inputPropertyName];
  
  // 处理属性不存在的情况
  if (targetValue !== undefined) {
    resultElement.textContent = `对应的属性值是：${targetValue}`;
  } else {
    resultElement.textContent = `抱歉，不存在名为「${inputPropertyName}」的属性`;
  }
}
</script>

• 方括号语法的必要性：比如用户输入username，myGlobalObj[inputPropertyName]就等价于myGlobalObj.username，但前者能适配任意动态输入的属性名，后者只能写死属性名。
• 全局对象的访问：如果你的对象已经是全局的（比如直接定义在script标签里没有用const/let声明的变量），直接用window[inputPropertyName]就能访问；如果是用const/let声明的，需要手动挂载到window上才能成为全局对象。
• 容错处理：一定要处理空输入和不存在的属性，不然会返回undefined，影响用户体验。

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