Figma插件开发：TypeScript中实现Base64字符串编码方案问询

方案1：使用浏览器原生btoa() API #

Figma插件运行在浏览器沙盒环境中，直接支持浏览器原生的Base64编码方法btoa()，这是最简便的方式，无需额外依赖：

const encoded = btoa('STRING'); // 输出 "U1RSSU5H"

注意：btoa()仅支持ASCII字符，如果你的文本包含非ASCII字符（比如中文），需要先转成UTF-8编码的字节序列，再用btoa()：

function utf8ToBase64(str: string): string {
  const utf8Bytes = unescape(encodeURIComponent(str));
  return btoa(utf8Bytes);
}

// 示例：编码中文
const encodedChinese = utf8ToBase64('你好'); // 输出 "5L2g5aW9"

方案2：纯TypeScript实现Base64编码 #

如果需要完全不依赖环境API的实现，可以自己写一个轻量的Base64编码函数，避免环境兼容问题：

const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

function encodeBase64(str: string): string {
  let result = '';
  let i = 0;
  const utf8Str = unescape(encodeURIComponent(str));
  
  while (i < utf8Str.length) {
    const byte1 = utf8Str.charCodeAt(i++) & 0xff;
    const byte2 = i < utf8Str.length ? utf8Str.charCodeAt(i++) & 0xff : 0;
    const byte3 = i < utf8Str.length ? utf8Str.charCodeAt(i++) & 0xff : 0;

    const enc1 = byte1 >> 2;
    const enc2 = ((byte1 & 0x3) << 4) | (byte2 >> 4);
    const enc3 = ((byte2 & 0xf) << 2) | (byte3 >> 6);
    const enc4 = byte3 & 0x3f;

    result += base64Chars[enc1] + base64Chars[enc2] + 
              (i > utf8Str.length + 1 ? '=' : base64Chars[enc3]) + 
              (i > utf8Str.length ? '=' : base64Chars[enc4]);
  }
  
  return result;
}

// 使用示例
const encoded = encodeBase64('STRING'); // 输出 "U1RSSU5H"

方案3：使用轻量TypeScript包 #

如果不想自己实现，可以引入轻量的Base64处理包，比如base64-js（纯JS/TS，无Node依赖）：

1. 安装包：

npm install base64-js --save

2. 在TypeScript中使用：

import { fromByteArray } from 'base64-js';

function stringToBase64(str: string): string {
  const utf8Bytes = new TextEncoder().encode(str);
  return fromByteArray(utf8Bytes);
}

// 示例
const encoded = stringToBase64('STRING'); // 输出 "U1RSSU5H"

内容的提问来源于stack exchange，提问作者Roger Lo