ES6 字符串新增方法你了解多少？

今天看了阮一峰《ECMAScript 6入门》对字符串扩展的详解，讲的非常好，然后想着自己总结一下学习成果。话不多说，直接上干货。

1.模板字符串

ini 复制代码

// 传统写法
let oldStr = '用户：' + userName + '\n年龄：' + age;

在es6之前，通常都是使用"+"连接符拼接字符串，这导致字符串拼接繁琐、可读性差

javascript 复制代码

// ES6模板字符串
let newStr = `用户：${userName}
年龄：${age}`;

ES6 引入了模板字符串解决这个问题。

使用反引号(`````)定义，直接支持换行（无需\n）
${} 插值语法自动执行表达式并转换为字符串

1.2 运算支持

大括号内可进行表达式运算：

ini 复制代码

let total = `合计：${(25.99 * 1.2).toFixed(2)}元`; // "合计：31.19元"

实现原理

大括号内本质是JavaScript表达式上下文
自动调用toString()方法转换结果

1.3 嵌套模板

支持多级嵌套：

javascript 复制代码

let list = `
<ul>
  ${items.map(item => `
    <li>${item.name} (库存：${item.stock > 0 ? item.stock : '缺货'})</li>
  `).join('')}
</ul>
`;

二、Unicode 增强支持

2.1 扩展表示法

支持 \u{码点} 形式：

ini 复制代码

'\u{1F680}' === '🚀'  // true
'\u{20BB7}' === '𠮷' // true

2.2 码点获取

codePointAt() 方法：

javascript 复制代码

'𠮷'.codePointAt(0)  // 返回 134071（十进制）

2.3 长度计算注意事项

csharp 复制代码

'🚀'.length  // 返回 2（代理对长度）
Array.from('🚀').length // 正确长度 1

三、实用新方法

3.1 包含检测

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

c 复制代码

const log = 'Error: File not found';

log.includes('File')  // true
log.startsWith('Error')  // true
log.endsWith('found')  // true

3.2 重复生成

repeat方法返回一个新字符串，表示将原字符串重复n次。

lua 复制代码

'0'.repeat(3)  // "000"
'abc'.repeat(2.5)  // "abcabc"（自动取整）

3.3 填充对齐

padStart()用于头部补全，padEnd()用于尾部补全。

arduino 复制代码

// 时间格式化
'7'.padStart(2, '0')  // "07"
'15:00'.padEnd(10, '-') // "15:00----"

// 金额格式化
'123'.padStart(10)    // "       123"
'45.6'.padStart(10, '0') // "00000045.6"

四、原始字符串处理

4.1 String.raw

保持原始转义字符：

javascript 复制代码

String.raw`换行符：\n`  // 实际输出 "换行符：\\n"

// 等效写法
`换行符：\\n`  // 需要手动转义

4.2 标签模板实战

自定义模板处理器：

ini 复制代码

function safeHtml(strings, ...values) {
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += String(values[i])
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;');
    }
  }
  return result;
}

let userInput = '<script>alert(1)</script>';
safeHtml`<div>${userInput}</div>`;
// 输出 <div>&lt;script&gt;alert(1)&lt;/script&gt;</div>

五、扩展方法详解

5.1 消除空格

javascript 复制代码

'  text  '.trimStart()  // "text  "
'  text  '.trimEnd()    // "  text"

5.2 字符正规化

javascript 复制代码

'café'.normalize('NFC') === 'cafe\u0301'.normalize('NFC') // true

结语

这些只是我个人的一些总结，es6字符串新增了很多方法和扩展，如果大家有兴趣了解更多，可以去看看阮一峰《ECMAScript 6入门》，绝对会深有感触！