在JavaScript中如何将输入框字符串转为JSON键以访问对应值

实现这个需求只需要三个核心步骤，结合代码示例说明：

1. 将JSON字符串解析为JavaScript对象
   如果你的数据还是原始的JSON字符串格式，首先要通过JSON.parse()把它转换成可操作的JS对象。

2. 获取输入框的用户输入
   通过DOM API获取输入框中的字符串内容。

3. 使用方括号语法访问对象属性
   由于输入的是动态字符串，不能用点语法（点语法只能用固定的键名），必须用obj[key]的形式来访问对应键值。

完整代码示例 #

<!-- HTML部分 -->
<input type="text" id="inputKey" placeholder="输入键名，比如b">
<button onclick="getCorrespondingValue()">获取对应值</button>
<div id="resultDisplay"></div>

<script>
// JavaScript部分
// 原始JSON字符串
const rawJson = '{ "a": "letter a", "b": "letter b", "c": "letter c" }';
// 解析为JS对象
const data = JSON.parse(rawJson);

function getCorrespondingValue() {
  // 获取输入框的内容，去除首尾空格
  const inputKey = document.getElementById('inputKey').value.trim();
  
  // 动态访问对象的键值
  const targetValue = data[inputKey];
  
  // 显示结果，处理键不存在的情况
  const resultEl = document.getElementById('resultDisplay');
  if (targetValue !== undefined) {
    resultEl.textContent = `键${inputKey}对应的值是：${targetValue}`;
  } else {
    resultEl.textContent = `未找到键${inputKey}对应的内容`;
  }
}
</script>

关键说明 #

• 方括号语法是处理动态键名的核心，它允许你用字符串或变量作为键来访问对象属性，这是点语法做不到的。
• 加入trim()是为了避免用户输入前后空格导致键名不匹配的问题。
• 增加了键不存在的判断，避免显示undefined，提升体验。

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