🏴‍☠️
Сашка ☕
Blog  Tags 
💀 🔵 🔴

💩 Получаем код Emoji на JavaScript

Опубликовано: 6 октября 2022 г.

Введение

В этой заметке рассмотрим ситуацию, когда необходимо узнать код Emoji.

Есть ресурс emojipedia.org, в котором собрана информация по всем Emoji, а также изображения различных библиотек от разных производителей.

Мне очень нравятся Emoji от Twitter, которые называются twemoji.

Очевидно, что в репозитории на GitHub SVG файлы изображений именуются по кодам.

В репозитории есть HTML документ preview.html, который можно загрузить на локальный компьютер и посмотреть все twemoji, а если кликнуть по изображению, откроется окно, в поле ввода которого будет вставлен Unicode символ.

Получать быстрый доступ к странице с SVG изображением можно по ссылке ниже:

https://github.com/twitter/twemoji/blob/master/assets/svg/<code>.svg

А это прямая ссылка на SVG изображение:

https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/<code>.svg

Необходимо заменить <code> на нужный код и откроется изображение.

Вот только нужно найти ещё этот код.

Проще простого получить этот код на JavaScript, потому что интерпретатор языка доступен прямо из консоли разработчика*.

* Бысткая клавиша для вызова консоли разработчика F12

Получение кода символа Emoji

В стандартной библиотеке JavaScript имеется метод .toString() класса Number.

Метод .toString(base) возвращает строковое представление числа в системе счисления base.

base может варьироваться от 2 до 36 (по умолчанию 10).

Emoji являются Unicode символами, которые в свою очередь представляют из себя шестнадцатеричные значения.

Для получения кода Emoji необходима шестнадцатеричная система счисления (base=16).
Цифры могут быть 0..9 или A..F.

Однако ещё необходим метод .codePointAt() типа String.

Метод str.codePointAt(pos) — возвращает код для символа, находящегося на позиции pos.

В коченом счёте код будет выглядеть так:

let hex =  "🏴‍☠️".codePointAt(0).toString(16);

console.log(hex); // => 1f3f4

Остаётся подставить значение 1f3f4 в ссылки выше вместо <code>.