本文详解如何用变量值替代常量名，实现动态对象属性访问，解决 `price.option1.savings` 中 `option1` 需由变量 `opt` 动态决定的问题——核心方法是使用方括号语法 `price[opt].savings`，而非不支持的点号加模板字符串写法。

在 JavaScript 中，对象属性可通过两种语法访问：点号（.） 和 方括号（[]）。点号要求属性名是合法的、静态的标识符（如 price.option1），而方括号语法支持动态计算的属性名——这正是本场景的关键。

你尝试使用的 price.${!opt}.savings 语法是无效的：JavaScript 不支持在点号后插入模板字符串或变量表达式。正确的做法是将变量 opt（例如 "option1"）作为字符串键，通过方括号访问嵌套属性：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

const price = {
  option1: { type: 'R-11', rValue: 11, savings: 0.20, pct: 0.12 },
  option2: { type: 'R-13', rValue: 13, savings: 0.22, pct: 0.12 },
  option3: { type: 'R-19', rValue: 19, savings: 0.24, pct: 0.12 }
};

$(function() {
  $("#select").on('change', function() { // 推荐用 'change' 替代 'blur'，更符合选择行为
    const opt = $(this).val(); // 使用 this 更高效，避免重复 DOM 查询
    if (!opt || !price[opt]) {
      $("#result").text("请选择有效选项");
      return;
    }
    const result = price[opt].savings; // ✅ 正确：动态访问 price["option1"].savings
    $("#result").text(result.toFixed(2)); // 格式化为两位小数
  });
});

⚠️ 注意事项：空值防护：务必检查 opt 是否为空或 price[opt] 是否存在，避免 Cannot read property 'savings' of undefined 错误；事件选择：<select> 元素推荐监听 'change' 事件而非 'blur'，语义更准确且兼容性更好；性能优化：使用 $(this) 替代重复调用 $("#select option:selected")，减少 DOM 查找开销；类型安全：若 opt 来自用户输入，建议增加白名单校验（如 ['option1','option2','option3'] 包含判断），防止原型污染或越权访问。

总结：当需要将变量值作为对象属性名时，必须使用方括号表示法 obj[variable]；点号仅适用于编译期已知的固定属性名。这是 JavaScript 基础但关键的特性，掌握它可安全、灵活地处理配置驱动、表单联动、国际化等常见开发场景。