2022-10-06 23:12:58 +03:00
|
|
|
|
---
|
2022-11-19 03:36:06 +03:00
|
|
|
|
title: "💩 Получаем код Emoji на JavaScript"
|
2022-10-06 23:12:58 +03:00
|
|
|
|
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/<code>.svg
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
А это прямая ссылка на SVG изображение:
|
|
|
|
|
|
|
|
|
|
|
|
```text
|
|
|
|
|
|
https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/<code>.svg
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Необходимо заменить `<code>` на нужный код и откроется изображение.
|
|
|
|
|
|
|
|
|
|
|
|
Вот только нужно найти ещё этот код.
|
|
|
|
|
|
|
|
|
|
|
|
Проще простого получить этот код на JavaScript, потому что интерпретатор языка
|
|
|
|
|
|
доступен прямо из консоли разработчика\*.
|
|
|
|
|
|
|
|
|
|
|
|
> \* Бысткая клавиша для вызова консоли разработчика F12
|
|
|
|
|
|
|
|
|
|
|
|
## Получение кода символа Emoji
|
|
|
|
|
|
|
|
|
|
|
|
В стандартной библиотеке JavaScript имеется метод
|
2022-10-09 04:47:57 +03:00
|
|
|
|
[`.toString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) класса Number.
|
2022-10-06 23:12:58 +03:00
|
|
|
|
|
|
|
|
|
|
Метод `.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` в ссылки выше вместо `<code>`.
|
