JavaScript：如何合并键与值数组以在模板字面量中使用命名变量

你可以把keys和values数组组合成一个键值对对象，之后就能直接通过键名来访问对应的值，让模板字面量的写法更清晰。下面是几种实用的实现方式：

方法一：用Object.fromEntries快速构建对象 #

这是ES2019及以上版本支持的简洁写法，直接把键值对数组转为对象：

const values = ['Banana','Yellow','Columbia'];
const keys = ['Fruit','Color','Producer'];

// 把键值数组合并成对象
const fruitData = Object.fromEntries(keys.map((key, idx) => [key, values[idx]]));

// 用键名直接访问的模板字面量
const result = `The <b>${fruitData.Fruit}</b> you are eating is ${fruitData.Color} and was produced in ${fruitData.Producer}`;
console.log(result);
// 输出："The <b>Banana</b> you are eating is Yellow and was produced in Columbia"

方法二：手动循环构建对象（兼容低版本JS） #

如果需要支持更老的JavaScript环境，可以手动遍历数组来构建对象：

const values = ['Banana','Yellow','Columbia'];
const keys = ['Fruit','Color','Producer'];

const fruitData = {};
for (let i = 0; i < keys.length; i++) {
  fruitData[keys[i]] = values[i];
}

const result = `The <b>${fruitData.Fruit}</b> you are eating is ${fruitData.Color} and was produced in ${fruitData.Producer}`;
console.log(result);

方法三：解构属性到变量（直接用裸变量名） #

要是想在模板里直接写${Fruit}这种裸变量名，可以把对象的属性解构出来：

const values = ['Banana','Yellow','Columbia'];
const keys = ['Fruit','Color','Producer'];

const fruitData = Object.fromEntries(keys.map((key, idx) => [key, values[idx]]));
// 解构出单独的变量
const { Fruit, Color, Producer } = fruitData;

const result = `The <b>${Fruit}</b> you are eating is ${Color} and was produced in ${Producer}`;
console.log(result);

⚠️ 注意：别用with语句来实现，它会打乱作用域链，不仅代码可读性差，还容易引发变量冲突的问题。

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