JavaScript中如何将GitHub API返回的多码点Emoji转换为字符串？

我之前也踩过这个坑！你遇到的问题核心有两个：一是高码位Emoji的转义方式不对，二是多码点Emoji的序列本身就包含ZWJ，不需要手动拼接。

问题原因拆解 #

1. 高码位Emoji的转义错误：大部分Emoji的码点都超过了U+FFFF（比如👩是U+1F469），如果你用\u1F469这种写法，JavaScript会把它拆成两个无效字符（因为\u只支持4位十六进制），这直接导致单个码点转换都可能出问题，更别说多码点的组合了。
2. 错误手动拼接ZWJ：像family_woman_woman_girl_girl这类组合Emoji的Unicode序列本身就包含ZWJ（零宽连接符），正确的序列是👩 + ZWJ + 👩 + ZWJ + 👧 + ZWJ + 👧，你不需要手动去加ZWJ，而是要把整个序列的所有码点（包括ZWJ）一起转换。

正确的解决方案 #

1. 用String.fromCodePoint()处理码点

这个方法是ES6引入的，专门用来处理超过U+FFFF的Unicode码点，支持传入多个码点参数，直接生成正确的字符串。

比如处理家庭Emoji的示例：

// 完整的码点序列（包含ZWJ：0x200D）
const familyCodePoints = [0x1F469, 0x200D, 0x1F469, 0x200D, 0x1F467, 0x200D, 0x1F467];
const familyEmoji = String.fromCodePoint(...familyCodePoints);
console.log(familyEmoji); // 输出 👩‍👩‍👧‍👧

2. 结合GitHub API与Emoji映射表

GitHub API返回的是Emoji的图片URL，不是直接的码点，所以你需要一个名称到码点的映射表来转换。推荐用emojilib这个维护良好的库，它包含了几乎所有Emoji的名称和对应码点。

修改你的代码如下：

const list = document.getElementById('emojis');

async function renderList() {
  // 加载Emoji名称-码点映射表
  const emojilibRes = await fetch('https://cdn.jsdelivr.net/npm/emojilib@3.0.1/emojis.json');
  const emojisMap = await emojilibRes.json();

  // 加载GitHub Emojis列表
  const githubRes = await fetch('https://api.github.com/emojis');
  const githubEmojis = await githubRes.json();

  for (const [name] of Object.entries(githubEmojis)) {
    const emojiData = emojisMap[name];
    if (!emojiData) continue;

    // 将十六进制码点转为十进制，再生成Emoji字符串
    const codePoints = emojiData.code_points.map(cp => parseInt(cp, 16));
    const emojiStr = String.fromCodePoint(...codePoints);

    const li = document.createElement('li');
    li.textContent = `${emojiStr} :${name}:`;
    list.appendChild(li);
  }
}

renderList();

为什么之前的方法失败？ #

你手动用ZWJ拼接的方式，本质上是在尝试重新构造Emoji序列，但很容易出现码点顺序错误、遗漏修饰符（比如肤色、性别标记）的问题。而直接使用完整的码点序列并通过String.fromCodePoint转换，是符合Unicode规范的正确做法，能保证所有组合Emoji都正常显示。

内容的提问来源于stack exchange，提问作者Jeremy Danyow