ES6模板语法与字符串处理详解

ES6（ECMAScript 2015）引入了强大的模板字符串和字符串处理方法，让JavaScript的字符串操作变得更加灵活和便捷。

一、模板字符串（Template Strings）

1. 基础语法

使用反引号（`````）代替传统的引号：

javascript 复制代码

// 传统写法
let str1 = '普通字符串';
let str2 = "普通字符串";

// ES6模板字符串
let str3 = `模板字符串`;

2. 多行字符串

模板字符串可以直接换行，无需拼接：

javascript 复制代码

// 传统写法（需要换行符）
let traditional = '第一行\n' +
                  '第二行\n' +
                  '第三行';

// ES6写法
let es6 = `第一行
第二行
第三行`;

console.log(es6);
// 输出：
// 第一行
// 第二行
// 第三行

3. 字符串插值（${expression}）

可以在字符串中嵌入变量和表达式：

javascript 复制代码

let name = '张三';
let age = 25;
let score = 85.5;

// 变量插值
let message = `你好，我叫${name}，今年${age}岁。`;
console.log(message); // 你好，我叫张三，今年25岁。

// 表达式计算
let result = `你的成绩是${score}分，${score >= 60 ? '及格' : '不及格'}。`;
console.log(result); // 你的成绩是85.5分，及格。

// 函数调用
function getScoreLevel(score) {
    return score >= 90 ? '优秀' : score >= 60 ? '良好' : '需要努力';
}
let feedback = `评估结果：${getScoreLevel(score)}`;
console.log(feedback); // 评估结果：良好

4. 嵌套模板

模板字符串可以嵌套使用：

javascript 复制代码

let people = ['张三', '李四', '王五'];

let list = `
<ul>
  ${people.map(name => `<li>${name}</li>`).join('')}
</ul>
`;
console.log(list);
// 输出：
// <ul>
//   <li>张三</li><li>李四</li><li>王五</li>
// </ul>

二、新增的字符串处理方法

1. 识别与查找方法

includes() - 是否包含指定字符串

javascript 复制代码

let str = 'Hello, JavaScript ES6!';

console.log(str.includes('JavaScript'));  // true
console.log(str.includes('Python'));      // false
console.log(str.includes('java'));        // false（区分大小写）
console.log(str.includes('Java'));        // true

startsWith() - 是否以指定字符串开头

javascript 复制代码

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

console.log(url.startsWith('https'));     // true
console.log(url.startsWith('http'));      // true
console.log(url.startsWith('ftp'));       // false
console.log(url.startsWith('example', 8)); // true（从索引8开始）

endsWith() - 是否以指定字符串结尾

javascript 复制代码

let file = 'document.pdf';

console.log(file.endsWith('.pdf'));       // true
console.log(file.endsWith('.txt'));       // false
console.log(file.endsWith('doc', 7));     // true（只检查前7个字符）

2. 重复与填充方法

repeat() - 重复字符串

javascript 复制代码

let str = 'Hello';

console.log(str.repeat(3));    // 'HelloHelloHello'
console.log(str.repeat(0));    // ''
console.log(str.repeat(2.5));  // 'HelloHello'（向下取整）

// 实际应用：创建分隔线
console.log('-'.repeat(50));

padStart() 和 padEnd() - 字符串填充

javascript 复制代码

// padStart - 从开头填充
let num = '5';
console.log(num.padStart(3, '0'));      // '005'
console.log(num.padStart(3));           // '  5'（默认空格）

// padEnd - 从末尾填充
let label = '姓名';
console.log(label.padEnd(10, '.'));     // '姓名........'

// 实际应用：格式化显示
let products = [
    { name: '苹果', price: 5 },
    { name: '笔记本电脑', price: 5999 }
];

products.forEach(p => {
    console.log(
        p.name.padEnd(10, ' ') + 
        '￥' + 
        p.price.toString().padStart(6, ' ')
    );
});
// 输出：
// 苹果        ￥     5
// 笔记本电脑  ￥  5999

3. 去除空白方法

javascript 复制代码

let str = '  Hello World  ';

console.log(str.trimStart());   // 'Hello World  '
console.log(str.trimEnd());     // '  Hello World'
console.log(str.trim());        // 'Hello World'

// ES2019新增的别名
console.log(str.trimLeft());    // 'Hello World  '（同trimStart）
console.log(str.trimRight());   // '  Hello World'（同trimEnd）