title: Translate emoji code points to string in JavaScript
body: <p>I'm attempting to load emojis from <a href="https://developer.github.com/v3/emojis/" rel="nofollow noreferrer">the GitHub API</a> and convert the code point(s) to a string in JavaScript. This works fine for emoji comprised of a singe code point but fails for those comprised of multiple points, eg <code>family_woman_woman_girl_girl</code>. I'm using <a href="https://en.wikipedia.org/wiki/Zero-width_joiner" rel="nofollow noreferrer">zero width joiner (zwj)</a> to concatenate the characters.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; parseInt(hex, 16));
      
      // translate the code points to a string. SOMETHING WRONG HERE
      const emoji = codePoints
        .map(p =&gt; String.fromCodePoint(p))
        .join(zwj);
      
      // render the list item
      const li = document.createElement('li');
      li.textContent = `${key}: ${codePoints} ${emoji}`;
      list.appendChild(li);
    }
  }
  
  renderList();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="emojis"&gt;&lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>