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

244 阅读1分钟

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

1.模板字符串

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

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

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

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

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

1.2 运算支持

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

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

实现原理

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

1.3 嵌套模板

支持多级嵌套:

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

二、Unicode 增强支持

2.1 扩展表示法

支持 \u{码点} 形式:

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

2.2 码点获取

codePointAt() 方法:

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

2.3 长度计算注意事项

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

三、实用新方法

3.1 包含检测

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
const log = 'Error: File not found';

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

3.2 重复生成

  • repeat方法返回一个新字符串,表示将原字符串重复n次。
'0'.repeat(3)  // "000"
'abc'.repeat(2.5)  // "abcabc"(自动取整)

3.3 填充对齐

  • padStart()用于头部补全,padEnd()用于尾部补全。
// 时间格式化
'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

保持原始转义字符:

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

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

4.2 标签模板实战

自定义模板处理器:

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 消除空格

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

5.2 字符正规化

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

结语

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