JavaScript中如何动态拼接变量构造表单名以获取输入值

如题所述，我尝试在表单名称的构造逻辑中使用传入的动态变量，当前编写的代码如下：

function validate_inventory_form(location){
    var name=document.inventory_+[location]+_input.name.value;

    // ... 其他校验逻辑
}

我希望能把入参location正确拼接到表单名称里，最终让变量name的取值和直接写document.inventory_cupboard_input.name.value的执行效果完全一致，请问正确的语法应该怎么写？先提前感谢解答。

你当前的写法会直接触发JS语法错误，无法正常运行：JS的点号属性访问语法后面只能跟固定的字面量属性名，不能直接在点号路径里插入字符串拼接符号、变量，你额外加的[location]也会把传入的变量转成数组，完全达不到拼接的效果。

正确的实现方式需要结合JS的方括号动态属性访问规则——当需要动态计算属性名时，只要把拼好的完整属性名字符串放到方括号里，JS就会自动匹配对应名称的对象属性：

function validate_inventory_form(location){
    // 先把完整的表单元素名称拼接成字符串
    var targetFormName = "inventory_" + location + "_input";
    // 用方括号动态访问document上对应名称的表单元素
    var name = document[targetFormName].name.value;

    // ... 其他校验逻辑
}

如果你的运行环境支持ES6语法，也可以用模板字符串简化拼接过程，效果完全一致：

function validate_inventory_form(location){
    const targetFormName = `inventory_${location}_input`;
    const name = document[targetFormName].name.value;
}

这种写法的运行效果和你期望的硬编码写法完全等价：当传入的location为cupboard时，代码实际访问的就是document.inventory_cupboard_input这个元素，最终取到的name值和硬编码写法没有区别。

实际开发里可以加一层元素存在性判断，避免元素不存在时脚本报错中断：

var targetEl = document["inventory_" + location + "_input"];
var name = targetEl ? targetEl.name.value : "";

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