在JavaScript中将表情符号代码点转换为字符串

Question

我正在尝试从GitHub API加载表情符号，并在JavaScript中将代码点转换为字符串。对于由一个代码点组成的表情符号，这很好用，但对于由多个点组成的表情符号（例如family_woman_woman_girl_girl），则失败了。我正在使用零宽连接器（zwj）来连接字符。

const list = document.getElementById('emojis');
const zwj = '\u200D';

async function renderList() {
  // load the github emojis: https://developer.github.com/v3/emojis/
  const response = await fetch('https://api.github.com/emojis');
  const data = await response.json();
  
  // render a list item for each emoji
  for (const [key, value] of Object.entries(data)) {
    // skip GitHub's custom emoji
    if (!/\/unicode\//.test(value)) {
      continue;
    }
    
    // parse the url into an array of code points
    const codePoints = value
      .substr(57)
      .replace(/\.png\?.*$/, '')
      .split('-')
      .map(hex => parseInt(hex, 16));
    
    // translate the code points to a string. SOMETHING WRONG HERE
    const emoji = codePoints
      .map(p => String.fromCodePoint(p))
      .join(zwj);
    
    // render the list item
    const li = document.createElement('li');
    li.textContent = `${key}: ${codePoints} ${emoji}`;
    list.appendChild(li);
  }
}

renderList();

<ul id="emojis"></ul>

- Jeremy Danyow

Answer 1

并非所有的表情符号序列都是使用零宽连接符（ZWJ）粘合在一起的。最明显的是，人和他们的肤色只是简单地组合在一起，没有任何填充。

Unicode维护一个包含所有代码点/组合的列表，被认为是表情符号。 emoji-data.txt文件包含所有单个代码点表情符号。 emoji-zwj-sequences.txt包含至少一个ZWJ的所有序列，emoji-sequences.txt则包含其余的。

请注意，emoji-zwj-sequences.txt中并非所有的代码点都使用ZWJ粘合在一起，例如这一行：

1F469 1F3FD 200D 1F4BB                      ; Emoji_ZWJ_Sequence  ; woman technologist: medium skin tone                           #  8.0  [1] (‍)

在artist部分添加了ZWJ。女性和肤色部分没有其他cp的加入。

有一些启发式方法可以找出是否需要使用ZWJ。如果您看向emoji-data.txt的末尾，您会发现肤色修饰符具有Emoji_Modifier属性。如果前一个表情符号具有Emoji_Modifier_Base属性，则这些被定义为简单地改变其外观。

此外，下一个块Emoji_Components可以以某种方式组合而不需要使用ZWJ。

- Boldewyn