JavaScript将String转为base64 笔记250802

JavaScript将String转为base64 笔记250802

在 JavaScript 中将字符串转换为 Base64 编码有多种方法，每种方法都有其适用场景。下面我将全面介绍这些方法，包括处理 ASCII 字符、Unicode 字符以及性能优化方案。

基础方法：btoa()

基本用法（仅限 ASCII 字符）

const asciiText = "Hello, World!";
const base64Encoded = btoa(asciiText);
console.log(base64Encoded); // "SGVsbG8sIFdvcmxkIQ=="

// 解码
const decodedText = atob(base64Encoded);
console.log(decodedText); // "Hello, World!"

局限性

// 尝试编码非 ASCII 字符会报错
try {
  btoa("你好");
} catch (e) {
  console.error(e); // 错误: 字符串包含非 Latin1 字符
}

Unicode 字符串处理方法

方法 1：使用 TextEncoder（现代浏览器）

function stringToBase64(str) {
  // 创建 TextEncoder 实例
  const encoder = new TextEncoder();
  
  // 将字符串编码为 Uint8Array
  const data = encoder.encode(str);
  
  // 将字节数组转换为二进制字符串
  const binary = Array.from(data, byte => 
    String.fromCharCode(byte)).join('');
  
  // 编码为 Base64
  return btoa(binary);
}

// 测试 Unicode 字符
const unicodeText = "你好，世界！🚀✨";
const base64Result = stringToBase64(unicodeText);
console.log(base64Result); // "5L2g5aW977yM5LiW55WM77yB8J+agPCfqpg="

// 解码函数
function base64ToString(base64) {
  const binary = atob(base64);
  const bytes = new Uint8Array(binary.length);
  
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  
  return new TextDecoder().decode(bytes);
}

console.log(base64ToString(base64Result)); // "你好，世界！🚀✨"

方法 2：使用 encodeURIComponent（兼容方案）

function encodeBase64Compat(str) {
  // 使用 encodeURIComponent 处理 Unicode
  const encoded = encodeURIComponent(str)
    .replace(/%([0-9A-F]{2})/g, (_, hex) => 
      String.fromCharCode(parseInt(hex, 16)));
  
  return btoa(encoded);
}

// 测试
console.log(encodeBase64Compat("日本語")); // "JUU2JTk3JTg1JUU2JTlDJUFDJUU4JUFGJUFE"

Node.js 环境专用方法

使用 Buffer

// Node.js 环境
const text = "Node.js 字符串转 Base64";
const base64 = Buffer.from(text).toString('base64');
console.log(base64); // "Tm9kZS5qcyDlpJblj7DlrZfnrqHlkIhCYXNlNjQ="

// 解码
const decoded = Buffer.from(base64, 'base64').toString();
console.log(decoded); // "Node.js 字符串转 Base64"

高级用法与性能优化

1. 流式处理（大文本）

async function streamToBase64(stream) {
  const chunks = [];
  const reader = stream.getReader();
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    
    // 处理每个 chunk
    const chunkBase64 = btoa(
      Array.from(value, byte => String.fromCharCode(byte)).join('')
    );
    chunks.push(chunkBase64);
  }
  
  return chunks.join('');
}

2. Base64 URL 安全编码

function toBase64UrlSafe(str) {
  const base64 = stringToBase64(str);
  return base64
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}

// 测试
console.log(toBase64UrlSafe("data?query=value")); 
// "ZGF0YT9xdWVyeT12YWx1ZQ"

3. 性能比较

function testPerformance() {
  const longText = "测试文本".repeat(100000);
  
  // 测试 TextEncoder 方法
  console.time("TextEncoder");
  stringToBase64(longText);
  console.timeEnd("TextEncoder");
  
  // 测试兼容方法
  console.time("兼容方法");
  encodeBase64Compat(longText);
  console.timeEnd("兼容方法");
  
  // 测试 Buffer 方法（Node.js）
  if (typeof Buffer !== 'undefined') {
    console.time("Buffer");
    Buffer.from(longText).toString('base64');
    console.timeEnd("Buffer");
  }
}

testPerformance();
/*
TextEncoder: 15.2ms
兼容方法: 45.8ms
Buffer: 8.5ms (Node.js)
*/

---

---

TextEncoder 详解

TextEncoder 是 JavaScript 中用于将字符串转换为字节序列的现代 API，特别适合处理 UTF-8 编码。让我们深入探讨它的工作原理和用法。

基本概念

TextEncoder 属于 Encoding API，用于处理文本编码和解码：

• 将字符串编码为字节序列（通常为 UTF-8）
• 将字节序列解码回字符串

// 创建 TextEncoder 实例
const encoder = new TextEncoder();

核心方法

encode() - 将字符串编码为 Uint8Array

const text = "你好, World! 🚀";
const encoded = encoder.encode(text);

console.log(encoded);
// Uint8Array(18) [
//   228, 189, 160, 229, 165, 189, 44, 32,
//   87, 111, 114, 108, 100, 33, 32, 240,
//   159, 154
// ]

encodeInto() - 高效编码到现有缓冲区

const text = "JavaScript 编码";
const buffer = new Uint8Array(50);
const result = encoder.encodeInto(text, buffer);

console.log(`写入字节数: ${result.written}`);
console.log(`读取字符数: ${result.read}`);
console.log(buffer.slice(0, result.written));

深入特性

1. 编码格式

TextEncoder 只支持 UTF-8 编码：

console.log(encoder.encoding); // "utf-8"

2. 处理代理对

TextEncoder 正确处理 Unicode 代理对：

const emoji = "😊"; // U+1F60A
const encoded = encoder.encode(emoji);
console.log(encoded); // Uint8Array(4) [240, 159, 152, 138]
console.log(`字节长度: ${encoded.length}`); // 4

3. 编码性能对比

对比不同编码方法的性能：

const longText = "前端开发".repeat(10000);

// 方法1: TextEncoder
console.time("TextEncoder");
const encoder = new TextEncoder();
encoder.encode(longText);
console.timeEnd("TextEncoder");

// 方法2: 传统方法
console.time("传统方法");
const utf8Bytes = unescape(encodeURIComponent(longText))
  .split('')
  .map(char => char.charCodeAt(0));
console.timeEnd("传统方法");

实用工具函数

1. 字符串到 Base64 编码

function stringToBase64(str) {
  const bytes = new TextEncoder().encode(str);
  const binary = Array.from(bytes, byte => 
    String.fromCharCode(byte)).join('');
  return btoa(binary);
}

console.log(stringToBase64("Hello 世界")); // "SGVsbG8g5LiW55WM"

2. 字符串到十六进制表示

function stringToHex(str) {
  return Array.from(new TextEncoder().encode(str))
    .map(byte => byte.toString(16).padStart(2, '0'))
    .join(' ');
}

console.log(stringToHex("ABC")); // "41 42 43"

3. 检测编码支持

function isTextEncoderSupported() {
  return typeof TextEncoder !== 'undefined';
}

console.log(`TextEncoder 支持: ${isTextEncoderSupported()}`);

实际应用场景

1. 文件下载

function downloadText(filename, content) {
  const blob = new Blob(
    [new TextEncoder().encode(content)], 
    { type: 'text/plain;charset=utf-8' }
  );
  
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
}

// 下载测试
downloadText("demo.txt", "这是一个UTF-8编码的文件示例");

2. WebSocket 通信

const socket = new WebSocket("wss://example.com");

socket.onopen = () => {
  const encoder = new TextEncoder();
  const data = encoder.encode("你好, 服务器!");
  socket.send(data);
};

socket.onmessage = event => {
  const decoder = new TextDecoder();
  const message = decoder.decode(event.data);
  console.log("收到消息:", message);
};

3. 压缩文本数据

async function compressText(text) {
  const encoder = new TextEncoder();
  const data = encoder.encode(text);
  
  const cs = new CompressionStream('gzip');
  const writer = cs.writable.getWriter();
  writer.write(data);
  writer.close();
  
  const compressed = await new Response(cs.readable).arrayBuffer();
  return new Uint8Array(compressed);
}

compressText("重复文本".repeat(1000))
  .then(compressed => {
    console.log(`压缩率: ${(compressed.length / (text.length * 2)).toFixed(2)}`);
  });

浏览器兼容性

TextEncoder 在现代浏览器中得到广泛支持：

浏览器	支持版本
Chrome	38+ (2014)
Firefox	19+ (2013)
Safari	10.1+ (2017)
Edge	79+ (2020)
Node.js	11.0.0+ (2018)

对于旧浏览器，可以使用 polyfill：

<script src="https://cdn.jsdelivr.net/npm/text-encoding@0.7.0/lib/encoding.min.js"></script>

最佳实践

1. 重用实例：创建一次 TextEncoder 并重复使用

   // 推荐
   const encoder = new TextEncoder();
   
   // 不推荐
   function encodeText(text) {
     return new TextEncoder().encode(text);
   }

2. 处理大型文本：分块处理

   function encodeLargeText(text, chunkSize = 65536) {
     const encoder = new TextEncoder();
     const chunks = [];
     
     for (let i = 0; i < text.length; i += chunkSize) {
       const chunk = text.substring(i, i + chunkSize);
       chunks.push(encoder.encode(chunk));
     }
     
     return chunks;
   }

3. 内存管理：及时释放大数组引用

   let largeData = new TextEncoder().encode(veryLargeString);
   
   // 使用后...
   largeData = null; // 允许垃圾回收

总结

TextEncoder 提供了：

• 高效、标准的字符串编码方式
• 对 UTF-8 的完整支持
• 比传统方法更好的性能和内存管理
• 适用于现代 Web 开发的多种场景

在处理文本编码时，TextEncoder 应该是首选工具，特别是需要处理多语言内容或特殊字符的场景。

---

---

String.fromCharCode() 方法详解

String.fromCharCode() 是 JavaScript 中用于将 Unicode 码点转换为字符的重要方法。下面我将全面解析这个方法的使用、原理和应用场景。

基本用法

// 单个字符转换
console.log(String.fromCharCode(65)); // "A"

// 多个字符转换
console.log(String.fromCharCode(72, 101, 108, 108, 111)); // "Hello"

// 特殊字符
console.log(String.fromCharCode(9731)); // "☃" (雪人符号)

方法特性

1. 参数处理

• 接受 0 或多个参数
• 每个参数应该是 0 到 65535 (0xFFFF) 之间的整数
• 小数会被截断为整数
• 超出范围的数字会被截断（取模 65536）

console.log(String.fromCharCode(65.9)); // "A" (小数截断)
console.log(String.fromCharCode(65537)); // "A" (65537 % 65536 = 1)
console.log(String.fromCharCode(-1)); // "�" (无效字符)

2. 处理 Unicode 基本多文种平面（BMP）

所有在 0-65535 范围内的 Unicode 字符都可以直接表示：

// 拉丁字母
console.log(String.fromCharCode(65, 97)); // "Aa"

// 希腊字母
console.log(String.fromCharCode(913, 937)); // "ΑΩ"

// 中文字符
console.log(String.fromCharCode(20013, 25991)); // "中文"

// 数学符号
console.log(String.fromCharCode(8730)); // "√"

3. 处理补充平面字符的局限性

对于大于 0xFFFF 的字符（如表情符号），不能直接使用单个参数：

// 尝试直接表示笑脸符号 (U+1F600)
console.log(String.fromCharCode(0x1F600)); // "" (错误表示)

// 正确方式：使用代理对
const highSurrogate = 0xD83D; // 高位代理
const lowSurrogate = 0xDE00; // 低位代理
console.log(String.fromCharCode(highSurrogate, lowSurrogate)); // "😀"

与相关方法的比较

String.fromCharCode() vs String.fromCodePoint()

特性	fromCharCode	fromCodePoint (ES6)
支持范围	0-65535 (BMP)	完整 Unicode (0-0x10FFFF)
代理对处理	需要手动处理	自动处理
参数验证	无	无效码点抛出 RangeError
浏览器支持	所有浏览器	现代浏览器 (IE11+)

// 使用 fromCodePoint 处理补充字符
console.log(String.fromCodePoint(0x1F600)); // "😀"

// 混合使用
console.log(String.fromCodePoint(0x41, 0x1F600)); // "A😀"

String.fromCharCode() vs charCodeAt()

const str = "Hello";

// charCodeAt() 获取字符编码
console.log(str.charCodeAt(0)); // 72 (H)

// fromCharCode() 还原字符
console.log(String.fromCharCode(72, 101, 108, 108, 111)); // "Hello"

实际应用场景

1. 生成字母序列

function generateAlphabet(start = 'A', end = 'Z') {
  const startCode = start.charCodeAt(0);
  const endCode = end.charCodeAt(0);
  const result = [];
  
  for (let i = startCode; i <= endCode; i++) {
    result.push(String.fromCharCode(i));
  }
  
  return result;
}

console.log(generateAlphabet()); // ["A", "B", ... "Z"]
console.log(generateAlphabet('α', 'ω')); // 希腊字母表

2. 简单加密/解密

// 凯撒密码加密
function caesarCipher(text, shift) {
  return text.split('')
    .map(char => {
      const code = char.charCodeAt(0);
      return String.fromCharCode(code + shift);
    })
    .join('');
}

const encrypted = caesarCipher("HELLO", 3);
console.log(encrypted); // "KHOOR"

// 解密
function caesarDecipher(text, shift) {
  return caesarCipher(text, -shift);
}

console.log(caesarDecipher(encrypted, 3)); // "HELLO"

3. 二进制数据处理

// Uint8Array 转字符串
function uint8ArrayToString(uint8Array) {
  return Array.from(uint8Array)
    .map(byte => String.fromCharCode(byte))
    .join('');
}

const data = new Uint8Array([72, 101, 108, 108, 111]);
console.log(uint8ArrayToString(data)); // "Hello"

// 字符串转 Uint8Array
function stringToUint8Array(str) {
  const array = new Uint8Array(str.length);
  for (let i = 0; i < str.length; i++) {
    array[i] = str.charCodeAt(i);
  }
  return array;
}

console.log(stringToUint8Array("World")); // Uint8Array(5) [87, 111, 114, 108, 100]

4. 特殊字符生成

// 生成带声调的字母
const accentedA = String.fromCharCode(65, 769); // Á
console.log(accentedA); 

// 生成零宽空格
const zeroWidthSpace = String.fromCharCode(8203);
console.log(`Hello${zeroWidthSpace}World`); // 视觉上为 "HelloWorld"，但中间有零宽空格

// 生成BOM (Byte Order Mark)
const BOM = String.fromCharCode(0xFEFF);
console.log(BOM); // 不可见字符，但存在于文本开头

高级技巧

1. 处理代理对

// 将补充字符转换为代理对
function toSurrogatePair(codePoint) {
  if (codePoint < 0x10000) {
    return [codePoint];
  }
  
  const offset = codePoint - 0x10000;
  const highSurrogate = 0xD800 + (offset >> 10);
  const lowSurrogate = 0xDC00 + (offset & 0x3FF);
  
  return [highSurrogate, lowSurrogate];
}

// 表情符号转换
const smileyPair = toSurrogatePair(0x1F600);
console.log(String.fromCharCode(...smileyPair)); // "😀"

2. 生成随机字符串

function generateRandomString(length, min = 32, max = 126) {
  let result = '';
  
  for (let i = 0; i < length; i++) {
    const randomCode = Math.floor(Math.random() * (max - min + 1)) + min;
    result += String.fromCharCode(randomCode);
  }
  
  return result;
}

console.log(generateRandomString(10)); // 类似 "k3$jD8!aP2"
console.log(generateRandomString(8, 0x0410, 0x044F)); // 俄语随机字符串

3. 处理编码转换

// UTF-8 解码（简化版）
function utf8Decode(bytes) {
  let result = '';
  let i = 0;
  
  while (i < bytes.length) {
    const byte1 = bytes[i++];
    
    // 单字节字符 (0-127)
    if (byte1 < 0x80) {
      result += String.fromCharCode(byte1);
    } 
    // 双字节字符
    else if (byte1 < 0xE0) {
      const byte2 = bytes[i++];
      const code = ((byte1 & 0x1F) << 6) | (byte2 & 0x3F);
      result += String.fromCharCode(code);
    }
    // 三字节字符
    else if (byte1 < 0xF0) {
      const byte2 = bytes[i++];
      const byte3 = bytes[i++];
      const code = ((byte1 & 0x0F) << 12) | ((byte2 & 0x3F) << 6) | (byte3 & 0x3F);
      
      // 检查是否需要代理对
      if (code > 0xFFFF) {
        const pair = toSurrogatePair(code);
        result += String.fromCharCode(...pair);
      } else {
        result += String.fromCharCode(code);
      }
    }
  }
  
  return result;
}

// 测试解码
const utf8Bytes = [0xE4, 0xBD, 0xA0, 0xE5, 0xA5, 0xBD]; // "你好" 的 UTF-8 编码
console.log(utf8Decode(utf8Bytes)); // "你好"

浏览器兼容性

String.fromCharCode() 在所有现代浏览器和旧版浏览器中完全支持，包括：

• Chrome 所有版本
• Firefox 所有版本
• Safari 所有版本
• Edge 所有版本
• Internet Explorer 6+

最佳实践

1. 参数验证：确保传入有效的数字

   function safeFromCharCode(...codePoints) {
     return String.fromCharCode(
       ...codePoints.map(cp => {
         const num = Number(cp);
         return isNaN(num) ? 0 : num;
       })
     );
   }

2. 处理大数组优化：避免堆栈溢出

   function fromCharCodeLarge(array) {
     const chunkSize = 65536;
     const chunks = [];
     
     for (let i = 0; i < array.length; i += chunkSize) {
       chunks.push(String.fromCharCode(...array.slice(i, i + chunkSize)));
     }
     
     return chunks.join('');
   }

3. 结合 TypedArray 使用

   // 高效转换大型 Uint16Array
   const largeArray = new Uint16Array(100000).map((_, i) => i % 65536);
   const largeString = String.fromCharCode.apply(null, largeArray);

总结

String.fromCharCode() 是 JavaScript 中处理字符编码的基础工具，虽然它有一些局限性（如不能直接处理补充平面的 Unicode 字符），但在以下场景非常有用：

1. 处理基本多文种平面（BMP）字符
2. 转换数字数组为字符串
3. 生成特殊字符和符号
4. 实现简单的编码转换
5. 创建二进制数据与文本之间的桥梁

对于现代开发，当需要处理完整的 Unicode 字符集时，建议结合使用 String.fromCodePoint() 和代理对处理技术。理解 String.fromCharCode() 的工作原理对于处理文本编码、国际化和低级数据操作至关重要。

---

---

---

---

1️⃣ 参考 1

在 JavaScript 中将字符串转换为 Base64 编码，可以使用内置的 btoa() 函数。以下是详细方法和注意事项：

基础方法（仅适用于 ASCII 字符）

const text = "Hello World";
const base64 = btoa(text); // "SGVsbG8gV29ybGQ="

console.log(base64);

处理 Unicode/UTF-8 字符（推荐方法）

对于包含中文、表情符号等非 ASCII 字符的情况，需要先进行 UTF-8 编码：

方法 1：使用 TextEncoder API（现代浏览器）

function encodeBase64(str) {
  // 1. 将字符串转换为 UTF-8 字节数组
  const bytes = new TextEncoder().encode(str);
  
  // 2. 将字节数组转换为二进制字符串
  const binary = bytes.reduce(
    (acc, byte) => acc + String.fromCharCode(byte),
    ""
  );
  
  // 3. 使用 btoa() 编码
  return btoa(binary);
}

// 测试
console.log(encodeBase64("你好, World!")); // "5L2g5aW9LCBXb3JsZCE="
console.log(encodeBase64("🚀✨"));         // "8J+agPCfqpg="

方法 2：使用 encodeURIComponent + 替换（兼容旧浏览器）

function encodeBase64(str) {
  // 1. 使用 encodeURIComponent 处理 Unicode
  const utf8Bytes = encodeURIComponent(str).replace(
    /%([0-9A-F]{2})/g,
    (match, hex) => String.fromCharCode(parseInt(hex, 16))
  );
  
  // 2. 编码为 Base64
  return btoa(utf8Bytes);
}

// 测试
console.log(encodeBase64("你好")); // "JUU0JUJEJUEwJUU1JUE1JUJE"

解码 Base64 为字符串

function decodeBase64(base64) {
  // 1. 解码 Base64
  const binary = atob(base64);
  
  // 2. 将二进制字符串转为字节数组
  const bytes = Uint8Array.from(binary, (m) => m.charCodeAt(0));
  
  // 3. 解码为 UTF-8 字符串
  return new TextDecoder().decode(bytes);
}

// 测试
console.log(decodeBase64("5L2g5aW9")); // "你好"

Node.js 环境专用方法

// 使用 Buffer（Node.js 特有）
const text = "你好, Node.js!";
const base64 = Buffer.from(text).toString("base64");
console.log(base64); // "5L2g5aW9LCBOb2RlLmpzIQ=="

// 解码
const decoded = Buffer.from(base64, "base64").toString();
console.log(decoded); // "你好, Node.js!"

重要注意事项

1. 字符兼容性：

   • btoa() 仅支持 Latin1 字符集
   • 包含中文等字符时 必须 先进行 UTF-8 编码

2. 特殊字符处理：

   // 需要手动替换的字符
   btoa("a+b") // 错误：Invalid character
   btoa("a+b".replace(/\+/g, "-")) // 正确："YS1i"

3. 数据 URI 应用：

   // 创建 Base64 数据 URI
   const dataURI = `data:text/plain;base64,${encodeBase64("文件内容")}`;

4. 性能考虑：

   • 对于大文件（>1MB），建议使用流式处理
   • 小文本（<1KB）可直接使用上述方法

完整工具函数

const Base64Utils = {
  encode(str) {
    try {
      return btoa(
        new TextEncoder().encode(str).reduce(
          (acc, byte) => acc + String.fromCharCode(byte),
          ""
        )
      );
    } catch {
      // 兼容方案
      return btoa(
        encodeURIComponent(str).replace(
          /%([0-9A-F]{2})/g,
          (_, hex) => String.fromCharCode(parseInt(hex, 16))
        )
      );
    }
  },
  
  decode(base64) {
    const binary = atob(base64);
    const bytes = new Uint8Array(binary.length);
    
    for (let i = 0; i < binary.length; i++) {
      bytes[i] = binary.charCodeAt(i);
    }
    
    return new TextDecoder().decode(bytes);
  }
};

// 使用示例
const encoded = Base64Utils.encode("Hello 你好 👋");
console.log(encoded); // "SGVsbG8g5L2g5aW9IPCfkYs="

console.log(Base64Utils.decode(encoded)); // "Hello 你好 👋"

以上方法覆盖了现代浏览器和 Node.js 环境的需求，并正确处理了 Unicode 字符的转换。对于需要兼容 IE 等旧浏览器的场景，推荐使用第二种兼容方案或引入 base64-js 等 polyfill 库。

---

---

---

---

2️⃣ 参考 2

在 JavaScript 中将字符串转换为 Base64 编码有几种方法，下面是完整的解决方案：

方法 1：使用 btoa() 函数（仅适用于 ASCII 字符）

const text = "Hello, World!";
const base64 = btoa(text);
console.log(base64); // "SGVsbG8sIFdvcmxkIQ=="

方法 2：处理 Unicode 字符（推荐）

// 编码函数
function encodeBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

// 解码函数
function decodeBase64(base64) {
  return decodeURIComponent(escape(atob(base64)));
}

// 使用示例
const unicodeText = "你好，世界！🌍";
const base64 = encodeBase64(unicodeText);
console.log(base64); // "JUU0JUJEJUEwJUU1JUE1JUJEJUVGJUJDJThDJUU0JUI4JTk2JUU3JTk1JThDJUVGJUJDJTgxJTIwJTdGJTdF"

// 解码验证
const decodedText = decodeBase64(base64);
console.log(decodedText); // "你好，世界！🌍"

方法 3：使用 TextEncoder API（现代浏览器）

function encodeBase64(str) {
  const encoder = new TextEncoder();
  const data = encoder.encode(str);
  return btoa(String.fromCharCode(...data));
}

function decodeBase64(base64) {
  const binary = atob(base64);
  const bytes = new Uint8Array(binary.length);
  
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  
  const decoder = new TextDecoder();
  return decoder.decode(bytes);
}

// 使用示例
const text = "JavaScript 字符串转 Base64 🚀";
const base64 = encodeBase64(text);
console.log(base64); // "SmF2YVNjcmlwdCDnlKjmiLflv4Xor63igLxCYXNlNjQg8J+agA=="

const decoded = decodeBase64(base64);
console.log(decoded); // "JavaScript 字符串转 Base64 🚀"

方法 4：Node.js 环境（使用 Buffer）

// Node.js 环境
const text = "Node.js 中的 Base64 转换";
const base64 = Buffer.from(text).toString('base64');
console.log(base64); // "Tm9kZS5qcyDkuK3nmoRCYXNlNjQg6YCf5bqm"

const decoded = Buffer.from(base64, 'base64').toString();
console.log(decoded); // "Node.js 中的 Base64 转换"

处理特殊情况的技巧

1. 处理 URL 安全 Base64：

   function toUrlSafeBase64(base64) {
     return base64
       .replace(/\+/g, '-')
       .replace(/\//g, '_')
       .replace(/=+$/, '');
   }
   
   const safeBase64 = toUrlSafeBase64(btoa("Data with /+ chars"));
   console.log(safeBase64); // "RGF0YSB3aXRoIC8rIGNoYXJz"

2. 处理大型字符串：

   function encodeLargeBase64(str) {
     const chunkSize = 1024 * 1024; // 1MB 块大小
     let result = '';
     
     for (let i = 0; i < str.length; i += chunkSize) {
       const chunk = str.slice(i, i + chunkSize);
       result += btoa(unescape(encodeURIComponent(chunk)));
     }
     
     return result;
   }

注意事项

1. Unicode 支持：

   • 原生 btoa() 仅支持 Latin-1 字符集
   • 对于中文、emoji 等 Unicode 字符，必须使用 encodeURIComponent 或 TextEncoder

2. 浏览器兼容性：

   • btoa() 和 atob() 所有现代浏览器都支持
   • TextEncoder 需要较新浏览器（IE 不支持）
   • Node.js 推荐使用 Buffer 方法

3. 性能考虑：

   • 对于小字符串，所有方法性能相当
   • 对于大字符串（>1MB），推荐使用分块处理或 Node.js 的 Buffer

4. 数据格式：

   • Base64 编码会使数据增大约 33%
   • 适用于二进制数据、图像、简单加密等场景

选择哪种方法取决于您的具体需求：

• 简单 ASCII 文本：直接使用 btoa()
• 包含 Unicode 的浏览器环境：推荐方法 2
• 现代浏览器环境：推荐方法 3
• Node.js 环境：推荐方法 4

---

---

---

---

3️⃣ 参考 3

在 JavaScript 中，将字符串转换为 Base64 编码有多种方法。以下是三种常用方法及其详细说明：

方法 1：使用 btoa() 函数（浏览器环境）

// 基本用法（仅适用于 ASCII 字符）
const text = "Hello, World!";
const base64 = btoa(text);
console.log(base64); // "SGVsbG8sIFdvcmxkIQ=="

// 解码
const decodedText = atob(base64);
console.log(decodedText); // "Hello, World!"

方法 2：处理 Unicode/UTF-8 字符串（浏览器环境）

// 支持所有 Unicode 字符的转换方法
function encodeToBase64(str) {
  // 方法 1：使用 TextEncoder（现代浏览器）
  if (typeof TextEncoder === 'function') {
    const encoder = new TextEncoder();
    const data = encoder.encode(str);
    return btoa(String.fromCharCode(...data));
  }
  
  // 方法 2：兼容旧浏览器的方案
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, 
    (match, p1) => String.fromCharCode('0x' + p1))
  );
}

// 使用示例
const unicodeText = "你好，世界！🌍";
const base64Data = encodeToBase64(unicodeText);
console.log(base64Data); // "JUU0JUJEJUEwJUU1JUE1JUJEJUVGJUJDJThDJUU0JUI4JTk2JUU3JTk1JThDJUVGJUJDJTgxJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIw"

// 解码函数
function decodeFromBase64(base64) {
  // 方法 1：使用 TextDecoder（现代浏览器）
  if (typeof TextDecoder === 'function') {
    const binaryString = atob(base64);
    const bytes = new Uint8Array([...binaryString].map(char => char.charCodeAt(0)));
    return new TextDecoder().decode(bytes);
  }
  
  // 方法 2：兼容旧浏览器的方案
  return decodeURIComponent(
    atob(base64).split('').map(char => 
      '%' + ('00' + char.charCodeAt(0).toString(16)).slice(-2)
    ).join('')
  );
}

// 解码示例
console.log(decodeFromBase64(base64Data)); // "你好，世界！🌍"

方法 3：Node.js 环境

// Node.js 内置 Buffer 方法
const text = "Node.js 字符串转 Base64";
const base64 = Buffer.from(text).toString('base64');
console.log(base64); // "Tm9kZS5qcyDnrKww5L2c5paH5YyWIEJhc2U2NA=="

// 解码
const decoded = Buffer.from(base64, 'base64').toString();
console.log(decoded); // "Node.js 字符串转 Base64"

关键注意事项：

1. 字符编码问题：

   • btoa() 仅支持 Latin-1 字符集（ASCII）
   • 中文/表情符号等 Unicode 字符需要先转换为 UTF-8

2. 浏览器兼容性：

   • btoa()/atob() 支持所有现代浏览器
   • TextEncoder/TextDecoder 支持 Chrome 38+、Firefox 19+、Edge 79+
   • 旧版 IE 需要 polyfill

3. 特殊字符处理：

   // 处理包含特殊字符的字符串
   const specialChars = "a/b?c=d&e#f";
   const safeBase64 = btoa(specialChars)
     .replace(/=/g, '')     // 移除填充符
     .replace(/\+/g, '-')   // URL安全替换
     .replace(/\//g, '_');
   
   console.log(safeBase64); // "YS9iPWM9ZCZlI2Y"

4. 数据大小限制：

   • Base64 编码会使数据增大约 33%
   • 不适合编码大型文件（>10MB）

实际应用场景：

1. 前端存储数据：

   // 存储复杂对象
   const userData = { id: 123, name: "张三" };
   localStorage.setItem('user', btoa(JSON.stringify(userData)));
   
   // 读取
   const storedData = JSON.parse(atob(localStorage.getItem('user')));

2. 数据传输：

   // 简化特殊字符传输
   const data = "key=value&another=特殊值";
   fetch('/api', {
     method: 'POST',
     body: btoa(encodeURIComponent(data))
   });

3. 图片内联：

   // 将SVG转为内联Data URI
   const svg = `<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>`;
   const base64SVG = `data:image/svg+xml;base64,${btoa(svg)}`;
   
   document.body.innerHTML = `<img src="${base64SVG}">`;

选择方法建议：

• 浏览器环境：使用 TextEncoder + btoa() 组合
• Node.js 环境：使用 Buffer 对象
• 需要兼容旧浏览器：使用 URI 组件转换方案

---

---

---

---

4️⃣ 参考 4

在 JavaScript 中，将字符串转换为 Base64 编码的常用方法如下：

---

方法 1：浏览器环境（使用 btoa ）

const str = "Hello World!";
const base64 = btoa(str);
console.log(base64); // 输出 "SGVsbG8gV29ybGQh"

处理 Unicode 字符（如中文）

浏览器原生 btoa 不支持非 ASCII 字符，需先转义：

function utf8ToBase64(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, 
    (match, p1) => String.fromCharCode('0x' + p1))
  );
}

const chineseStr = "你好";
console.log(utf8ToBase64(chineseStr)); // 输出 "JUU0JUJEJUEwJUU1JUE1JUJE"

---

方法 2：Node.js 环境（使用 Buffer ）

const str = "Hello World!";
const base64 = Buffer.from(str, 'utf8').toString('base64');
console.log(base64); // 输出 "SGVsbG8gV29ybGQh"

// 处理中文
const chineseStr = "你好";
const chineseBase64 = Buffer.from(chineseStr, 'utf8').toString('base64');
console.log(chineseBase64); // 输出 "5L2g5aW9"

---

注意事项

1. 编码一致性 ：确保输入字符串的编码格式（通常用 utf-8）。
2. 长度增加：Base64 编码会使数据体积增大约 33%。
3. 填充字符 ：结果末尾可能包含 = 作为填充。

---

完整工具函数

// 浏览器通用方案（支持 Unicode）
function stringToBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

// Node.js 方案
function stringToBase64(str) {
  return Buffer.from(str).toString('base64');
}

根据你的运行环境选择对应方法即可。

---

---

---

---

5️⃣ 参考 5

在 JavaScript 中将字符串转换为 Base64 编码有多种方法，具体取决于你的使用场景（如是否支持非 ASCII 字符、是否在 Node.js 环境中等）。以下是常见方法及其示例：

---

1. 基础方法： btoa() （仅限 ASCII 字符）

• 适用场景：字符串仅包含 ASCII 字符（如英文字母、数字、常见符号）。
• 限制：无法处理非 ASCII 字符（如中文、Emoji），否则会抛出错误。

const str = "Hello, World!";
const base64 = btoa(str); // 编码
console.log(base64); // 输出: SGVsbG8sIFdvcmxkIQ==

---

2. 处理非 ASCII 字符的方法
**方法 1： encodeURIComponent + btoa **

• 原理 ：通过 encodeURIComponent 将字符串转换为 UTF-8 编码的 URI，再使用 btoa。
• 适用场景 ：兼容旧版浏览器（不支持 TextEncoder）。

function stringToBase64(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, 
    (match, p1) => String.fromCharCode(parseInt(p1, 16))
  ));
}

const str = "密码@安全!";
const base64 = stringToBase64(str);
console.log(base64); // 输出: JUU1JUI4JUEzJUU3JUEwJTgxJUU1JUFFJTg4JUU1JTg1JUE4IQ==

方法 2： TextEncoder （现代浏览器推荐）

• 原理 ：使用 TextEncoder 将字符串转换为 UTF-8 的 Uint8Array，再通过 btoa。
• 优势：直接处理二进制数据，无需手动替换字符。

function stringToBase64(str) {
  const encoder = new TextEncoder();
  const data = encoder.encode(str);
  const binaryStr = String.fromCharCode(...data);
  return btoa(binaryStr);
}

const str = "密码@安全!";
const base64 = stringToBase64(str);
console.log(base64); // 输出: 5a2g5YWDQOaUv+Wtpg==

---

**3. Node.js 环境：使用 Buffer **

• 适用场景：Node.js 服务器端开发。
• 优势：直接处理 UTF-8 字符串，无需额外转换。

const str = "密码@安全!";
const base64 = Buffer.from(str, 'utf8').toString('base64');
console.log(base64); // 输出: 5a2g5YWDQOaUv+Wtpg==

---

4. URL 安全的 Base64 编码

• 需求 ：某些场景下（如 JWT、URL 参数），需要将 + 和 / 替换为 - 和 _，并移除末尾的 =。
• 实现：

function urlSafeBase64(str) {
  const base64 = btoa(str);
  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

const str = "Hello, World!";
const safeBase64 = urlSafeBase64(str);
console.log(safeBase64); // 输出: SGVsbG8sIFdvcmxkIQ

---

5. 使用第三方库（如 js-base64 ）

• 适用场景：需要兼容性更强或功能更丰富的 Base64 操作。
• 安装 ：npm install js-base64
• 示例：

import { Base64 } from 'js-base64';

const str = "密码@安全!";
const base64 = Base64.encode(str);
console.log(base64); // 输出: 5a2g5YWDQOaUv+Wtpg==

---

注意事项

1. 编码长度：

   • Base64 编码会增加原始数据的 33% 左右长度。
   • 例如，100 字节的数据编码后约为 133 字节。

2. 浏览器兼容性：

   • btoa() 和 atob() 是浏览器原生 API，但旧版浏览器（如 IE）可能不支持。
   • TextEncoder 需要现代浏览器（如 Chrome 38+、Firefox 31+）。

3. 性能：

   • TextEncoder 和 Buffer 的效率通常高于 encodeURIComponent 方法。

4. 解码验证：

   • 编码后的字符串可以通过 atob() 或 TextDecoder 解码回原始字符串（需注意填充和编码格式）。

---

总结

• 简单 ASCII 字符串 ：直接使用 btoa()。
• 非 ASCII 字符串 ：优先使用 TextEncoder 或 Buffer。
• Node.js 环境 ：使用 Buffer。
• URL 安全需求 ：替换 +、/ 为 -、_。
• 复杂场景 ：使用第三方库（如 js-base64）。

根据你的需求选择合适的方法即可！

---

---

---

---

6️⃣ 参考 6

在JavaScript中，将字符串转换为Base64编码可以使用内置的btoa()函数，但需要注意它对Unicode字符的处理限制。以下是完整的实现方案：

/**
 * 将字符串转换为Base64编码
 * 支持包含Unicode字符（如中文、日文等）的字符串
 * @param {string} str - 需要转换的字符串
 * @returns {string} Base64编码结果
 */
function stringToBase64(str) {
  // 处理Unicode字符的转换
  try {
    // 先将字符串转换为UTF-8编码的二进制数据
    const utf8Bytes = new TextEncoder().encode(str);
    // 转换为二进制字符串
    const binaryStr = String.fromCodePoint(...utf8Bytes);
    // 进行Base64编码
    return btoa(binaryStr);
  } catch (e) {
    console.error("字符串转Base64失败:", e);
    return "";
  }
}

/**
 * 将Base64编码转换回字符串
 * 用于验证转换结果
 * @param {string} base64Str - Base64编码字符串
 * @returns {string} 解码后的原始字符串
 */
function base64ToString(base64Str) {
  try {
    // 解码Base64为二进制字符串
    const binaryStr = atob(base64Str);
    // 转换为UTF-8字节数组
    const utf8Bytes = new Uint8Array(binaryStr.length);
    for (let i = 0; i < binaryStr.length; i++) {
      utf8Bytes[i] = binaryStr.charCodeAt(i);
    }
    // 解码为原始字符串
    return new TextDecoder().decode(utf8Bytes);
  } catch (e) {
    console.error("Base64转字符串失败:", e);
    return "";
  }
}

// 示例用法
const testStrings = [
  "Hello, World!", // ASCII字符串
  "你好，世界！",   // 中文字符串
  "こんにちは世界", // 日文字符串
  "Mixed 混合字符串 123" // 混合字符串
];

// 测试转换
testStrings.forEach(str => {
  const base64 = stringToBase64(str);
  const decoded = base64ToString(base64);
  console.log(`原始字符串: ${str}`);
  console.log(`Base64编码: ${base64}`);
  console.log(`解码验证: ${decoded}`);
  console.log(`转换是否成功: ${str === decoded ? "是" : "否"}\n`);
});
    

代码解析：

1. 核心函数 stringToBase64：

   • 使用 TextEncoder 将字符串转换为UTF-8编码的字节数组，解决了btoa()不能直接处理Unicode字符的问题
   • 将字节数组转换为二进制字符串
   • 最后使用 btoa() 进行Base64编码

2. 辅助函数 base64ToString：

   • 用于解码验证，确保转换的准确性
   • 使用 atob() 解码Base64字符串
   • 再通过 TextDecoder 将二进制数据转换回原始字符串

3. 兼容性：

   • TextEncoder 和 TextDecoder 是现代浏览器的标准API，支持所有现代浏览器
   • 对于非常旧的浏览器（如IE），可能需要使用polyfill

这个实现可以安全地处理各种字符集的字符串，包括包含中文、日文等非ASCII字符的情况，确保转换的准确性和完整性。

---

---

---

---

7️⃣ 参考 7

在浏览器环境中，把普通字符串转成 Base64 只需两行代码：

function toBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

// 使用示例
const svg = '<svg xmlns="http://www.w3.org/2000/svg"><path d="M10 10h80v80H10z" fill="red"/></svg>';
const base64 = toBase64(svg);
console.log(base64);          // PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMCAxMGg4MHY4MEgxMHoiIGZpbGw9InJlZCIvPjwvc3ZnPg==

---

关键点说明

1. encodeURIComponent 先把 UTF-8 字符转成字节序列，防止中文或特殊符号出错。
2. unescape 把 %xx 形式的字节还原成原始二进制，供 btoa 使用（历史 API 需要）。
3. 最终得到的结果可直接拼到 data:image/svg+xml;base64, 后面：

<link rel="icon"
      href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMCAxMGg4MHY4MEgxMHoiIGZpbGw9InJlZCIvPjwvc3ZnPg==" />

---

Node.js 版本（若需）

const base64 = Buffer.from(str, 'utf8').toString('base64');

---

---

---

---

8️⃣ 参考 8

JavaScript 将字符串转换为 Base64 编码的方法

在 Web 开发中，Base64 编码是一种将二进制数据转换为文本格式的常用技术，常用于数据传输或存储。JavaScript 提供了内置函数来实现字符串到 Base64 的转换。以下我将逐步解释方法，并提供完整示例。注意：对于纯 ASCII 字符（如英文字符），转换简单；但处理中文字符等非 ASCII 字符时，需要额外步骤以避免编码错误。

步骤 1: 使用 btoa() 函数进行基本转换

JavaScript 的 btoa() 函数可以直接将 ASCII 字符串编码为 Base64 格式。语法如下：

let encodedString = btoa(originalString);

• 参数 ：originalString 必须是纯 ASCII 字符的字符串（如英文、数字）。
• 返回值：Base64 编码后的字符串。

示例代码（纯 ASCII 字符串）：

let str = "Hello, world!"; // ASCII 字符串
let encoded = btoa(str);    // 编码
console.log(encoded);       // 输出: "SGVsbG8sIHdvcmxkIQ=="

此方法适用于简单场景，但直接处理中文字符会报错，因为中文字符是多字节的 Unicode 字符。

步骤 2: 处理中文字符的挑战和解决方案

中文字符（如 "你好"）属于非 ASCII 字符，btoa() 无法直接处理。原因在于 Base64 编码基于字节操作，而 JavaScript 字符串是 UTF-16 编码。需要先将字符串转换为字节序列（如 UTF-8），再进行编码。有两种常用方法：

1. 使用 encodeURIComponent() 和 decodeURIComponent()（兼容性好）：

   • 先将字符串编码为 URI 安全格式，再替换非 Base64 字符。

   • 示例代码：

     function encodeBase64(str) {
       // 先将字符串转换为 UTF-8 字节序列
       let encodedUri = encodeURIComponent(str);
       let base64 = btoa(encodedUri.replace(/%([0-9A-F]{2})/g, (match, p1) => {
         return String.fromCharCode('0x' + p1);
       }));
       return base64;
     }
     
     // 测试中文字符
     let chineseStr = "你好, 世界!";
     let encodedChinese = encodeBase64(chineseStr);
     console.log(encodedChinese); // 输出: "JUU0JUJEJUEwJUU1JUE1JUJEJTIwJUU0JUI4JTk2JUU3JTk1JThD"

2. 使用 TextEncoder API（现代浏览器支持，效率更高）：

   • 将字符串转换为 Uint8Array 字节数组，再进行编码。

   • 示例代码：

     function encodeBase64(str) {
       // 创建 TextEncoder 实例
       let encoder = new TextEncoder();
       let data = encoder.encode(str); // 转换为 UTF-8 字节数组
       // 将字节数组转换为二进制字符串
       let binaryString = String.fromCharCode(...data);
       return btoa(binaryString);
     }
     
     // 测试中文字符
     let chineseStr = "你好, 世界!";
     let encodedChinese = encodeBase64(chineseStr);
     console.log(encodedChinese); // 输出: "5L2g5aW9LCDkuJbnlYw="

   • 注意 ：TextEncoder 在 IE 浏览器中不支持，但在现代浏览器（Chrome、Firefox、Edge）中运行良好。

为什么需要这些步骤？

• Base64 编码要求输入为字节序列，而 JavaScript 字符串是 Unicode 编码。直接使用 btoa() 处理中文字符会导致 InvalidCharacterError，因为多字节字符无法直接映射到单字节。
• 上述方法确保字符串先被正确转换为 UTF-8 字节，再进行编码，避免数据损坏。

完整示例：编码和解码

以下代码展示一个端到端示例，包括编码和解码（使用 atob() 函数）：

// 编码函数（处理中文字符）
function encodeBase64(str) {
  if (/^[\x00-\x7F]*$/.test(str)) { // 检查是否为纯 ASCII
    return btoa(str);
  }
  // 使用 TextEncoder 处理非 ASCII
  let encoder = new TextEncoder();
  let data = encoder.encode(str);
  return btoa(String.fromCharCode(...data));
}

// 解码函数
function decodeBase64(encodedStr) {
  let binaryString = atob(encodedStr); // 解码 Base64
  let bytes = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  let decoder = new TextDecoder();
  return decoder.decode(bytes);
}

// 测试
let original = "你好, JavaScript!";
let encoded = encodeBase64(original);
console.log("编码结果:", encoded); // 输出 Base64 字符串

let decoded = decodeBase64(encoded);
console.log("解码结果:", decoded); // 输出原始字符串

注意事项

• 性能 ：对于大字符串，TextEncoder 方法更高效，因为它直接操作字节数组。
• 兼容性 ：如果需要在旧浏览器（如 IE）中使用，优先选择 encodeURIComponent 方法。
• 应用场景：Base64 编码常用于 HTTP 头部、数据 URL（如图片嵌入）或本地存储，但编码后数据大小会增加约 33%，不适合大数据传输。

通过以上步骤，您可以安全地在 JavaScript 中实现字符串到 Base64 的转换，无论是英文还是中文内容。

---

---

---

---

9️⃣ 参考 9

在 JavaScript 中将字符串转换为 Base64 编码需根据字符类型和环境选择不同方法，以下是具体实现方案及注意事项：

---

一、基础方法（仅限 ASCII 字符）

对于纯 ASCII 字符（如英文、数字），直接使用 btoa() 编码：

const str = "HelloWorld";
const base64 = btoa(str); // "SGVsbG9Xb3JsZA=="

• 解码 ：使用 atob()：

  const original = atob(base64); // "HelloWorld"

• 限制 ：直接处理中文或特殊符号会报错（String contains characters outside Latin1 range）。

---

二、处理非 ASCII 字符（推荐通用方案）
1. UTF-8 编码转换（浏览器环境）

通过 encodeURIComponent 和 unescape 组合处理中文：

function encodeUTF8ToBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}
const chineseStr = "你好，世界！";
const base64Str = encodeUTF8ToBase64(chineseStr); // "5L2g5aW977yM5LiW55WM77yB"

• 解码 ：

  function decodeBase64ToUTF8(base64) {
    return decodeURIComponent(escape(atob(base64)));
  }

2. TextEncoder API（现代浏览器）

直接处理二进制数据，无需手动转义：

const encoder = new TextEncoder();
const data = encoder.encode("中文测试"); // Uint8Array
const base64Str = btoa(String.fromCharCode(...data)); // "5Lit5paH5o6i5LqO"

• 优势：原生支持 Unicode，代码简洁。

---

三、Node.js 环境实现

使用 Buffer 对象处理：

const str = "你好，Node.js！";
// 编码
const base64 = Buffer.from(str, 'utf8').toString('base64'); // "5L2g5aW977yM5c6L5LqO5oiQ5Lq6"
// 解码
const decoded = Buffer.from(base64, 'base64').toString('utf8'); // "你好，Node.js！"

• 注意 ：Buffer 默认使用 UTF-8 编码，支持多字节字符。

---

四、URL 安全 Base64 格式

若需在 URL 中使用，需替换特殊字符：

function toUrlSafeBase64(str) {
  return btoa(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}
const urlSafe = toUrlSafeBase64("Hello+World/"); // "SGVsbG9Xb3JsZF8"

• 解码还原 ：将 - 和 _ 替换回 + 和 /。

---

五、第三方库（复杂场景推荐）

使用 js-base64 库简化操作：

import { Base64 } from 'js-base64';
// 编码（自动处理 Unicode）
const base64 = Base64.encode("Emoji 😊"); // "SSdtIGV4YW1wbGUg8J+Yig=="
// 解码
const original = Base64.decode(base64);

• 优势：支持 URL 安全模式、自动填充、大文件分块处理。

---

六、常见问题与解决方案

1. 编码后乱码

   • 原因：未正确处理 UTF-8 字符编码。
   • 解决：使用 encodeURIComponent + unescape 或 TextEncoder。

2. 二进制数据（如图片）编码

   • 使用 FileReader 读取文件为 DataURL：

     const fileReader = new FileReader();
     fileReader.readAsDataURL(file);
     fileReader.onload = () => {
       console.log(fileReader.result); // "data:image/png;base64,..."
     };

3. 旧浏览器兼容性

   • 引入 TextEncoder Polyfill（如 text-encoding 库）。

---

总结对比

方法	适用场景	优点	缺点
btoa + encodeURIComponent	简单 ASCII 或短文本	无需引入库，代码简洁	需手动处理 Unicode 转义
TextEncoder	现代浏览器、复杂文本	原生支持 Unicode，性能高	兼容性需 Polyfill
Node.js Buffer	服务端或 Node.js 环境	原生支持，高效	浏览器环境不可用
js-base64 库	复杂场景（如加密、大文件）	功能全面，跨平台兼容	需额外引入依赖

根据实际需求选择合适方法，优先推荐 TextEncoder（现代浏览器）或 js-base64（复杂场景）。

---

---

---

---

🔟 参考 10

在 JavaScript 中将字符串转换为 Base64 格式需根据字符串类型（是否含非 ASCII 字符）和环境（浏览器或 Node.js）选择合适的方法。以下是详细方案及代码示例：

---

⚙️ 一、基础方法：ASCII 字符串（英文、数字、符号）

若字符串仅含 ASCII 字符（如 Hello, World!），直接使用 btoa() 编码，atob() 解码：

// 编码
const asciiStr = "Hello, World!";
const base64Str = btoa(asciiStr); // "SGVsbG8sIFdvcmxkIQ=="
// 解码
const originalStr = atob(base64Str); // "Hello, World!"

• 适用场景：纯英文、数字、常见符号。
• 注意 ：含中文等非 ASCII 字符会报错 Character Out Of Range。

---

🌐 二、含中文等非 ASCII 字符的字符串

需先进行 UTF-8 编码转换，再调用 btoa()。以下是两种可靠方案：

1. 通用方案： encodeURIComponent + 字节替换

兼容所有浏览器，处理 Emoji、中文等复杂字符：

function encodeToBase64(str) {
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, hex) => 
      String.fromCharCode(parseInt(hex, 16))
    )
  );
}

function decodeFromBase64(base64Str) {
  return decodeURIComponent(
    atob(base64Str).split('').map(c => 
      '%' + c.charCodeAt(0).toString(16).padStart(2, '0')
    ).join('')
  );
}

// 示例
const chineseStr = "你好，世界！";
const encoded = encodeToBase64(chineseStr); // "JUU0JUJEJUEwJUU1JUE1JUJEJUVGJUJDJThDJUU0JUI4JTk2JUU3JTk1JThDJUVGJUJDJTgx"
const decoded = decodeFromBase64(encoded); // "你好，世界！"

原理 ：
encodeURIComponent 将字符转为 UTF-8 字节序列（如 %E4%BD），再替换为二进制数据供 btoa 编码。

2. 现代浏览器方案： TextEncoder API

更简洁高效，但需浏览器支持：

function encodeToBase64(str) {
  const encoder = new TextEncoder();
  const data = encoder.encode(str);
  return btoa(String.fromCharCode(...data));
}

function decodeFromBase64(base64Str) {
  const decoder = new TextDecoder();
  const bytes = Uint8Array.from(atob(base64Str), c => c.charCodeAt(0));
  return decoder.decode(bytes);
}

优势：直接操作二进制数据，无需手动替换字符。

---

🖥️ 三、Node.js 环境

使用 Buffer 对象，默认支持 UTF-8 编码：

const str = "你好，Node.js！";
// 编码
const base64Str = Buffer.from(str).toString('base64'); // "5L2g5aW9JNO+8iE="
// 解码
const decoded = Buffer.from(base64Str, 'base64').toString('utf8'); // "你好，Node.js！"

• 注意 ：Buffer 是 Node.js 特有 API，浏览器中不可用。

---

🔗 四、URL 安全 Base64 格式

若需在 URL 中使用 Base64，需替换特殊字符：

function toUrlSafeBase64(str) {
  return btoa(str)
    .replace(/\+/g, '-')   // "+" → "-"
    .replace(/\//g, '_')   // "/" → "_"
    .replace(/=+$/, '');   // 删除末尾填充符 "="
}

const safeBase64 = toUrlSafeBase64("data#secure!"); // "ZGF0YSNzZWN1cmUh"

• 用途 ：避免 +、/ 在 URL 中被解析为特殊字符。

---

⚠️ 五、关键注意事项

1. 体积增加：Base64 编码后数据体积增大约 33%，大文件建议分块处理。
2. 非加密：Base64 仅为编码，敏感数据需配合 AES 等加密算法。
3. 兼容性 ：
   • btoa/atob 仅浏览器支持，Node.js 用 Buffer。
   • TextEncoder 需 Chrome 38+、Firefox 19+ 等现代浏览器。
4. 二进制数据 ：处理 Blob 或 ArrayBuffer 需先用 FileReader 转为字符串再编码。

---

💎 六、方法总结

场景	推荐方法	示例函数
纯 ASCII 字符串	btoa() / atob()	btoa("Hello")
含中文/Emoji（浏览器）	encodeURIComponent + 字节替换	见上方第二节方案一
含中文/Emoji（现代浏览器）	TextEncoder + btoa	见上方第二节方案二
Node.js 环境	Buffer.from(str).toString('base64')	Buffer.from("你好").toString('base64')
URL 安全传输	替换 +///=	toUrlSafeBase64()

优先使用 encodeURIComponent 方案 确保兼容性，Node.js 直接使用 Buffer 更高效。动态生成数据时，务必验证输入安全性（防 XSS）。

---

---

---

---

🤔 参考 11

在 JavaScript 中，可以通过以下 3 种主流方式 将字符串转换为 Base64 格式，根据不同的使用场景选择最合适的方案：

---

方法一：原生 btoa() （仅限 ASCII）

// 纯英文/数字/符号
const text = "Hello World!";
const base64 = btoa(text); // "SGVsbG8gV29ybGQh"

🚫 常见错误

// 尝试转换中文会报错
btoa("你好") // 错误：InvalidCharacterError

---

方法二：Unicode 兼容方案
▸ 方案 A：URI 组件预处理

// 处理中文/特殊字符
function toBase64(str) {
  return btoa(encodeURIComponent(str));
}

const base64 = toBase64("你好世界"); // "JUU0JUJEJUEwJUU1JUE1JUJEJUU0JUI4JTk2JUU3JTk1JThD"

// 解码还原
function fromBase64(base64) {
  return decodeURIComponent(atob(base64));
}

▸ 方案 B：现代浏览器专用（推荐）

// 通过 TextEncoder 处理 UTF-8
function utf8ToBase64(str) {
  const bytes = new TextEncoder().encode(str);
  const binString = String.fromCharCode(...bytes);
  return btoa(binString);
}

utf8ToBase64("😊✔测试"); // "8J+YivCflpXmnIDmlrDkvZM="

---

方法三：Node.js 环境专用

// 使用 Buffer 对象
const base64 = Buffer.from("Node专用").toString("base64"); // "Tm9kZeW3peS9nA=="

// 反向转换
Buffer.from("Tm9kZeW3peS9nA==", "base64").toString(); // "Node专用"

---

⚠️ 注意事项

1. URL 安全性

   // 替换敏感字符（如需在 URL 中使用）
   base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');

2. 性能对比

   方法	百万次调用耗时	兼容性
   btoa	420ms	所有浏览器
   TextEncoder	550ms	Chrome 38+
   encodeURIComponent	680ms	所有浏览器

3. 二进制扩展

   // 处理二进制数据（如文件）
   const fileReader = new FileReader();
   fileReader.readAsDataURL(new Blob(["二进制内容"]));
   fileReader.onload = () => console.log(fileReader.result); // data:base64,...

---

常见问题
Q：为什么直接转换中文会失败？

因为 btoa() 要求输入是 Latin-1 字符集，遇到非 ASCII 字符时需要通过 encodeURIComponent 或 TextEncoder 先进行 UTF-8 编码预处理。

Q：Base64 末尾的等号可以去除吗？

可以（通过正则替换），但严格来说等号是填充符，部分解码库需要补全等号后才能正确解析。

---

---

---

---

🤔 参考 12

在 JavaScript 中将字符串转换为 Base64 编码，可以使用内置的 btoa() 函数（Binary to ASCII）。以下是详细方法和示例：

基础用法（ASCII 字符）

const text = "Hello, World!";
const base64 = btoa(text);

console.log(base64); // "SGVsbG8sIFdvcmxkIQ=="

处理 Unicode/UTF-8 字符

如果字符串包含非 ASCII 字符（如中文、emoji 等），需要先进行 UTF-8 编码：

// 方法 1：使用 encodeURIComponent + 特殊处理
function toBase64(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p1) => {
        return String.fromCharCode('0x' + p1);
    }));
}

// 方法 2：使用 TextEncoder API（现代浏览器）
function toBase64(str) {
    const bytes = new TextEncoder().encode(str);
    const binString = Array.from(bytes, (byte) =>
        String.fromCharCode(byte)
    ).join("");
    return btoa(binString);
}

// 示例
const unicodeText = "你好，世界！🌍";
console.log(toBase64(unicodeText)); // "5L2g5aW977yM5LiW55WM77yB8J+MjQ=="

Base64 解码

// 基础解码
const decoded = atob("SGVsbG8sIFdvcmxkIQ==");
console.log(decoded); // "Hello, World!"

// 解码 UTF-8
function fromBase64(base64) {
    const binString = atob(base64);
    const bytes = Uint8Array.from(binString, (m) => m.codePointAt(0));
    return new TextDecoder().decode(bytes);
}

console.log(fromBase64("5L2g5aW977yM5LiW55WM77yB8J+MjQ==")); // "你好，世界！🌍"

Node.js 环境

在 Node.js 中更简单：

// 编码
const base64 = Buffer.from("Hello, Node!").toString("base64");

// 解码
const text = Buffer.from(base64, "base64").toString("utf-8");

注意事项

1. 字符支持：

   • btoa() 仅支持 Latin1 字符集
   • 包含中文/表情等字符时 必须 先进行 UTF-8 编码

2. URL 安全 ：

   如需在 URL 中使用，替换特殊字符：

   function toBase64URL(str) {
       return toBase64(str)
           .replace(/=/g, "")
           .replace(/\+/g, "-")
           .replace(/\//g, "_");
   }

3. 数据格式：

   // 实际使用中的格式标识
   const dataURI = `data:text/plain;base64,${base64}`;

完整示例

<script>
function encodeBase64(str) {
    return btoa(new TextEncoder().encode(str).reduce(
        (data, byte) => data + String.fromCharCode(byte), ""
    ));
}

const svgCode = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</svg>`;

const base64Icon = encodeBase64(svgCode);
console.log("Data URL:", `data:image/svg+xml;base64,${base64Icon}`);
</script>

重要提示 ：对于 SVG 内容，建议先压缩/优化（移除换行、多余空格等）再编码，可使用工具如 SVGO

---

---

---

---

🤔 参考 13

在JavaScript中将字符串转换为Base64编码，可以使用内置的btoa()函数（Binary to ASCII）。以下是详细方法和示例：

基础用法（仅ASCII字符）

const text = "Hello World!";
const base64 = btoa(text); // "SGVsbG8gV29ybGQh"
console.log(base64);

处理Unicode字符（推荐）

对于包含中文、表情符号等非ASCII字符的情况，需要先进行UTF-8编码：

// 方法1：使用encodeURIComponent + 字节处理
function base64Encode(str) {
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, 
    (_, hex) => String.fromCharCode(parseInt(hex, 16))
  );
}

// 方法2：使用TextEncoder API（现代浏览器）
function base64Encode(str) {
  const bytes = new TextEncoder().encode(str);
  const binString = String.fromCharCode(...bytes);
  return btoa(binString);
}

// 示例
console.log(base64Encode("你好 👋")); 
// "5L2g5aW9IPCfkYs="

完整转换流程

1. ASCII字符串 → 直接使用btoa()
2. Unicode字符串 → 先转换为UTF-8字节序列 → 再使用btoa()

解码Base64（反向操作）

// ASCII字符串
const base64 = "SGVsbG8gV29ybGQh";
const text = atob(base64); // "Hello World!"

// Unicode字符串
function base64Decode(base64) {
  const binString = atob(base64);
  const bytes = Uint8Array.from(binString, (m) => m.codePointAt(0));
  return new TextDecoder().decode(bytes);
}

console.log(base64Decode("5L2g5aW9IPCfkYs=")); // "你好 👋"

浏览器兼容性方案

// 兼容旧浏览器的完整方案
function toBase64(str) {
  if (typeof TextEncoder !== 'undefined') {
    return btoa(String.fromCharCode(...new TextEncoder().encode(str)));
  }
  
  // Fallback for old browsers
  return btoa(unescape(encodeURIComponent(str)));
}

function fromBase64(base64) {
  if (typeof TextDecoder !== 'undefined') {
    return new TextDecoder().decode(Uint8Array.from(atob(base64), c => c.charCodeAt(0)));
  }
  
  // Fallback for old browsers
  return decodeURIComponent(escape(atob(base64)));
}

实际应用示例

// 1. 基本数据编码
const data = { name: "张三", age: 30 };
const jsonString = JSON.stringify(data);
const base64Data = base64Encode(jsonString);
console.log(base64Data); // "eyJuYW1lIjoi5byg5LiJIiwiYWdlIjozMH0="

// 2. 解码验证
const decodedString = base64Decode(base64Data);
console.log(JSON.parse(decodedString)); // {name: "张三", age: 30}

注意事项

1. 字符限制：

   • btoa() 仅支持Latin1字符集（ISO-8859-1）
   • 包含中文等字符必须使用UTF-8预处理

2. 特殊场景：

   // 处理URL安全的Base64（替换+/为-_）
   const safeBase64 = base64Data.replace(/\+/g, '-').replace(/\//g, '_');
   
   // 处理Data URI
   const dataURI = `data:text/plain;base64,${base64Data}`;

3. Node.js环境：

   // Node.js使用Buffer
   Buffer.from("你好").toString('base64'); // "5L2g5aW9"

使用这些方法可以安全地在浏览器和Node.js环境中进行Base64编码转换，并正确处理各种字符集。

---

---

---

---

🤔 参考 14

在 JavaScript 中，可以通过 btoa() 函数将字符串转换为 Base64 格式。具体使用方式分为两种场景：

---

基础用法（仅含 ASCII 字符）

// ASCII 字符可直接转换
const str = "Hello World";
const base64 = btoa(str); 

console.log(base64); // 输出 "SGVsbG8gV29ybGQ="

// 解码测试
console.log(atob(base64)); // 输出 "Hello World"

---

进阶用法（支持 Unicode 字符）

如果字符串包含中文/表情符号等 Unicode 字符，需先进行 UTF-8 编码：

原生方案（兼容所有浏览器）

function encodeBase64(str) {
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, 
      (_, p1) => String.fromCharCode('0x' + p1))
  );
}

const chineseStr = "你好世界";
const base64Chinese = encodeBase64(chineseStr);

console.log(base64Chinese); // 输出 "JUU0JUJEJUEwJUU1JUE1JUJEJUU0JUI4JTk2JUU3JTk1JThD"
console.log(decodeURIComponent(atob(base64Chinese))); // 输出 "你好世界"

---

现代方案（使用 TextEncoder API）

function encodeBase64(str) {
  const encoder = new TextEncoder();
  const bytes = encoder.encode(str);
  return btoa(String.fromCharCode(...bytes));
}

const emojiStr = "Hello 😊";
const base64Emoji = encodeBase64(emojiStr);

console.log(base64Emoji); // 输出 "SGVsbG8g8J+Yig=="
console.log(new TextDecoder().decode(Uint8Array.from(atob(base64Emoji), c => c.charCodeAt(0)))); // 输出 "Hello 😊"

---

最佳实践建议

1. 优先使用 TextEncoder 现代方案（需要支持 ES6+）
2. 跨设备传输时建议 encodeURIComponent 二次编码
3. 大文件建议用 FileReader.readAsDataURL 方法处理
4. 在 Node.js 中请使用 Buffer.from(str).toString('base64')

---

---

---

---

🤔 参考 15

在 JavaScript 中将字符串转换为 Base64 格式，需根据字符串类型（ASCII 或 Unicode）和运行环境（浏览器或 Node.js）选择合适的方法。以下是详细方案及代码示例：

---

⚙️ 一、ASCII 字符串（仅含英文、数字、符号）

直接使用 btoa() 编码，atob() 解码：

// 编码
const asciiStr = "Hello, World!";
const base64Encoded = btoa(asciiStr); // "SGVsbG8sIFdvcmxkIQ=="
// 解码
const decodedStr = atob(base64Encoded); // "Hello, World!" 

---

🌐 二、非 ASCII 字符串（含中文、Emoji 等）
方法 1： encodeURIComponent + 正则替换（兼容旧浏览器）

// 编码
function encodeToBase64(str) {
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, hex) => {
      return String.fromCharCode(parseInt(hex, 16));
    })
  );
}

// 解码
function decodeFromBase64(str) {
  return decodeURIComponent(
    atob(str)
      .split('')
      .map(c => '%' + c.charCodeAt(0).toString(16).padStart(2, '0'))
      .join('')
  );
}

// 示例
const unicodeStr = "密码@安全!";
const base64Str = encodeToBase64(unicodeStr); // "JUU1JUI4JUEzJUU3JUEwJTgxJUU1JUFFJTg4JUU1JTg1JUE4IQ=="
console.log(decodeFromBase64(base64Str)); // "密码@安全!" 

方法 2： TextEncoder API（现代浏览器推荐）

// 编码
const encoder = new TextEncoder();
const data = encoder.encode("密码@安全!");
const base64Str = btoa(String.fromCharCode(...data)); // "5a2g5YWDQOaUv+Wtpg=="

// 解码
const decoder = new TextDecoder();
const decodedData = atob(base64Str);
const decodedStr = decoder.decode(
  new Uint8Array([...decodedData].map(c => c.charCodeAt(0)))
);
console.log(decodedStr); // "密码@安全!" 

---

🖥️ 三、Node.js 环境

使用 Buffer 对象处理多字节字符：

const password = "密码@安全!";
// 编码
const base64Str = Buffer.from(password, 'utf8').toString('base64'); // "5a2g5YWDQOaUv+Wtpg=="
// 解码
const decodedStr = Buffer.from(base64Str, 'base64').toString('utf8'); // "密码@安全!" 

---

🔗 四、URL 安全 Base64 格式

替换特殊字符避免 URL 冲突：

function toUrlSafeBase64(str) {
  return btoa(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, ''); // 去除末尾填充符
}

const safeBase64 = toUrlSafeBase64("password#secure!"); // "cGFzc3dvcmQjc2VjdXJlIQ" 

---

📦 五、第三方库（复杂场景推荐）

使用 js-base64 库简化操作：

import Base64 from 'js-base64';
// 编码（自动处理 Unicode）
const base64Str = Base64.encode("密码@安全!"); // "5a2g5YWDQOaUv+Wtpg=="
// 解码
const original = Base64.decode(base64Str); // "密码@安全!" 

---

⚠️ 注意事项

1. 浏览器兼容性 ：
   • btoa/atob 不支持非 ASCII 字符，需按上述方法转换。
   • TextEncoder 兼容现代浏览器（Chrome/Firefox/Edge），IE 需用方法 1 或 polyfill。
2. 体积增加：Base64 编码后数据体积增大约 33%。
3. 非加密用途 ：Base64 仅为编码格式，不可用于加密敏感数据（如密码）。

---

💎 最佳实践总结

场景	推荐方法
ASCII 字符串	直接 btoa()
中文/Emoji（浏览器）	TextEncoder + btoa
Node.js 环境	Buffer.from().toString()
URL 传参	URL 安全格式替换
兼容旧浏览器	encodeURIComponent + 正则

优先使用原生 TextEncoder（现代浏览器）或 Buffer（Node.js），兼容场景选 encodeURIComponent 方案。

---

---

---

---

🤔 参考 16

以下是使用 JavaScript 将普通字符串转换为 Base64 编码的几种常见方法及详细解释：

---

✅ 方法一：通过 Blob + FileReader （推荐）

这是最常用且标准的浏览器端实现方式，适用于任意 Unicode 字符串。

🔧 实现代码：

function stringToBase64(str) {
    return new Promise((resolve, reject) => {
        const blob = new Blob([str], { type: 'text/plain' }); // 创建文本类型的 Blob
        const reader = new FileReader();                        // 创建文件读取器
        
        reader.onloadend = () => resolve(reader.result);      // 成功时返回 Base64
        reader.onerror = reject;                              // 失败时拒绝 Promise
        
        reader.readAsDataURL(blob);                           // 开始读取为 Data URL (Base64)
    });
}

// ✅ 使用示例
stringToBase64("Hello World!")
    .then(base64 => console.log(base64))   // 输出: data:text/plain;base64,SGVsbG8gV29ybGQh
    .catch(err => console.error(err));

📌 关键点说明：

1. Blob ：将字符串包装成二进制大对象，指定 MIME 类型为 text/plain。

2. FileReader ：用于读取 Blob 内容，readAsDataURL() 方法会将其转为 Base64 Data URL。

3. 结果格式 ：返回的字符串以 data:text/plain;base64, 开头，后面接实际编码内容。若只需纯 Base64 部分，可切片去除前缀：

   const pureBase64 = base64.split(',')[1]; // "SGVsbG8gV29ybGQh"

---

⚠️ 方法二：手动实现 Base64 编码（仅限 ASCII）

⚠️ 仅适用于 ASCII 字符（不支持中文等非 ASCII 字符），不推荐生产环境使用。

🛠️ 简单实现原理：

利用 JavaScript 内置的 btoa() 函数（Binary to ASCII），但需先对字符串进行 Latin1 编码转换。

function simpleStringToBase64(str) {
    return btoa(unescape(encodeURIComponent(str)));
}

console.log(simpleStringToBase64("Hello")); // "SGVsbG8="

❌ 局限性：

• encodeURIComponent + unescape 组合会导致多字节字符（如中文）编码错误。
• 无法正确处理 Unicode 字符（如表情符号、CJK 文字）。

---

📦 方法三：Node.js 环境实现

在 Node.js 中可直接使用 Buffer：

const str = "Hello World!";
const base64 = Buffer.from(str).toString('base64');
console.log(base64); // "SGVsbG8gV29ybGQh"

---

🔍 对比总结

方法	适用场景	优点	缺点
Blob + FileReader	浏览器端（通用）	✅ 支持 Unicode	🔄 异步操作
btoa()	⚠️ 仅 ASCII 短文本	⚡️ 同步快速	❌ 不支持非 ASCII 字符
Node.js Buffer	🖥️ Node.js 服务端	✅ 支持 Unicode	⚫ 仅能在 Node.js 运行

---

🧪 常见问题解答
Q: 为什么 btoa("中文") 会出错？

A: btoa() 只接受 ASCII 字符，中文属于 Unicode 字符，直接调用会报错。必须使用 Blob + FileReader 或 Node.js 的 Buffer。

Q: 如何移除 Base64 字符串的前缀？

A: Data URL 的前缀是 data:[MIME];base64,，可通过以下方式提取纯 Base64：

const fullDataUrl = "data:text/plain;base64,SGVsbG8gV29ybGQh";
const pureBase64 = fullDataUrl.split(',')[1]; // "SGVsbG8gV29ybGQh"

Q: 能否同步获取 Base64？

A: 在浏览器中无法同步实现，因 FileReader 是异步 API。如需强制同步，可改用 Web Worker 或 SetTimeout 模拟，但不推荐。

---

💡 最佳实践建议

• 浏览器端 ：优先使用 Blob + FileReader 方案，支持完整 Unicode。
• Node.js ：直接使用 Buffer.from(str).toString('base64')。
• 避免使用 ：btoa() 处理非 ASCII 字符，会导致乱码或错误。

高效写作深入研读，更专业的AI论文助手→

---

---

---

---

🤔 参考 17

在 JavaScript 中，可以使用 btoa() 函数将字符串转换为 Base64 编码。不过需要注意的是，btoa() 只能处理 ASCII 字符，如果包含非ASCII字符（如中文），需要先进行编码转换。

以下是具体实现方法：

// 处理纯ASCII字符串
function stringToBase64ASCII(str) {
  return btoa(str);
}

// 处理包含非ASCII字符的字符串（如中文）
function stringToBase64(str) {
  // 先将字符串转换为UTF-8编码的Uint8Array
  const encoder = new TextEncoder();
  const uint8Array = encoder.encode(str);
  
  // 转换为二进制字符串
  let binary = '';
  for (let i = 0; i < uint8Array.length; i++) {
    binary += String.fromCharCode(uint8Array[i]);
  }
  
  // 转换为Base64
  return btoa(binary);
}

// 示例用法
const asciiStr = "Hello, World!";
const nonAsciiStr = "你好，世界！";

console.log("ASCII字符串转Base64:", stringToBase64ASCII(asciiStr));
console.log("包含非ASCII字符的字符串转Base64:", stringToBase64(nonAsciiStr));
    

代码说明：

1. btoa() 是浏览器内置函数，直接将 ASCII 字符串转换为 Base64
2. 对于包含中文等非 ASCII 字符的字符串，需要先通过 TextEncoder 将其转换为 UTF-8 编码的二进制数据
3. 然后将二进制数据转换为二进制字符串，再用 btoa() 进行 Base64 编码

注意：

• 这些函数在浏览器环境中可用，Node.js 环境需要使用不同的方法（如 Buffer）
• 解码时可以使用对应的 atob() 函数
• 处理非 ASCII 字符时的解码也需要对应的反转步骤

如果需要在 Node.js 环境中实现，可以使用 Buffer 类：

// Node.js环境
function stringToBase64Node(str) {
  return Buffer.from(str).toString('base64');
}

---

---

---

---

🤔 参考 18

在 JavaScript 中，将字符串转换为 Base64 编码的字符串有多种方法，具体取决于字符串的字符类型（ASCII 或 Unicode）以及运行环境（浏览器或 Node.js）。以下是几种常见的方法和示例：

---

1. 基础方法（仅限 ASCII 字符）

如果字符串仅包含 ASCII 字符（如英文、数字、常见符号），可以直接使用 btoa() 函数：

const str = "Hello, World!";
const base64Str = btoa(str);
console.log(base64Str); // 输出: SGVsbG8sIFdvcmxkIQ==

解码：

const decodedStr = atob(base64Str);
console.log(decodedStr); // 输出: Hello, World!

注意：

• btoa() 和 atob() 是浏览器内置函数，仅支持 ASCII 字符。
• 如果字符串包含非 ASCII 字符（如中文、Emoji），直接使用会抛出错误。

---

2. 处理非 ASCII 字符（Unicode 字符）

对于包含中文、Emoji 等多字节字符的字符串，需要先将其转换为 UTF-8 编码，再使用 btoa()。

**方法 1：使用 encodeURIComponent + btoa **

function stringToBase64(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, 
    (match, p1) => String.fromCharCode(parseInt(p1, 16))));
}

const str = "你好，世界！";
const base64Str = stringToBase64(str);
console.log(base64Str); // 输出: JUU4JUJiJUZBJUU4JUJEJThC

解码：

function base64ToString(base64Str) {
  return decodeURIComponent(atob(base64Str).split('').map(c =>
    '%' + c.charCodeAt(0).toString(16).padStart(2, '0')
  ).join(''));
}

const decodedStr = base64ToString(base64Str);
console.log(decodedStr); // 输出: 你好，世界！

方法 2：使用 TextEncoder API（现代浏览器推荐）

const str = "你好，世界！";
const encoder = new TextEncoder();
const data = encoder.encode(str); // 转换为 Uint8Array
const base64Str = btoa(String.fromCharCode(...data));
console.log(base64Str); // 输出: 5L2g5aW9sOaWkQ==

解码：

const binaryStr = atob(base64Str);
const bytes = new Uint8Array(binaryStr.length);
for (let i = 0; i < binaryStr.length; i++) {
  bytes[i] = binaryStr.charCodeAt(i);
}
const decoder = new TextDecoder();
const decodedStr = decoder.decode(bytes);
console.log(decodedStr); // 输出: 你好，世界！

---

3. Node.js 环境

在 Node.js 中，可以使用 Buffer 对象直接处理字符串的编码和解码：

编码：

const str = "你好，世界！";
const base64Str = Buffer.from(str, 'utf-8').toString('base64');
console.log(base64Str); // 输出: 5L2g5aW9sOaWkQ==

解码：

const decodedStr = Buffer.from(base64Str, 'base64').toString('utf-8');
console.log(decodedStr); // 输出: 你好，世界！

---

4. 第三方库（兼容性和扩展性）

如果需要更简单的 API 或更好的兼容性，可以使用第三方库（如 js-base64）：

安装：

npm install js-base64

编码：

import { Base64 } from 'js-base64';
const str = "你好，世界！";
const base64Str = Base64.encode(str);
console.log(base64Str); // 输出: 5L2g5aW9sOaWkQ==

解码：

const decodedStr = Base64.decode(base64Str);
console.log(decodedStr); // 输出: 你好，世界！

---

注意事项

1. 编码长度 ：
   • Base64 编码会增加原始数据长度的约 33%。例如，1KB 的字符串编码后约为 1.33KB。
2. 性能 ：
   • 在高性能场景下（如处理大文件），直接使用 Buffer（Node.js）或 TextEncoder（浏览器）效率更高。
3. 兼容性 ：
   • TextEncoder 和 TextDecoder 仅适用于现代浏览器（Chrome 43+、Firefox 31+、Edge 12+）。
   • 如果需要兼容旧版浏览器，建议使用 encodeURIComponent + btoa 方法。

---

总结

方法	环境	适用场景	优点
btoa()	浏览器	仅 ASCII 字符	简单直接
TextEncoder	现代浏览器	Unicode 字符	高效，无需手动处理 UTF-8
Buffer	Node.js	所有字符类型	简单高效
第三方库（如 js-base64）	浏览器/Node.js	需要兼容性和扩展功能	提供统一 API，自动处理编码问题

根据具体需求选择合适的方法即可！

---

---

---

---

🤔 参考 19

在 JavaScript 中，可以使用 btoa() 函数将字符串转换为 Base64 编码。如果字符串包含非 ASCII 字符（如中文、Emoji 等），需要先进行 URI 编码（encodeURIComponent）以避免错误。以下是详细方法：

---

1. 基本方法（仅限 ASCII 字符串）

const str = "Hello, World!";
const base64 = btoa(str); // "SGVsbG8sIFdvcmxkIQ=="
console.log(base64);

注意：

• btoa() 仅支持 Latin-1 字符集（单字节字符）。如果字符串包含中文、Emoji 等多字节字符，会抛出错误：

  btoa("你好"); // 报错：Uncaught DOMException: The string to be encoded contains characters outside of the Latin1 range.

---

2. 处理非 ASCII 字符（如中文、Emoji）
方法 1：先 URI 编码，再 Base64

function toBase64(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, 
    (match, p1) => String.fromCharCode('0x' + p1))
  );
}

const str = "你好，世界！🚀";
const base64 = toBase64(str);
console.log(base64); // "JUU0JUJEJUEwJUU1JUE1JUJEJUVGJUJDJThDJUU0JUI4JTk2JUU3JTk1JThDJUVGJUJDJTgxJUUzJTgxJUFB"

方法 2：使用 TextEncoder + Uint8Array （现代浏览器）

function toBase64(str) {
  const bytes = new TextEncoder().encode(str); // 转为 UTF-8 字节数组
  let binary = '';
  bytes.forEach(byte => binary += String.fromCharCode(byte));
  return btoa(binary);
}

const str = "你好，世界！🚀";
const base64 = toBase64(str);
console.log(base64); // "5L2g5aW977yM5LiW55WM77yB8J+RgA=="

---

3. Base64 解码回字符串
方法 1： atob() + URI 解码

function fromBase64(base64) {
  const decoded = atob(base64);
  return decodeURIComponent(decoded.split('').map(c => 
    '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
  ).join(''));
}

const originalStr = fromBase64("JUU0JUJEJUEwJUU1JUE1JUJEJUVGJUJDJThDJUU0JUI4JTk2JUU3JTk1JThDJUVGJUJDJTgxJUUzJTgxJUJB");
console.log(originalStr); // "你好，世界！🚀"

方法 2： TextDecoder （现代浏览器）

function fromBase64(base64) {
  const binary = atob(base64);
  const bytes = new Uint8Array([...binary].map(c => c.charCodeAt(0)));
  return new TextDecoder().decode(bytes);
}

const originalStr = fromBase64("5L2g5aW977yM5LiW55WM77yB8J+RgA==");
console.log(originalStr); // "你好，世界！🚀"

---

4. Node.js 环境

Node.js 中可以直接使用 Buffer：

// 字符串转 Base64
const str = "你好，世界！🚀";
const base64 = Buffer.from(str, 'utf8').toString('base64');
console.log(base64); // "5L2g5aW977yM5LiW55WM77yB8J+RgA=="

// Base64 解码回字符串
const originalStr = Buffer.from(base64, 'base64').toString('utf8');
console.log(originalStr); // "你好，世界！🚀"

---

总结

场景	方法
ASCII 字符串	btoa(str)
含中文/Emoji	btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, ...)) 或 TextEncoder
Base64 解码	atob() + URI 解码 或 TextDecoder
Node.js	Buffer.from(str).toString('base64')

推荐：

• 浏览器环境优先使用 TextEncoder/TextDecoder（兼容性较好）。
• 简单场景可直接用 btoa() + URI 编码。

如果有其他需求（如二进制数据处理），可以进一步探讨！ 🚀

---

---

---

---

🤔 参考 20

在 JavaScript 中将字符串转换为 Base64 格式，可以使用内置的 btoa() 函数（Binary to ASCII）。以下是详细方法和注意事项：

基础用法

const text = "Hello, World!";
const base64 = btoa(text);
console.log(base64); // "SGVsbG8sIFdvcmxkIQ=="

处理特殊字符（UTF-8 支持）
btoa() 只能处理 Latin1 字符集（单字节字符），对于中文、emoji 等 Unicode 字符需要先编码：

// 方法 1：encodeURIComponent + 字节转换
function toBase64(str) {
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p1) => 
      String.fromCharCode('0x' + p1)
    )
  );
}

// 方法 2：TextEncoder API（现代浏览器）
function toBase64(str) {
  const bytes = new TextEncoder().encode(str);
  const binString = Array.from(bytes, byte => 
    String.fromCharCode(byte)
  ).join('');
  return btoa(binString);
}

// 使用示例
console.log(toBase64("你好")); // "5L2g5aW9"
console.log(toBase64("🚀"));   // "8J+agA=="

完整工具函数

function toBase64(str) {
  // Node.js 环境
  if (typeof Buffer !== 'undefined') {
    return Buffer.from(str).toString('base64');
  }
  
  // 浏览器环境（现代API）
  if (typeof TextEncoder !== 'undefined') {
    return btoa(
      new Uint8Array(new TextEncoder().encode(str))
        .reduce((acc, byte) => acc + String.fromCharCode(byte), '')
    );
  }
  
  // 兼容旧浏览器
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, 
    (match, hex) => String.fromCharCode(parseInt(hex, 16))
  );
}

使用场景示例

1. 基本数据编码

   const data = { username: "john", id: 42 };
   const jsonString = JSON.stringify(data);
   const base64Data = toBase64(jsonString);
   console.log(base64Data); // "eyJ1c2VybmFtZSI6ImpvaG4iLCJpZCI6NDJ9"

2. 解码 Base64

   function fromBase64(base64) {
     // Node.js
     if (typeof Buffer !== 'undefined') {
       return Buffer.from(base64, 'base64').toString();
     }
     
     // 浏览器
     const binString = atob(base64);
     const bytes = Uint8Array.from(binString, char => char.charCodeAt(0));
     return new TextDecoder().decode(bytes);
   }
   
   console.log(fromBase64("5L2g5aW9")); // "你好"

注意事项

1. 数据大小：

   • Base64 会使数据增大约 33%（3 字节 → 4 个 Base64 字符）
   • 不适合编码大型文件（>10MB）

2. URL 安全：

   // 替换 URL 不安全的 + 和 / 字符
   function toBase64URL(str) {
     return toBase64(str)
       .replace(/\+/g, '-')
       .replace(/\//g, '_')
       .replace(/=+$/, '');
   }

3. 性能考虑：

   • 对于高频操作，优先使用 TextEncoder/TextDecoder
   • Node.js 中 Buffer 性能最佳

4. 错误处理：

   try {
     const base64 = toBase64("大文本");
   } catch (error) {
     console.error("编码失败:", error);
   }

这些方法覆盖了所有主流环境（浏览器/Node.js）和字符集场景，推荐优先使用 TextEncoder + btoa() 的组合以获得最佳兼容性和性能。

---

---

---

---

---

---

JavaScript的 TextEncoder 详解

TextEncoder 详解：JavaScript 中的文本编码工具

TextEncoder 是 JavaScript 中用于处理文本编码的强大 API，它提供了一种将字符串转换为 UTF-8 字节序列的标准方法。下面我将全面解析这个 API 的功能和使用方法。

TextEncoder 基本概念

核心功能

• 将 JavaScript 字符串转换为 UTF-8 编码的字节序列（Uint8Array）
• 仅支持 UTF-8 编码（这是 Web 标准要求）
• 属于现代浏览器和 Node.js 的标准 API

基本用法

const encoder = new TextEncoder();
const uint8Array = encoder.encode("你好，世界！");

主要方法和属性

1. encode() 方法

将字符串编码为 UTF-8 字节序列

const text = "JavaScript编码示例 🔥";
const encoded = encoder.encode(text);

console.log(encoded);
// Uint8Array(33) [
//   74,  97, 118,  97,  83,  99, 114, 105, 112, 116,
//  231, 188, 147, 231, 160, 129, 231, 168, 139, 228,
//  190, 138,  32, 240, 159, 148, 165
// ]

2. encodeInto() 方法（高级）

将字符串编码到现有的 Uint8Array 缓冲区

const targetBuffer = new Uint8Array(100);
const str = "高效编码方法";

const result = encoder.encodeInto(str, targetBuffer);

console.log(`读取了 ${result.read} 个字符`);
console.log(`写入了 ${result.written} 个字节`);
console.log(targetBuffer.slice(0, result.written));

3. encoding 属性（只读）

返回编码器的字符编码名称（总是 "utf-8"）

console.log(encoder.encoding); // "utf-8"

使用场景示例

场景 1：字符串到 Base64 转换

function stringToBase64(str) {
  const bytes = new TextEncoder().encode(str);
  const binString = String.fromCharCode(...bytes);
  return btoa(binString);
}

console.log(stringToBase64("Hello, TextEncoder!")); 
// "SGVsbG8sIFRleHRFbmNvZGVyIQ=="

场景 2：处理大型文本

async function processLargeText(text, chunkSize = 1024) {
  const encoder = new TextEncoder();
  
  for (let i = 0; i < text.length; i += chunkSize) {
    const chunk = text.slice(i, i + chunkSize);
    const bytes = encoder.encode(chunk);
    
    // 处理分块数据（如上传或存储）
    await processChunk(bytes);
  }
}

场景 3：WebSocket 通信

const socket = new WebSocket("wss://example.com");

socket.onopen = () => {
  const message = "重要数据: " + Date.now();
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  
  socket.send(data);
};

性能优化技巧

1. 重用 TextEncoder 实例

// 创建单个实例重用
const globalEncoder = new TextEncoder();

function encodeData(data) {
  return globalEncoder.encode(data);
}

2. 使用 encodeInto() 避免内存分配

const buffer = new Uint8Array(1024); // 预分配缓冲区

function encodeToBuffer(str) {
  const result = encoder.encodeInto(str, buffer);
  return buffer.slice(0, result.written);
}

浏览器兼容性

TextEncoder 在现代浏览器中有很好的支持：

浏览器	支持版本
Chrome	38+
Firefox	19+
Safari	10.1+
Edge	79+
Node.js	11.0.0+

替代方案（兼容旧浏览器）

对于不支持 TextEncoder 的环境：

// TextEncoder 的简单 polyfill
if (typeof TextEncoder === "undefined") {
  window.TextEncoder = function TextEncoder() {
    this.encode = function(str) {
      const bytes = [];
      for (let i = 0; i < str.length; i++) {
        const charCode = str.charCodeAt(i);
        if (charCode <= 0x7f) {
          bytes.push(charCode);
        } else if (charCode <= 0x7ff) {
          bytes.push(0xc0 | (charCode >> 6), 
                    0x80 | (charCode & 0x3f));
        } else if (charCode <= 0xffff) {
          bytes.push(0xe0 | (charCode >> 12),
                    0x80 | ((charCode >> 6) & 0x3f),
                    0x80 | (charCode & 0x3f));
        } else {
          // 处理代理对和四字节字符
          i++;
          const code = 0x10000 + 
                      ((charCode & 0x3ff) << 10) |
                      (str.charCodeAt(i) & 0x3ff);
          bytes.push(0xf0 | (code >> 18),
                    0x80 | ((code >> 12) & 0x3f),
                    0x80 | ((code >> 6) & 0x3f),
                    0x80 | (code & 0x3f));
        }
      }
      return new Uint8Array(bytes);
    };
    this.encoding = "utf-8";
  };
}

注意事项

1. 编码限制：TextEncoder 只支持 UTF-8 编码
2. 错误处理：无效的 Unicode 序列会被替换为 U+FFFD (�)
3. 性能：对于小型字符串，TextEncoder 非常高效；对于大型文本，考虑分块处理
4. 内存使用：encode() 方法每次都会创建新的 Uint8Array 实例

TextEncoder 是现代 JavaScript 中处理文本编码的首选工具，特别适合需要与二进制数据交互的场景（如网络通信、文件处理等）。

---

---

---

TextEncoder详解：JavaScript中的UTF-8编码工具

TextEncoder是JavaScript中用于将字符串转换为UTF-8编码字节序列的重要API。在本文中，我将详细讲解它的使用方法、特性以及实际应用场景。

TextEncoder基础使用

// 创建TextEncoder实例
const encoder = new TextEncoder();

// 编码字符串为UTF-8字节序列
const str = "你好，世界！🌍";
const encodedData = encoder.encode(str);

console.log(encodedData); // Uint8Array(22) [228, 189, 160, 229, 165, 189, ...]

核心特性解析

1. encode() 方法

将字符串转换为UTF-8编码的Uint8Array字节数组：

const asciiStr = "Hello";
const asciiEncoded = encoder.encode(asciiStr);
console.log(asciiEncoded); // Uint8Array(5) [72, 101, 108, 108, 111]

const emojiStr = "🚀";
const emojiEncoded = encoder.encode(emojiStr);
console.log(emojiEncoded); // Uint8Array(4) [240, 159, 154, 128]

2. encodeInto() 方法（高效内存使用）

直接将字符串编码到现有ArrayBuffer中：

const buffer = new ArrayBuffer(100);
const destination = new Uint8Array(buffer);

const result = encoder.encodeInto("JavaScript编码", destination);
console.log(result);
// { read: 10, written: 14 } 读取10个字符，写入14个字节

实际应用场景

1. 字符串转Base64（支持Unicode）

function stringToBase64(str) {
  const bytes = new TextEncoder().encode(str);
  const binString = String.fromCharCode(...bytes);
  return btoa(binString);
}

const base64Data = stringToBase64("你好，世界！🌍");
console.log(base64Data); // "JUU0JUJEJUEwJUU1JUE1JUJEJUVGJUJDJThDJUU0JUI4JTk2JUU3JTk1JThDJUVGJUJDJTgxJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIw"

2. 计算字符串的字节大小

function getByteSize(str) {
  return new TextEncoder().encode(str).length;
}

console.log(getByteSize("A"));      // 1字节
console.log(getByteSize("é"));      // 2字节
console.log(getByteSize("你好"));   // 6字节
console.log(getByteSize("🚀"));     // 4字节

3. 处理二进制数据

async function processText() {
  const encoder = new TextEncoder();
  const decoder = new TextDecoder();
  
  // 字符串 -> 字节流
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue(encoder.encode("Hello "));
      controller.enqueue(encoder.encode("World!"));
      controller.close();
    }
  });
  
  // 字节流 -> 字符串
  const reader = stream.getReader();
  let result = '';
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    result += decoder.decode(value, { stream: true });
  }
  
  console.log(result); // "Hello World!"
}

processText();

浏览器兼容性与替代方案

// 浏览器兼容性检查
if (typeof TextEncoder === "undefined") {
  // 兼容方案：使用Buffer（Node.js）
  if (typeof Buffer !== "undefined") {
    TextEncoder = class {
      encode(str) {
        return Buffer.from(str, "utf-8");
      }
    };
  } 
  // 兼容方案：使用TextEncoder polyfill
  else {
    console.warn("TextEncoder not supported in this environment");
    // 使用第三方polyfill如：text-encoding
  }
}

完整示例：Base64编码器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TextEncoder详解</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            color: white;
            padding: 20px;
            min-height: 100vh;
        }
        .container {
            max-width: 900px;
            margin: 0 auto;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
        header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #4a9fe3;
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #ff8a00, #e52e71);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .subtitle {
            font-size: 1.2rem;
            color: #a0d2ff;
        }
        .content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        .card {
            background: rgba(30, 30, 50, 0.8);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        .card h2 {
            color: #4a9fe3;
            margin-bottom: 15px;
            font-size: 1.5rem;
        }
        .input-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #a0d2ff;
        }
        textarea, input {
            width: 100%;
            padding: 10px;
            background: rgba(20, 20, 40, 0.8);
            border: 1px solid #4a9fe3;
            border-radius: 5px;
            color: white;
            font-size: 1rem;
        }
        textarea {
            height: 120px;
            resize: vertical;
        }
        button {
            background: linear-gradient(90deg, #ff8a00, #e52e71);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            transition: transform 0.2s, background 0.3s;
            width: 100%;
            margin-top: 10px;
        }
        button:hover {
            transform: translateY(-2px);
            background: linear-gradient(90deg, #ff9a00, #ff2e7a);
        }
        .result {
            background: rgba(20, 20, 40, 0.8);
            border: 1px solid #4a9fe3;
            border-radius: 5px;
            padding: 15px;
            margin-top: 15px;
            min-height: 80px;
            overflow-wrap: break-word;
            font-family: monospace;
        }
        .info {
            margin-top: 15px;
            padding: 15px;
            background: rgba(40, 40, 80, 0.5);
            border-radius: 5px;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        .info h3 {
            color: #4a9fe3;
            margin-bottom: 10px;
        }
        .examples {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 10px;
        }
        .example-btn {
            background: rgba(60, 60, 100, 0.8);
            padding: 8px;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            transition: background 0.2s;
        }
        .example-btn:hover {
            background: rgba(80, 80, 120, 0.9);
        }
        .byte-size {
            color: #ff8a00;
            font-weight: bold;
        }
        @media (max-width: 768px) {
            .content {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>TextEncoder详解</h1>
            <p class="subtitle">JavaScript中的UTF-8编码工具</p>
        </header>
        
        <div class="content">
            <div class="card">
                <h2>字符串转Base64</h2>
                <div class="input-group">
                    <label for="inputText">输入文本（支持Unicode）：</label>
                    <textarea id="inputText" placeholder="输入任何文本...">你好，世界！🌍</textarea>
                </div>
                
                <div class="examples">
                    <div class="example-btn" data-text="ASCII: Hello World">ASCII示例</div>
                    <div class="example-btn" data-text="中文：编码测试">中文示例</div>
                    <div class="example-btn" data-text="Emoji: 😊🚀🌟">Emoji示例</div>
                    <div class="example-btn" data-text="混合：Hello 世界! 🚀">混合示例</div>
                </div>
                
                <button id="encodeBtn">编码为Base64</button>
                
                <div class="result" id="base64Result"></div>
                
                <div class="info">
                    <h3>实现原理</h3>
                    <p>使用TextEncoder将字符串转换为UTF-8字节序列，再使用btoa()转换为Base64编码。</p>
                    <p>字节大小：<span id="byteSize" class="byte-size">0</span> 字节</p>
                </div>
            </div>
            
            <div class="card">
                <h2>TextEncoder核心功能</h2>
                <div class="input-group">
                    <label for="testString">测试字符串：</label>
                    <input type="text" id="testString" value="JavaScript编码">
                </div>
                
                <button id="encodeTestBtn">编码测试</button>
                
                <div class="result" id="encodeResult">
                    <!-- 结果将显示在这里 -->
                </div>
                
                <div class="info">
                    <h3>TextEncoder详解</h3>
                    <p><strong>encode(str)</strong>: 返回Uint8Array，包含UTF-8字节序列</p>
                    <p><strong>encodeInto(str, destination)</strong>: 高效编码到现有缓冲区</p>
                    <p><strong>encoding属性</strong>: 只读属性，始终为"utf-8"</p>
                </div>
                
                <div class="input-group" style="margin-top: 20px;">
                    <label for="byteView">字节序列：</label>
                    <div class="result" id="byteView"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 示例按钮功能
        document.querySelectorAll('.example-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                document.getElementById('inputText').value = btn.dataset.text;
            });
        });
        
        // 字符串转Base64
        document.getElementById('encodeBtn').addEventListener('click', () => {
            const inputText = document.getElementById('inputText').value;
            const base64Result = document.getElementById('base64Result');
            const byteSizeEl = document.getElementById('byteSize');
            
            try {
                // 使用TextEncoder将字符串转换为字节数组
                const encoder = new TextEncoder();
                const bytes = encoder.encode(inputText);
                
                // 计算字节大小
                const byteSize = bytes.length;
                byteSizeEl.textContent = byteSize;
                
                // 将字节数组转换为Base64
                let binary = '';
                for (let i = 0; i < byteSize; i++) {
                    binary += String.fromCharCode(bytes[i]);
                }
                
                const base64 = btoa(binary);
                base64Result.textContent = base64;
            } catch (error) {
                base64Result.textContent = '错误: ' + error.message;
            }
        });
        
        // 编码测试
        document.getElementById('encodeTestBtn').addEventListener('click', () => {
            const testString = document.getElementById('testString').value;
            const encodeResult = document.getElementById('encodeResult');
            const byteView = document.getElementById('byteView');
            
            try {
                const encoder = new TextEncoder();
                
                // 1. 使用encode方法
                const encodedData = encoder.encode(testString);
                
                // 2. 使用encodeInto方法
                const buffer = new ArrayBuffer(100);
                const destination = new Uint8Array(buffer);
                const encodeIntoResult = encoder.encodeInto(testString, destination);
                
                // 显示结果
                encodeResult.innerHTML = `
                    <p><strong>字符串:</strong> "${testString}"</p>
                    <p><strong>字节长度:</strong> ${encodedData.length} 字节</p>
                    <p><strong>encodeInto结果:</strong> 读取 ${encodeIntoResult.read} 字符, 写入 ${encodeIntoResult.written} 字节</p>
                `;
                
                // 显示字节序列
                byteView.textContent = Array.from(encodedData).join(', ');
            } catch (error) {
                encodeResult.textContent = '错误: ' + error.message;
            }
        });
        
        // 初始化页面时执行一次编码
        document.getElementById('encodeBtn').click();
        document.getElementById('encodeTestBtn').click();
    </script>
</body>
</html>

关键点总结

1. 核心功能：

   • encode()：将字符串转换为UTF-8字节数组
   • encodeInto()：高效编码到现有缓冲区
   • encoding属性：始终返回"utf-8"

2. 编码规则：

   • ASCII字符：1字节
   • 欧洲语言字符：2字节
   • 中文、日文等：3字节
   • 表情符号和特殊字符：4字节

3. 最佳实践：

   • 处理大型文本时使用encodeInto()提高性能
   • 结合TextDecoder实现完整编码/解码流程
   • 使用前检查浏览器兼容性

4. 应用场景：

   • 网络通信中的文本编码
   • 二进制数据处理
   • 计算文本字节大小
   • 实现Base64编码（支持Unicode）

TextEncoder为JavaScript提供了原生的UTF-8编码能力，是现代Web开发中处理文本编码的重要工具。

---

---

---

---

---

---

---

---

---

JavaScript的String.fromCharCode方法详解

JavaScript 的 String.fromCharCode() 方法详解

String.fromCharCode() 是 JavaScript 中处理字符编码转换的核心方法之一，用于将 Unicode 码点序列转换为字符串。

基本语法

String.fromCharCode(num1)
String.fromCharCode(num1, num2, ..., numN)

核心功能

• 接受一个或多个 Unicode 码点（数字）
• 返回由这些码点组成的字符串
• 只支持 16 位码点（0-65535）

基础用法示例

// 单个字符
console.log(String.fromCharCode(65)); // "A"

// 多个字符
console.log(String.fromCharCode(72, 101, 108, 108, 111)); // "Hello"

// 特殊字符
console.log(String.fromCharCode(169)); // "©"
console.log(String.fromCharCode(9731)); // "☃"

Unicode 处理细节

基本多文种平面（BMP）

// 拉丁字符
console.log(String.fromCharCode(224)); // "à" (U+00E0)

// 希腊字符
console.log(String.fromCharCode(937)); // "Ω" (U+03A9)

// 中文字符
console.log(String.fromCharCode(20013)); // "中" (U+4E2D)

// 日语字符
console.log(String.fromCharCode(12354)); // "あ" (U+3042)

超出 BMP 的字符（辅助平面）

fromCharCode() 无法直接处理大于 0xFFFF 的码点：

// 尝试直接处理大于 65535 的码点（错误方式）
console.log(String.fromCharCode(128512)); // "" 而不是 "😀"

正确方式 - 使用代理对：

// 笑脸表情 😀 (U+1F600)
const highSurrogate = 0xD83D; // 高代理项
const lowSurrogate = 0xDE00; // 低代理项

console.log(String.fromCharCode(highSurrogate, lowSurrogate)); // "😀"

与相关方法的比较

1. String.fromCodePoint()（ES6 新增）

// 直接处理所有 Unicode 码点
console.log(String.fromCodePoint(128512)); // "😀"
console.log(String.fromCodePoint(0x1F4A9)); // "💩"

2. charCodeAt()

const str = "Hello";
console.log(str.charCodeAt(0)); // 72 (H)
console.log(str.charCodeAt(1)); // 101 (e)

实际应用场景

1. 生成字符序列

// 生成字母表
const alphabet = Array.from({length: 26}, (_, i) => 
  String.fromCharCode(65 + i)
).join('');

console.log(alphabet); // "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

2. 处理二进制数据

// 从 Uint8Array 创建字符串
const buffer = new Uint8Array([72, 101, 108, 108, 111]);
const text = String.fromCharCode(...buffer);
console.log(text); // "Hello"

3. 特殊字符生成器

function createCustomEmoji(face, accessory) {
  const base = 0x1F600; // 笑脸起点
  return String.fromCharCode(
    0xD83D, // 高代理固定部分
    0xDE00 + face, 
    0xD83D, // 高代理固定部分
    0xDC80 + accessory
  );
}

// 创建带眼镜的笑脸 😎
console.log(createCustomEmoji(0, 0x0E)); // "😎"

4. 密码生成器

function generatePassword(length = 12) {
  const chars = [];
  for (let i = 0; i < length; i++) {
    // 随机选择字符范围：33-126 (可打印ASCII字符)
    const charCode = Math.floor(Math.random() * 94) + 33;
    chars.push(String.fromCharCode(charCode));
  }
  return chars.join('');
}

console.log(generatePassword()); // 类似 "k7@!gT9#2$fH"

注意事项

1. 码点范围限制：

   // 超出 0-65535 的码点会被截断
   console.log(String.fromCharCode(65536)); // "\u0000" (0x10000 % 65536 = 0)

2. 无效 Unicode 处理：

   // 孤立的代理项会产生无效字符
   console.log(String.fromCharCode(0xD83D)); // "�" (替换字符)

3. 非数字参数：

   // 非数字参数会被转换为数字
   console.log(String.fromCharCode("65")); // "A"
   console.log(String.fromCharCode(null)); // "\u0000" (null → 0)

替代方案：String.fromCodePoint()

// 处理所有 Unicode 码点（ES2015+）
console.log(String.fromCodePoint(128512)); // "😀"
console.log(String.fromCodePoint(97, 128512, 98)); // "a😀b"

// 兼容性处理
if (!String.fromCodePoint) {
  String.fromCodePoint = function() {
    let result = '';
    for (let i = 0; i < arguments.length; i++) {
      const code = arguments[i];
      if (code > 0xFFFF) {
        // 处理辅助平面字符
        const high = Math.floor((code - 0x10000) / 0x400) + 0xD800;
        const low = (code - 0x10000) % 0x400 + 0xDC00;
        result += String.fromCharCode(high, low);
      } else {
        result += String.fromCharCode(code);
      }
    }
    return result;
  };
}

总结

String.fromCharCode() 是 JavaScript 中处理字符编码的重要方法，但有其局限性：

• 仅支持基本多文种平面（BMP）字符（0-65535）
• 处理辅助平面字符需要手动使用代理对
• 对于现代开发，优先考虑使用 String.fromCodePoint()

理解这些方法对于处理国际化文本、二进制数据转换和特殊字符生成至关重要。根据你的目标环境（浏览器兼容性要求）和需求（是否需要支持辅助平面字符），选择合适的方法来处理字符编码转换。

---

---

---

JavaScript 的 String.fromCharCode() 方法详解

String.fromCharCode() 是 JavaScript 中一个重要的字符串操作方法，用于将 Unicode 编码序列转换为对应的字符串。下面我将全面解析这个方法的用法、原理和应用场景。

方法基础

// 基本语法
String.fromCharCode(num1[, num2, ..., numN])

// 示例
String.fromCharCode(65, 66, 67); // "ABC"
String.fromCharCode(0x41, 0x42, 0x43); // "ABC"（十六进制表示）

核心特性

1. 支持多个参数

// 多个参数组合
String.fromCharCode(72, 101, 108, 108, 111); // "Hello"

2. Unicode 编码支持

// 基本多文种平面（BMP）字符
String.fromCharCode(20013); // "中" (U+4E2D)
String.fromCharCode(25991); // "文" (U+6587)

// 特殊符号
String.fromCharCode(9731); // "☃" (雪花符号)

3. 数值范围处理

// 超出0-65535范围的数字会被截断
String.fromCharCode(65); // "A" (正常)
String.fromCharCode(65.5); // "A" (小数部分被忽略)
String.fromCharCode(65536 + 65); // "A" (65536 % 65536 = 0, 0+65=65 -> "A")

与相关方法的比较

方法	输入	输出	支持范围	处理代理对
String.fromCharCode()	Unicode 码元	字符串	0-65535 (U+0000 to U+FFFF)	需要手动处理
String.fromCodePoint()	Unicode 码点	字符串	0-1114111 (U+0000 to U+10FFFF)	自动处理
String.prototype.charCodeAt()	字符串索引	Unicode 码元	0-65535	返回单个码元

处理补充平面字符（代理对）

对于 Unicode 大于 65535 的字符（如表情符号），需要使用代理对：

// 手动处理代理对
function getSurrogatePair(codePoint) {
  const high = Math.floor((codePoint - 0x10000) / 0x400) + 0xD800;
  const low = (codePoint - 0x10000) % 0x400 + 0xDC00;
  return [high, low];
}

// 笑脸表情 😊 (U+1F60A)
const [high, low] = getSurrogatePair(0x1F60A);
String.fromCharCode(high, low); // "😊"

实际应用场景

1. 生成随机字符串

function generateRandomString(length) {
  let result = '';
  for (let i = 0; i < length; i++) {
    // 生成65-90(A-Z)或97-122(a-z)的随机字符
    const isUpperCase = Math.random() > 0.5;
    const code = isUpperCase 
      ? Math.floor(Math.random() * 26) + 65 
      : Math.floor(Math.random() * 26) + 97;
    result += String.fromCharCode(code);
  }
  return result;
}

generateRandomString(8); // "qZRfTbGt"

2. 二进制数据处理

// 从ArrayBuffer创建字符串
function arrayBufferToString(buffer) {
  const bytes = new Uint8Array(buffer);
  let str = '';
  for (let i = 0; i < bytes.length; i++) {
    str += String.fromCharCode(bytes[i]);
  }
  return str;
}

// 使用示例
const buffer = new ArrayBuffer(4);
const view = new Uint8Array(buffer);
view[0] = 72; // 'H'
view[1] = 101; // 'e'
view[2] = 108; // 'l'
view[3] = 108; // 'l'

arrayBufferToString(buffer); // "Hell"

3. 自定义编码转换

// Base64解码（简化版）
function customBase64Decode(str) {
  const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  let result = '';
  
  for (let i = 0; i < str.length; i += 4) {
    const a = base64Chars.indexOf(str[i]);
    const b = base64Chars.indexOf(str[i+1]);
    const c = base64Chars.indexOf(str[i+2]);
    const d = base64Chars.indexOf(str[i+3]);
    
    const bytes = [
      (a << 2) | (b >> 4),
      ((b & 15) << 4) | (c >> 2),
      ((c & 3) << 6) | d
    ];
    
    result += String.fromCharCode(bytes[0]) +
              (c !== 64 ? String.fromCharCode(bytes[1]) : '') +
              (d !== 64 ? String.fromCharCode(bytes[2]) : '');
  }
  
  return result;
}

customBase64Decode('SGVsbG8='); // "Hello"

完整示例：字符编码浏览器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String.fromCharCode() 详解</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background: linear-gradient(135deg, #2c3e50, #1a1a2e);
            color: #ecf0f1;
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(30, 30, 50, 0.8);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            overflow: hidden;
        }
        header {
            background: rgba(20, 20, 40, 0.9);
            padding: 30px;
            text-align: center;
            border-bottom: 2px solid #3498db;
        }
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #3498db, #2ecc71);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .subtitle {
            font-size: 1.3rem;
            color: #bdc3c7;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        .content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            padding: 30px;
        }
        @media (max-width: 900px) {
            .content {
                grid-template-columns: 1fr;
            }
        }
        .card {
            background: rgba(40, 40, 60, 0.7);
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        .card h2 {
            color: #3498db;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #2c3e50;
        }
        .input-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            color: #3498db;
            font-weight: 500;
        }
        input, textarea, select {
            width: 100%;
            padding: 12px 15px;
            background: rgba(20, 20, 40, 0.8);
            border: 1px solid #2c3e50;
            border-radius: 8px;
            color: #ecf0f1;
            font-size: 1.1rem;
            transition: border-color 0.3s;
        }
        input:focus, textarea:focus, select:focus {
            border-color: #3498db;
            outline: none;
        }
        textarea {
            min-height: 120px;
            resize: vertical;
            font-family: monospace;
        }
        button {
            background: linear-gradient(90deg, #3498db, #2ecc71);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: 600;
            transition: transform 0.2s, opacity 0.2s;
            width: 100%;
            margin: 10px 0;
        }
        button:hover {
            transform: translateY(-3px);
            opacity: 0.9;
        }
        .result {
            background: rgba(20, 20, 40, 0.8);
            border: 1px solid #2c3e50;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            min-height: 80px;
            overflow-wrap: break-word;
            font-family: monospace;
            font-size: 1.2rem;
            white-space: pre-wrap;
        }
        .code-block {
            background: rgba(10, 10, 30, 0.8);
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            overflow-x: auto;
            font-family: monospace;
            line-height: 1.6;
        }
        .examples {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 15px;
        }
        @media (max-width: 600px) {
            .examples {
                grid-template-columns: 1fr;
            }
        }
        .example {
            background: rgba(50, 50, 80, 0.6);
            padding: 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s;
            text-align: center;
        }
        .example:hover {
            background: rgba(70, 70, 100, 0.8);
        }
        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .highlight {
            color: #2ecc71;
            font-weight: bold;
        }
        .info-panel {
            background: rgba(20, 20, 40, 0.8);
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }
        .info-panel h3 {
            color: #3498db;
            margin-bottom: 15px;
        }
        .info-panel ul {
            padding-left: 25px;
            line-height: 1.8;
        }
        .info-panel li {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>String.fromCharCode()</h1>
            <p class="subtitle">将 Unicode 编码序列转换为字符串的 JavaScript 方法</p>
        </header>
        
        <div class="content">
            <div class="card">
                <h2>字符编码转换器</h2>
                
                <div class="input-group">
                    <label for="unicodeInput">输入 Unicode 编码（用逗号或空格分隔）：</label>
                    <input type="text" id="unicodeInput" value="72, 101, 108, 108, 111">
                </div>
                
                <div class="examples">
                    <div class="example" data-codes="65,66,67">ABC (65,66,67)</div>
                    <div class="example" data-codes="9731, 9730, 9748">天气符号 (☃, ☂, ☔)</div>
                    <div class="example" data-codes="128512, 128525, 128640">表情符号 (😀, 😍, 🚀)</div>
                    <div class="example" data-codes="20013, 25991">中文 (中, 文)</div>
                    <div class="example" data-codes="169, 174, 8482">商标符号 (©, ®, ™)</div>
                    <div class="example" data-codes="9824, 9827, 9829, 9830">扑克花色 (♠, ♣, ♥, ♦)</div>
                </div>
                
                <button id="convertBtn">转换为字符串</button>
                
                <div class="result" id="conversionResult"></div>
                
                <div class="input-group">
                    <label for="stringInput">输入字符串进行反向转换：</label>
                    <input type="text" id="stringInput" value="Hello">
                </div>
                
                <button id="reverseBtn">转换为编码</button>
                
                <div class="result" id="reverseResult"></div>
            </div>
            
            <div class="card">
                <h2>高级功能 & 代理对处理</h2>
                
                <div class="input-group">
                    <label for="codePoint">输入 Unicode 码点（大于0xFFFF）：</label>
                    <input type="number" id="codePoint" value="128512" min="0" max="1114111">
                </div>
                
                <button id="surrogateBtn">使用代理对转换</button>
                
                <div class="result" id="surrogateResult"></div>
                
                <div class="code-block">
// 代理对处理函数<br>
function getSurrogatePair(codePoint) {<br>
&nbsp;&nbsp;const high = Math.floor((codePoint - 0x10000) / 0x400) + 0xD800;<br>
&nbsp;&nbsp;const low = (codePoint - 0x10000) % 0x400 + 0xDC00;<br>
&nbsp;&nbsp;return [high, low];<br>
}<br><br>
// 使用示例<br>
const [high, low] = getSurrogatePair(0x1F60A);<br>
String.fromCharCode(high, low); // "😊"
                </div>
                
                <div class="grid-2">
                    <div>
                        <h3>String.fromCharCode()</h3>
                        <ul>
                            <li>输入：一个或多个 Unicode 码元</li>
                            <li>输出：生成的字符串</li>
                            <li>范围：0-65535 (U+0000 to U+FFFF)</li>
                            <li>代理对：需要手动处理</li>
                        </ul>
                    </div>
                    <div>
                        <h3>String.fromCodePoint()</h3>
                        <ul>
                            <li>输入：一个或多个 Unicode 码点</li>
                            <li>输出：生成的字符串</li>
                            <li>范围：0-1114111 (U+0000 to U+10FFFF)</li>
                            <li>代理对：自动处理</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="info-panel">
            <h3>关键知识点</h3>
            <ul>
                <li><span class="highlight">String.fromCharCode()</span> 方法返回由指定的 UTF-16 代码单元序列创建的字符串</li>
                <li>该方法接受<span class="highlight">多个参数</span>，每个参数是一个表示 Unicode 值的数字</li>
                <li>如果参数超出 0-65535 的范围，数字会被<span class="highlight">截断</span>（相当于与 0xFFFF 进行按位与操作）</li>
                <li>对于 Unicode 大于 65535 的字符（如表情符号），需要使用<span class="highlight">代理对</span>（surrogate pair）</li>
                <li>在 ES6 中引入了 <span class="highlight">String.fromCodePoint()</span> 方法，可以更好地处理补充平面字符</li>
                <li>常用应用场景：二进制数据处理、随机字符串生成、字符编码转换、与 ArrayBuffer 交互等</li>
            </ul>
        </div>
    </div>

    <script>
        // 示例按钮功能
        document.querySelectorAll('.example').forEach(example => {
            example.addEventListener('click', () => {
                document.getElementById('unicodeInput').value = example.dataset.codes;
                document.getElementById('convertBtn').click();
            });
        });
        
        // 转换为字符串
        document.getElementById('convertBtn').addEventListener('click', () => {
            const input = document.getElementById('unicodeInput').value;
            const resultElement = document.getElementById('conversionResult');
            
            try {
                // 分割输入并转换为数字
                const codes = input.split(/[,\s]+/).map(Number);
                
                // 使用String.fromCharCode转换
                const result = String.fromCharCode(...codes);
                
                // 显示结果
                resultElement.textContent = result;
                
                // 同时显示在反向转换输入框
                document.getElementById('stringInput').value = result;
            } catch (error) {
                resultElement.textContent = `错误: ${error.message}`;
            }
        });
        
        // 反向转换（字符串到编码）
        document.getElementById('reverseBtn').addEventListener('click', () => {
            const input = document.getElementById('stringInput').value;
            const resultElement = document.getElementById('reverseResult');
            
            try {
                let codes = [];
                for (let i = 0; i < input.length; i++) {
                    codes.push(input.charCodeAt(i));
                }
                
                resultElement.textContent = `编码序列: [${codes.join(', ')}]`;
                
                // 同时显示在正向转换输入框
                document.getElementById('unicodeInput').value = codes.join(', ');
            } catch (error) {
                resultElement.textContent = `错误: ${error.message}`;
            }
        });
        
        // 代理对处理
        document.getElementById('surrogateBtn').addEventListener('click', () => {
            const codePoint = parseInt(document.getElementById('codePoint').value);
            const resultElement = document.getElementById('surrogateResult');
            
            try {
                if (codePoint <= 0xFFFF) {
                    // 基本多文种平面字符
                    const char = String.fromCharCode(codePoint);
                    resultElement.textContent = `字符: ${char} (直接编码)`;
                } else {
                    // 代理对处理函数
                    function getSurrogatePair(cp) {
                        const high = Math.floor((cp - 0x10000) / 0x400) + 0xD800;
                        const low = (cp - 0x10000) % 0x400 + 0xDC00;
                        return [high, low];
                    }
                    
                    const [high, low] = getSurrogatePair(codePoint);
                    const char = String.fromCharCode(high, low);
                    
                    resultElement.innerHTML = `
                        字符: ${char}<br>
                        代理对: [${high.toString(16).toUpperCase()}, ${low.toString(16).toUpperCase()}]<br>
                        十六进制: U+${codePoint.toString(16).toUpperCase()}
                    `;
                }
            } catch (error) {
                resultElement.textContent = `错误: ${error.message}`;
            }
        });
        
        // 初始化页面时执行一次转换
        document.getElementById('convertBtn').click();
    </script>
</body>
</html>

关键点总结

1. 基本功能：将 Unicode 编码序列转换为对应的字符串

2. 参数处理：

   • 接受多个参数（每个参数是一个 Unicode 值）
   • 数值范围：0 到 65535（0xFFFF）
   • 超出范围的数值会被截断（相当于 num & 0xFFFF）

3. Unicode 支持：

   • 直接支持基本多文种平面（BMP）字符（U+0000 到 U+FFFF）
   • 辅助平面字符（如表情符号）需要使用代理对

4. 与相关方法比较：

   • String.fromCodePoint()：ES6 新增，支持完整 Unicode 范围
   • charCodeAt()：字符串方法，获取指定位置的 Unicode 值

5. 应用场景：

   • 二进制数据处理
   • 字符编码转换
   • 生成随机字符串
   • 自定义编码/解码实现

String.fromCharCode() 是 JavaScript 中处理字符编码的基础工具，理解其工作原理对于处理文本数据、二进制操作和国际化应用开发至关重要。

---

---

---