diff --git a/content/posts/2022/javascript/get-emoji-code.md b/content/posts/2022/javascript/get-emoji-code.md new file mode 100644 index 0000000..bf77d15 --- /dev/null +++ b/content/posts/2022/javascript/get-emoji-code.md @@ -0,0 +1,78 @@ +--- +title: "Получаем код Emoji на JavaScript" +date: 2022-10-06T22:35:25+03:00 +draft: false +tags: [javascript, tips] +--- + +## Введение + +В этой заметке рассмотрим ситуацию, когда необходимо узнать код Emoji. + +Есть ресурс [emojipedia.org](https://emojipedia.org/skull/), +в котором собрана информация по всем Emoji, а также изображения +различных библиотек от разных производителей. + +Мне очень нравятся Emoji от Twitter, которые называются +[twemoji](https://emojipedia.org/twitter/twemoji-14.0/). + +Очевидно, что в репозитории на [GitHub](https://github.com/twitter/twemoji/) +SVG файлы изображений именуются по кодам. + +В репозитории есть HTML документ +[preview.html](https://github.com/twitter/twemoji/blob/master/src/test/preview.html), +который можно загрузить на локальный компьютер и посмотреть все twemoji, +а если кликнуть по изображению, откроется окно, в поле ввода которого будет +вставлен Unicode символ. + +Получать быстрый доступ к странице с SVG изображением можно по ссылке ниже: + +```text +https://github.com/twitter/twemoji/blob/master/assets/svg/.svg +``` + +А это прямая ссылка на SVG изображение: + +```text +https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/.svg +``` + +Необходимо заменить `` на нужный код и откроется изображение. + +Вот только нужно найти ещё этот код. + +Проще простого получить этот код на JavaScript, потому что интерпретатор языка +доступен прямо из консоли разработчика\*. + +> \* Бысткая клавиша для вызова консоли разработчика F12 + +## Получение кода символа Emoji + +В стандартной библиотеке JavaScript имеется метод +[`.toString()`](Number.prototype.toString()) класса Number. + +Метод `.toString(base)` возвращает строковое представление числа в системе счисления `base`. + +`base` может варьироваться от 2 до 36 (по умолчанию 10). + +Emoji являются Unicode символами, которые в свою очередь представляют +из себя шестнадцатеричные значения. + +Для получения кода Emoji необходима шестнадцатеричная система счисления +(`base=16`). +Цифры могут быть `0..9` или `A..F`. + +Однако ещё необходим метод `.codePointAt()` типа String. + +Метод `str.codePointAt(pos)` — +возвращает код для символа, находящегося на позиции `pos`. + +В коченом счёте код будет выглядеть так: + +```javascript +let hex = "🏴‍☠️".codePointAt(0).toString(16); + +console.log(hex); // => 1f3f4 +``` + +Остаётся подставить значение `1f3f4` в ссылки выше вместо ``.