Template String 作为对象属性名称

在前端开发中，我们经常需要定义对象并设置属性。在某些情况下，我们需要动态地设置属性名，这时使用模板字符串作为对象属性名称可以极大地方便我们的编程。

模板字符串

ES6 中引入了模板字符串，它允许我们在字符串中插入表达式，并支持多行字符串。模板字符串使用反引号（`）包裹，插入表达式使用${}。

const name = 'Tom';
const age = 18;
console.log(`My name is ${name}, and I am ${age} years old.`);
// 输出：My name is Tom, and I am 18 years old.

模板字符串作为属性名

在对象中，我们通常使用点运算符或者方括号运算符来访问属性。而如果要使用模板字符串作为属性名，则必须使用方括号运算符。

const obj = {
  [`${name}${age}`]: 'Tom18'
};
console.log(obj['Tom18']); // 输出："Tom18"

我们可以通过模板字符串将变量值嵌入到属性名中，从而实现动态命名属性。这在某些场景下非常有用，比如当我们需要根据不同的条件动态生成对象属性时。

-- -------------------- ---- -------
-------- ------------------ ---- -
  ------ -
    ------------------ -----
    -------------- -----
    ------------ --- -- --
  --
-

------------------------------- -----
--
---
-
  ------ -----
  ------ -----
  -------- ----
-
--
展开代码

注意事项

需要注意的是，模板字符串作为属性名时，表达式的值必须是一个字符串或者可以转换为字符串的值。否则会抛出 SyntaxError 错误。

另外，在使用模板字符串作为对象属性名时，我们也可以结合解构赋值进行操作。

const { name, age } = { name: 'Tom', age: 18 };
const obj = {
  [`${name}${age}`]: true
};
console.log(obj['Tom18']); // 输出："true"

结论

通过使用模板字符串作为对象属性名称，我们可以更加方便地动态生成对象属性，从而简化我们的编程。在实际开发中，我们应该根据具体场景灵活运用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29727