对象值模板文字 JS - JavaScript

在 JavaScript 中，对象值模板文字是 ES6 新增的一项功能，它允许我们在文字模板中直接使用对象的属性值。

const obj = { name: 'John', age: 30 };
console.log(`My name is ${obj.name} and I am ${obj.age} years old`);
// 输出: "My name is John and I am 30 years old"

在上面的例子中，我们使用了对象值模板文字，它允许我们在模板字符串中使用${variable}的格式来直接嵌入对象的属性值。通过这种方式，我们可以更方便地创建包含动态内容的字符串。

在对象值模板文字中使用表达式

除了使用对象的属性值外，我们还可以在对象值模板文字中使用表达式。例如：

const count = 10;
console.log(`The result is ${count + 5}`);
// 输出: "The result is 15"

在这个例子中，我们在模板字符串中使用了一个表达式${count + 5}来计算变量count加上5的值，并将结果嵌入到字符串中。在实际使用中，我们可以根据需要使用各种类型的表达式来生成动态的字符串。

使用函数生成动态字符串

除了使用变量和表达式以外，我们还可以使用函数来生成动态字符串。例如：

function formatPrice(amount, currency) {
  return `${currency}${amount.toFixed(2)}`;
}

console.log(`The total price is: ${formatPrice(19.99, '$')}`);
// 输出: "The total price is: $19.99"

在这个例子中，我们定义了一个formatPrice函数，它将给定的amount和currency参数格式化成一个带有货币符号的价格字符串。然后我们在模板字符串中使用了这个函数，将其返回的字符串嵌入到模板字符串中。通过这种方式，我们可以实现各种需要动态生成字符串的应用场景。

总结

对象值模板文字是一项很实用的功能，它可以让我们更方便地创建动态的字符串。在实际使用中，我们可以将它与变量、表达式、函数等结合使用，以生成复杂的动态字符串。