一、基础字符串操作

1. 字符串创建

const str1 = 'Hello World'; // 字面量创建
const str2 = String(123.45); // "123.45"
const str3 = new String('Hello').valueOf(); // 转为原始值

2. 访问字符

'cat'.charAt(1); // "a"
'cat'[1]; // "a"（ES5+）

3. 字符串不可变性

let s = 'hello';
s[0] = 'H'; // 无效
s = 'H' + s.slice(1); // 正确修改方式

二、核心字符串方法

1. 连接字符串

const result = 'Hello'.concat(' ', 'World', '!'); // "Hello World!"

2. 提取子串

'hello'.slice(1,3);    // "el"（支持负数）
'hello'.substring(1,3); // "el"（自动排序参数）

3. 查找定位

'javascript'.indexOf('a');     // 1
'javascript'.lastIndexOf('a'); // 3
'Hello'.includes('ell');       // true（ES6）

4. 大小写转换

'Hello'.toLowerCase(); // "hello"
'HELLO'.toUpperCase(); // "HELLO"
'?'.toLocaleUpperCase('de-DE'); // "SS"（德语环境）

5. 空白处理

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

三、高级处理技巧

1. 字符串填充

'5'.padStart(3, '0');    // "005"
'25'.padEnd(4, '0');     // "2500"

2. 正则表达式集成

// 查找所有匹配
const matches = [...'test1test2'.matchAll(/t(e)(st(\d?))/g)];

// 复杂替换
'price: 100'.replace(/(\d+)/, m => `$${m*0.8}`);

3. 模板字符串高级用法

// 带标签的模板
function currency(strings, ...values) {
  return strings.reduce((acc, str, i) => 
    acc + str + (values[i] ? `$${values[i].toFixed(2)}` : ''), '');
}
console.log(currency`Total: ${25} + ${30}`); // "Total: $25.00 + $30.00"

// 嵌套模板
const html = `
  

  ${items.map(item => `
    
${item.name}: ${item.value}
  `).join('')}
  
`;

四、编码与特殊处理

1. Unicode处理

''.codePointAt(0).toString(16); // "1f600"
String.fromCodePoint(0x1F600);    // ""

2. Base64转换

btoa('你好'); // 报错（需先编码）
btoa(encodeURIComponent('你好')); // "JUU0JUJEJUEwJUU1JUE1JUJE"

3. URL编码

encodeURIComponent('?q=test&lang=zh'); // "%3Fq%3Dtest%26lang%3Dzh"
decodeURIComponent('%E4%BD%A0%E5%A5%BD'); // "你好"

五、性能优化技巧

1. 高效拼接

// 错误方式
let result = '';
for(let i=0; i<100000; i++) {
  result += i; // 产生大量临时字符串
}

// 正确方式
const arr = [];
for(let i=0; i<100000; i++) {
  arr.push(i);
}
result = arr.join('');

2. 长字符串处理

// 使用文本块处理大文本
const text = "这是一个非常长的字符串..." + 
  "需要分多行编写..." + 
  "使用加号连接更高效";

六、实用工具函数

1. 统计字符出现次数

function countOccurrences(str, char) {
  return str.split(char).length - 1;
}

2. 解析查询参数

function parseQuery(query) {
  return Object.fromEntries(
    query.split('&').map(param => {
      const [k, v] = param.split('=');
      return [decodeURIComponent(k), decodeURIComponent(v || '')];
    })
  );
}

3. 安全HTML插入

function safeHTML(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    let value = values[i] || '';
    if (typeof value === 'string') {
      value = value.replace(/&/g, '&')
                   .replace(//g, '>');
    }
    return acc + str + value;
  }, '');
}

七、注意事项

1. 编码陷阱

''.length; // 2（代理对字符）
[...''].length; // 4（组合emoji）

2. 正则性能

// 避免在循环中重复创建正则
const regex = /test/g; // 预先编译
while((match = regex.exec(str)) !== null) {
  // 处理匹配
}

3. 换行符统一

function normalizeNewlines(str) {
  return str.replace(/\r\n?/g, '\n');
}

4. 多语言处理

'?'.localeCompare('z', 'de'); // 德语排序返回负数
'?'.localeCompare('z', 'sv'); // 瑞典语返回正数

八、ES2022+ 新特性

1..at()方法

'abc'.at(-1); // 'c'

2. 正则匹配索引

const match = 'abc'.match(/b/d);
console.log(match.indices[0]); // [1, 2]

3..replaceAll()方法

'a-b-c'.replaceAll('-', ' '); // "a b c"

本文涵盖了从基础操作到高级技巧的完整字符串处理方法，结合最新ES规范，适用于现代JavaScript开发的各种场景。建议根据具体需求选择合适的方法，并注意处理Unicode和多语言环境下的特殊情况。