ES6 字符串扩展

字符串是日常写代码最离不开的数据类型之一，ES6 给字符串带来两项重要升级：模板字符串（反引号 `）和一批**新方法**（includes、startsWith、repeat 等）。

模板字符串

基本写法

模板字符串使用反引号（`，键盘上 ESC 下面那个键）包裹：

const name = '小明';
console.log('你好，' + name + '！');   // ES5 拼接
console.log(`你好，${name}！`);         // ES6 模板字符串

${} 里可以放任意表达式，不只是变量：

// 示例
const a = 5, b = 3;
console.log(`结果是：${a + b}`);      // 结果是：8
console.log(`您好，${a > b ? '欢迎' : '再见'}`); // 欢迎 —— 甚至可以放三元

换行

普通字符串想换行得用 \n；模板字符串里直接回车即可：

// ES5
const s = '第一行\n第二行';

// ES6：直接换行
const s = `第一行
第二行`;
console.log(s);

写 HTML 片段、多行文案时特别省力。

嵌套

模板字符串可以互相套（配合三元判断选择文本）：

// 示例
const name = '小红';
const role = 'admin';
const html = `
  <div class="user">
    <span>${name}</span>
    ${role === 'admin' ? '<b>管理员</b>' : '<i>普通用户</i>'}
  </div>`;

常用新方法

这里的”新方法”一部分来源于 ES6 及后续版本，日常开发高频用到。

includes / startsWith / endsWith

判断是否包含、以什么开头/结尾，返回布尔值：

// 示例
const url = 'https://www.example.com/learn';
console.log(url.includes('example')); // true
console.log(url.startsWith('https')); // true
console.log(url.endsWith('/learn'));  // true

repeat

把字符串重复 N 遍：

// 示例
console.log('ha'.repeat(3));  // hahaha

padStart / padEnd

不够长度时用指定字符补齐（左/右）

// 示例：给数字补前导零
const n = '7';
console.log(n.padStart(3, '0')); // 007

trim

去除首尾空格（很常用）

// 示例
console.log('  hi  '.trim()); // 'hi'

经典写法

拼接参数、构造 HTML / 生成信息文案时，模板确实漂亮：

// 示例
const user = { name: '小明', age: 20, city: '北京' };
const line = `用户：${user.name}
年龄：${user.age}
城市：${user.city}`;
console.log(line);

速查卡片

有了模板字符串和这些方法，日常拼接、校验字符串都会轻快很多。