JavaScript模板文字 - Javascript

在JavaScript中，有一种非常方便的字符串格式化方式，叫做模板文字(Template Literals)。模板文字在ES6(ES2015)中被引入，并且得到大量开发者的喜爱和使用。

基本用法

模板文字以反引号(`)包围，与普通的字符串拼接方式不同的是，模板文字可以直接在字符串中插入JavaScript表达式，并且表达式被包含在${}中。

const name = '小明';
const age = 18;
const hobby = '打篮球';

const info = `我的名字是${name}，今年${age}岁，爱好是${hobby}`
console.log(info);
// 输出：我的名字是小明，今年18岁，爱好是打篮球

需要注意的是，在这种写法中，名字、年龄、爱好等变量不需要用加号连接，直接写在模板文字中即可。而且因为使用了反引号，也使得这种写法相对于其他语言的字符串格式化更加简洁。

多行字符串

在ES5及以下的JavaScript版本中，如果要表示多行字符串，必须使用加号连接。而有了模板文字，我们可以直接书写多行字符串。

const poem = `《将进酒》
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。`
console.log(poem);

嵌套变量

对于一些复杂的场景，我们也可以在模板文字中嵌套使用变量。

const order = {
  id: 123,
  items: [
    { name: "商品1", price: 100 },
    { name: "商品2", price: 200 },
  ],
  total: function() {
    return this.items.reduce((sum, i) => sum + i.price, 0);
  }
}

const receipt = `订单ID：${order.id}
购买商品：
${order.items.map(item => `${item.name} - ¥${item.price}`).join('\n')}
总计：¥${order.total()}`;
console.log(receipt);

标签模板

如果希望模板文字拓展得更加灵活，我们可以使用标签模板(Tagged Template)。标签模板可以是一个带有特殊表达式的函数，该函数可以解析模板文字，并返回一个处理后的结果。

例如，我们可以创建一个标签模板函数，来使一段模板代码高亮。

function highlight(strings, ...values) {
  const highlighted = values.map((value, i) => 
    `<span class="highlight">${value}</span>` + strings[i + 1]
  );
  return strings[0] + highlighted.join('');
}

const name = '小明';

const welcomeText = highlight`欢迎来到我们的网站，${name}！
我们很高兴为您提供服务。`;

document.querySelector('#welcome').innerHTML = welcomeText;

总结

模板文字使JavaScript字符串处理变得更加灵活和便捷。它大大简化了字符串拼接的复杂度，使得程序员可以更加专注于业务逻辑和功能实现。同时，加入反引号使得多行字符串处理也变得更加方便。标签模板又为字符串处理提供了更多的拓展空间和业务可拓展性。