JavaScript中的模板字符串（Template Literals）

什么是模板字符串

模板字符串是ES6引入的新特性，它提供了更强大、更灵活的字符串创建方式。与传统的单引号或双引号字符串不同，模板字符串使用反引号（`）包裹。

const traditionalString = '这是一个传统字符串';const templateLiteral = `这是一个模板字符串`;

模板字符串的特性

1. 多行字符串

传统JavaScript字符串若要跨行必须使用换行符\n或字符串拼接，而模板字符串可以直接换行：

// 传统方式const oldMultiline = '第一行\n第二行\n第三行';// 模板字符串方式const newMultiline = `第一行第二行第三行`;

2. 表达式插值

模板字符串可以通过${expression}语法嵌入任意JavaScript表达式：

const name = '张三';const age = 25;// 传统拼接方式const oldWay = '我叫' + name + '，今年' + age + '岁';// 模板字符串方式const newWay = `我叫${name}，今年${age}岁`;

表达式可以是任何有效的JavaScript表达式：

const a = 10;const b = 20;console.log(`a + b = ${a + b}`);  // 输出：a + b = 30console.log(`随机数：${Math.random()}`);  // 输出：随机数：0.123456...

3. 标签模板

模板字符串还支持标签模板功能，这是一种更高级的用法，允许你通过函数自定义模板字符串的处理方式：

function highlight(strings, ...values) {  let result = '';  strings.forEach((str, i) => {    result += str;    if (values[i]) {      result += `<span class="highlight">${values[i]}</span>`;    }  });  return result;}const name = '李四';const age = 30;const highlighted = highlight`大家好，我叫${name}，今年${age}岁`;console.log(highlighted);// 输出：大家好，我叫<span class="highlight">李四</span>，今年<span class="highlight">30</span>岁

实际应用示例

动态生成HTML

const products = [  { name: '手机', price: 1999 },  { name: '笔记本', price: 5999 },  { name: '耳机', price: 199 }];function renderProducts(products) {  return `    <ul class="product-list">      ${products.map(product => `        <li>          <h3>${product.name}</h3>          <p>价格：¥${product.price}</p>        </li>      `).join('')}    </ul>  `;}document.body.innerHTML = renderProducts(products);

国际化字符串

const messages = {  en: {    greeting: name => `Hello, ${name}!`  },  zh: {    greeting: name => `你好，${name}！`  }};const currentLang = 'zh';const userName = '王五';console.log(messages[currentLang].greeting(userName));  // 输出：你好，王五！

注意事项

模板字符串中的空格、换行和缩进都会被保留若要包含反引号字符，需要使用转义符```标签模板的第一个参数是字符串数组，剩余参数是插入的表达式值

模板字符串极大地简化了复杂字符串的构建过程，使代码更加清晰可读，是现代JavaScript开发中不可或缺的特性。