本文详解如何用变量值替代常量名，实现动态对象属性访问，解决 `price.option1.savings` 中 `option1` 需由变量 `opt` 动态决定的问题——核心方法是使用方括号语法 `price[opt].savings`，而非不支持的点号加模板字符串写法。
在 JavaScript 中，对象属性可通过两种语法访问：点号（.） 和 方括号（[]）。点号要求属性名是合法的、静态的标识符（如 price.option1），而方括号语法支持动态计算的属性名——这正是本场景的关键。
你尝试使用的 price.${!opt}.savings 语法是无效的：JavaScript 不支持在点号后插入模板字符串或变量表达式。正确的做法是将变量 opt（例如 "option1"）作为字符串键，通过方括号访问嵌套属性：
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
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 错误；事件选择： 元素推荐监听 'change' 事件而非 'blur'，语义更准确且兼容性更好；性能优化：使用 $(this) 替代重复调用 $("#select option:selected")，减少 DOM 查找开销；类型安全：若 opt 来自用户输入，建议增加白名单校验（如 ['option1','option2','option3'] 包含判断），防止原型污染或越权访问。
总结：当需要将变量值作为对象属性名时，必须使用方括号表示法 obj[variable]；点号仅适用于编译期已知的固定属性名。这是 JavaScript 基础但关键的特性，掌握它可安全、灵活地处理配置驱动、表单联动、国际化等常见开发场景。
