字符串方法手写实现：从模板解析到Unicode处理

引言

在JavaScript开发中，字符串操作无处不在。尽管现代JavaScript已经提供了丰富的字符串方法，但理解其底层原理并能够手动实现它们，是提升编程能力和解决复杂问题的关键。本文将深入探讨模板字符串解析、正则表达式方法、字符串加密算法以及Unicode编码处理，并在此基础上补充字符串基础操作、性能优化等实用内容。

一、模版字符串解析

1.1 模版字符串基础

ES6引入的模版字符串使用反引号(`)定义，支持多行字符串和字符串插值。例如:

const name = 'Admin';
const greeting = `Hi, ${name}, Welcome!`

1.2 手写模版字符串解析

虽然JavaScript引擎内置了模版字符串解析，但我们可以手动实现一个简化版:

function parseTemplate(strings, ...values) {
  let result = "";
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += values[i];
    }
  }
  return result;
}
// 使用示例
const name = "张三";
const age = 25;
const str = parseTemplate`姓名：${name}，年龄：${age}`;
console.log(str); // 输出：姓名：张三，年龄：25

1.3 标签函数的高级应用

标签函数可以自定义模版字符串的解析行为。以下时防止XSS攻击的转义函数实现:

function escapeHTML(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i - 1];
    const escapedValue = String(value)
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#39;");
    return result + escapedValue + str;
  });
}
const userInput = '<script>alert("XSS Attack!")</script>';
const safeHTML = escapeHTML`用户输入：${userInput}`;
console.log(safeHTML); // 输出：用户输入：&lt;script&gt;alert(&quot;XSS Attack!&quot;)&lt;/script&gt;

二、正则表达式相关方法

2.1 正则表达式基础

正则表达式有两种创建方式: 字面量(/abc/)和构造函数(new RegExp('abc'))。正则表达式由模式和标志两部分组成，常见标志包括i(不区分大小写)、g(全局匹配)等。

2.2 手写正则表达式方法

2.2.1 test()方法实现

function myTest(regex, str) {
  // 简单的test实现，仅支持非全局匹配
  const match = myExec(regex, str);
  return match !== null;
}

function myExec(regex, str) {
  // 简化版exec实现
  const pattern = regex.source;
  const flags = regex.flags;

  // 移除了全局标志以简化实现
  const localRegex = new RegExp(pattern, flags.replace("g", ""));

  // 使用原生RegExp进行匹配(实际实现会更复杂)
  const result = localRegex.exec(str);
  return result;
}

// 使用示例
const regex = /hello/i;
console.log(myTest(regex, "Hello World")); // true
console.log(myTest(regex, "Hi World")); // false

2.2.2 match()方法实现

function myMatch(str, regex) {
  if (!regex.global) {
    return myExec(regex, str);
  }

  const matches = [];
  let match;
  let lastIndex = 0;

  // 创建副本以避免修改原正则表达式的lastIndex
  const regexCopy = new RegExp(regex.source, regex.flags);

  while ((match = myExec(regexCopy, str.slice(lastIndex))) !== null) {
    matches.push(match[0]);
    lastIndex += match.index + match[0].length;
  }

  return matches.length > 0 ? matches : null;
}

// 使用示例
const str1 = "hello world hello universe";
const regex1 = /hello/gi;
console.log(myMatch(str1, regex1)); // ['hello', 'hello']

2.3 Unicode属性转义

ES2018引入了Unicode属性转义，允许匹配具有特定Unicode属性的字符。例如, \p{Script=Greek}匹配希腊字母, \p{White_Space}匹配空白字符。使用时需要添加u标志:

// 检查字符串是否只包含
const isWhitespace = /^\p{White_Space}+$/u.test("\t \n\r"); // true

// 删除所有字母
const result = "1π2ü3é4".replace(/\p{Letter}/gu, ""); // 1234

三、字符串加密/解密算法

3.1 简单异或加密

异或加密时最简单的加密算法之一, 利用异或运算的自反性(a^b^b=a)实现加解密:

function xorEncryptDecrypt(text, key) {
  let result = "";
  for (let i = 0; i < text.length; i++) {
    const charCode = text.charCodeAt(i) ^ key.charCodeAt(i % key.length);
    result += String.fromCharCode(charCode);
  }
  return result;
}

// 使用示例
const plaintext = "Hello World";
const key = "secret";
const encrypted = xorEncryptDecrypt(plaintext, key);
console.log("加密结果:", encrypted);
// 加密结果: ;�
// T$
// 

const decrypted = xorEncryptDecrypt(encrypted, key);
console.log("解密结果:", decrypted);
// 解密结果: Hello World

注意: 异或加密强度较低, 如果密钥重复使用或长度不足, 容易被频率分析破解。仅适用于低安全需求场景。

3.2 基于Base64的简单加密

对于需要文本安全传输的场景, 可以将加密后的二进制数据转换为Base64:

function simpleEncrypt(text, password) {
  // 将文本和密码转换为UTF-8字节
  const textEncoder = new TextEncoder();
  const textBytes = textEncoder.encode(text);
  const passwordBytes = textEncoder.encode(password);

  // 使用异或加密
  const encryptedBytes = new Uint8Array(textBytes.length);
  for (let i = 0; i < textBytes.length; i++) {
    encryptedBytes[i] = textBytes[i] ^ passwordBytes[i % passwordBytes.length];
  }

  // 转换为Base64
  let binaryString = "";
  encryptedBytes.forEach((byte) => {
    binaryString += String.fromCharCode(byte);
  });
  return btoa(binaryString);
}

function simpleDecrypt(base64Text, password) {
  // 从Base64解码
  const binaryString = atob(base64Text);
  const encryptedBytes = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    encryptedBytes[i] = binaryString.charCodeAt(i);
  }

  // 使用异或解密
  const textEncoder = new TextEncoder();
  const passwordBytes = textEncoder.encode(password);
  const decryptedBytes = new Uint8Array(encryptedBytes.length);
  for (let i = 0; i < encryptedBytes.length; i++) {
    decryptedBytes[i] =
      encryptedBytes[i] ^ passwordBytes[i % passwordBytes.length];
  }

  // 转换回文本
  const textDecoder = new TextDecoder();
  return textDecoder.decode(decryptedBytes);
}

// 使用示例
const plaintext = "Hello World";
const key = "secret";
const encrypted = simpleEncrypt(plaintext, key);
console.log("加密结果:", encrypted); // 加密结果: OwAPHgpUJAoRHgE=
const decrypted = simpleDecrypt(encrypted, key);
console.log("解密结果:", decrypted); // 解密结果: Hello World

3.3 实际应用建议

对于生产环境, 建议使用成熟的加密库(如Web Crypto API)和标准算法(如AES-GCM), 而不是自行实现加密算法。

四、Unicode和编码处理

4.1 Unicode基础概念

理解一下概念对处理Unicode字符串至关重要:

• JavaScript字符(UTF-16代码单元): 16位, 是JavaScript字符串索引的基本单位
• Unicode代码点: 32位, Unicode字符的唯一标识
• 字素簇: 用户感知的字符, 可能由多个代码点组成

// JavaScript字符 vs 代码点 vs 字素簇
console.log('A'.length);        // 1个JavaScript字符
console.log('🙂'.length);       // 2个JavaScript字符
console.log('café'.length);     // 4个JavaScript字符
console.log('café'.normalize().length); // 仍然为4

4.2 手写Unicode敏感方法

4.2.1 按代码点分割字符串

function splitByCodePoints(str) {
  const codePoints = [];
  for (let i = 0; i < str.length; i++) {
    const codeUnit = str.charCodeAt(i);

    // 检查是否为代理对的一部分(UTF-16)
    if (codeUnit > -0xd800 && codeUnit <= 0xdbff && i + 1 < str.length) {
      const nextCodeUnit = str.charCodeAt(i + 1);
      if (nextCodeUnit >= 0xdc00 && nextCodeUnit <= 0xdfff) {
        // 代理对，组合成一个代码点
        codePoints.push(
          ((codeUnit - 0xd800) << 10) + (nextCodeUnit - 0xdc00) + 0x10000
        );
        i++; // 跳过下一个代码单元
        continue;
      }
    }

    codePoints.push(codeUnit);
  }
  return codePoints;
}

// 使用示例
const str = "Hello🙂世界";
const codePoints = splitByCodePoints(str);
console.log(codePoints); // [72, 101, 108, 108, 111, 128578, 19990, 30028]
console.log(codePoints.map((cp) => String.fromCodePoint(cp)).join("")); // Hello🙂世界

4.2.2 Unicode感知的字符串反转

function unicodeReverse(str) {
  // 使用拓展字素簇分割
  const segments = [];
  for (let i = 0; i < str.length; i++) {
    const codeUnit = str.charCodeAt(i);

    // 检查扩展字素簇边界（简化实现）
    if (codeUnit >= 0xd800 && codeUnit <= 0xdbff && i + 1 < str.length) {
      const nextCodeUnit = str.charCodeAt(i + 1);
      if (nextCodeUnit >= 0xdc00 && nextCodeUnit <= 0xdfff) {
        // 代理对
        segments.push(str.substring(i, i + 2));
        i++;
        continue;
      }
    }

    // 组合字符处理（简化）
    if (
      i + 1 < str.length &&
      str.charCodeAt(i + 1) >= 0x0300 &&
      str.charCodeAt(i + 1) <= 0x036f
    ) {
      // 假设下一个字符是组合标记
      segments.push(str.substring(i, i + 2));
      i++;
    } else {
      segments.push(str[i]);
    }
  }

  return segments.reverse().join("");
}

// 使用示例
console.log(unicodeReverse("café")); // éfac
console.log(unicodeReverse("Hello🙂世界")); // 界世🙂olleH

4.3 编码转换实践

在实际开发中, 经常需要处理不同编码的文本数据:

// 模拟不同编码的转换
function convertEncoding(text, fromEncoding, toEncoding) {
  // 简化实现，实际应使用TextEncoder/TextDecoder
  if (fromEncoding === "UTF-8" && toEncoding === "UTF-16") {
    const utf16Codes = [];
    for (let i = 0; i < text.length; i++) {
      utf16Codes.push(text.charCodeAt(i));
    }
    return utf16Codes;
  }
  // 其他编码转换...
  return text;
}

// 处理编码错误
function safeDecode(buffer, encoding = "UTF-8") {
  try {
    // 模拟解码过程
    const decoder = new TextDecoder(encoding, { fatal: true });
    return decoder.decode(buffer);
  } catch (error) {
    // 错误处理策略
    if (error instanceof TypeError) {
      // 替换无法解码的字符
      const decoder = new TextDecoder(encoding, {
        fatal: false,
        ignoreBOM: true,
      });
      return decoder.decode(buffer);
    }
    throw error;
  }
}

五、字符串基础操作手写实现

5.1 手写常用字符串方法

5.1.1 indexOf实现

function myIndexOf(str, searchValue, fromIndex = 0) {
  if (searchValue === "") {
    return fromIndex >= 0 && fromIndex <= str.length ? fromIndex : str.length;
  }

  for (let i = fromIndex; i <= str.length - searchValue.length; i++) {
    let match = true;
    for (let j = 0; j < searchValue.length; j++) {
      if (str[i + j] !== searchValue[j]) {
        match = false;
        break;
      }
    }
    if (match) {
      return i;
    }
  }

  return -1;
}

5.1.2 slice实现

function mySlice(str, start, end) {
  // 处理负数索引
  const strLength = str.length;
  let startIndex =
    start < 0 ? Math.max(strLength + start, 0) : Math.min(start, strLength);
  let endIndex =
    end === undefined
      ? strLength
      : end < 0
      ? Math.max(strLength + end, 0)
      : Math.min(end, strLength);

  // 确保开始索引不大于结束索引
  if (startIndex >= endIndex) {
    return "";
  }

  // 提取子字符串
  let result = "";
  for (let i = startIndex; i < endIndex; i++) {
    result += str[i];
  }

  return result;
}

5.2 性能优化技巧

字符串操作在JavaScript中可能成为性能瓶颈, 以下是优化建议:

• 使用数组构建字符串: 对于大量字符串拼接, 使用数组的join方法比+=更高效

// 不推荐：性能较差
let result = '';
for (let i = 0; i < 1000; i++) {
    result += 'text';
}

// 推荐：性能更好
const parts = [];
for (let i = 0; i < 1000; i++) {
    parts.push('text');
}
const result = parts.join('');

• 避免不必要的字符串方法链式调用: 每个字符串方法都会创建新字符串
• 使用正则表达式优化复杂匹配: 对于复杂模式匹配, 合理使用正则表达式比多个字符串方法组合更高效

5.3 多语言字符串处理

处理多语言文本时, 需要考虑语言特定的规则:

//  locale敏感的比较（简化实现）
function localeCompare(str1, str2, locale) {
    // 实际应使用Intl.Collator
    const collator = new Intl.Collator(locale);
    return collator.compare(str1, str2);
}

// 大小写转换（考虑语言规则）
function toLocaleUpperCase(str, locale) {
    // 实际应使用Intl相关API
    return str.toLocaleUpperCase(locale);
}

// 使用示例
console.log(localeCompare('ä', 'b', 'de')); // 德语中 ä 在 b 之前
console.log(localeCompare('ä', 'b', 'sv')); // 瑞典语中 ä 在 z 之后

总结

字符串处理是JavaScript编程的核心技能之一。通过手写实现字符串方法，我们不仅能够更深入地理解语言特性，还能培养解决复杂问题的能力。本文涵盖了从基础的模板字符串解析到高级的Unicode处理，以及实用的加密算法和性能优化技巧。

在实际开发中，建议：

1. 理解原理但优先使用内置方法（性能更好且经过充分测试）
2. 对用户输入的字符串始终进行适当的验证和清理
3. 在处理多语言文本时始终考虑Unicode的复杂性
4. 根据实际需求选择合适的加密方案，安全敏感场景使用标准加密库

掌握这些字符串处理技巧将使你能够编写更健壮、高效且安全的JavaScript代码。

拓展阅读:

• Unicode标准
• ECMAScript规范