【js篇】ES6 中模板语法与字符串处理详解

在 JavaScript 的发展历程中，ES6（ECMAScript 2015） 引入了多项提升开发效率的特性，其中模板字符串（Template Literals） 和一系列字符串新方法极大地简化了字符串拼接、格式化和判断等操作。

---

✅ 一句话总结

模板字符串使用反引号 ` 包裹，通过 ${} 插入变量或表达式，支持换行、缩进和嵌套运算；结合新增的字符串方法如 includes、startsWith、endsWith、repeat 等，使字符串处理更加直观、高效。

---

✅ 一、模板字符串（Template Literals）

🔹 基本用法

传统字符串拼接方式（繁琐且易错）：

var name = 'css';
var career = 'coder';
var hobby = ['coding', 'writing'];

var finalString =
  'my name is ' + name +
  ', I work as a ' + career +
  ', I love ' + hobby[0] +
  ' and ' + hobby[1];

使用模板字符串（简洁清晰）：

let name = 'css';
let career = 'coder';
let hobby = ['coding', 'writing'];

let finalString = `my name is ${name}, I work as a ${career}, I love ${hobby[0]} and ${hobby[1]}`;

📌 特点：

• 支持多行文本；
• 自动识别空格、换行、缩进；
• 变量插入更自然，无需手动加号拼接；

---

🔹 多行字符串支持

let list = `
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
`;

console.log(list);
// 输出完整 HTML 结构，保留换行和缩进

📌 说明：

• 不需要再使用 \n 或拼接多个字符串来实现换行；
• 非常适合写 HTML 模板、JSON 字符串等内容；

---

🔹 表达式嵌入（${}）

function add(a, b) {
  const finalString = `${a} + ${b} = ${a + b}`;
  console.log(finalString);
}

add(1, 2); // 输出：1 + 2 = 3

📌 说明：

• ${} 内可以是变量、函数调用、表达式；
• 动态计算结果会自动插入到字符串中；

---

✅ 二、ES6 新增字符串方法

方法名	功能	示例
includes(str)	判断是否包含指定子串	'hello'.includes('ell') → true
startsWith(str)	判断是否以某子串开头	'hello'.startsWith('he') → true
endsWith(str)	判断是否以某子串结尾	'hello'.endsWith('lo') → true
repeat(n)	将字符串重复 n 次	'ha'.repeat(3) → 'hahaha'

---

示例详解

1️⃣ includes()

const father = 'xixi haha hehe';
father.includes('haha'); // true

📌 替代旧写法：

father.indexOf('haha') > -1; // true

---

2️⃣ startsWith()

const url = 'https://example.com';

url.startsWith('http');     // true
url.startsWith('https');    // true
url.startsWith('ftp');      // false

---

3️⃣ endsWith()

const filename = 'photo.jpg';
filename.endsWith('.jpg'); // true
filename.endsWith('.png'); // false

---

4️⃣ repeat()

'='.repeat(10); // "=========="
'*'.repeat(5);  // "*****"

📌 应用场景：

• 构建占位符、分隔线；
• 动态生成字符序列；

---

✅ 三、模板字符串的高级用法

标签模板（Tagged Templates）

模板字符串还可以配合“标签函数”使用，实现自定义解析逻辑：

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 = 'Alice';
const age = 25;
const html = highlight`My name is ${name} and I am ${age} years old.`;

console.log(html);
// 输出：My name is <span class="highlight">Alice</span> and I am <span class="highlight">25</span> years old.

📌 说明：

• 第一个参数是字符串数组；
• 后续参数是 ${} 中的值；
• 可用于高亮、转义、国际化等多种用途；

---

✅ 四、一句话总结

模板字符串是 ES6 提供的一种强大而优雅的字符串书写方式，它不仅让字符串拼接变得简单直观，还支持多行文本、表达式嵌入和标签函数等高级功能。配合新增的字符串方法，如 includes、startsWith、endsWith、repeat，JavaScript 的字符串处理能力得到了极大的增强。

---

💡 进阶建议

• 在 React/Vue 中广泛用于 JSX/模板字符串插值；
• 使用 TypeScript 可以对模板字符串进行类型安全检查；
• 使用 ESLint 规则避免不必要的字符串拼接；
• 结合正则表达式或 DOM 操作可构建动态内容渲染逻辑；