简介
在前端开发中，经常需要使用表情符号（Emoji）。然而，不同的操作系统和设备对表情符号的支持不同，并且表情符号的编码以及呈现方式也不尽相同。为了解决这些问题，我们可以使用 emoji-data 这个 npm 包。
emoji-data 包是一个存储了表情符号数据的模块。它提供了详细的表情符号信息，包括编码、名称、分类、呈现方式等。我们可以通过这个包，轻松地在前端开发中使用表情符号。
安装
我们可以通过 npm 安装 emoji-data 包：
npm install emoji-data --save
在我们的项目中引入这个包：
const emojiData = require('emoji-data');使用
获取所有表情符号
我们可以通过 emojiData.all 获取所有表情符号的数据：
const allEmojis = emojiData.all; console.log(allEmojis);
allEmojis 是一个数组，其中包含了所有表情符号的数据。这里只展示了部分数据：
-- -------------------- ---- -------
-
-
------- --------- ------
---------- --------
------------- -----
--------- -----
----- -------
----------- -----
--------- --------
-------- ------------
---------- --
---------- --
------------- -----------
-------------- -
----------
--
------- -----
-------- -----
----------- ------- - ------
------------- ---
----------- ------
---------------- -----
----------------- -----
------------------ ------
------------------- ----
--
-- ---
-从上面的数据中，我们可以看到表情符号的名称、编码、分类、呈现方式等详细信息。
获取特定表情符号
我们可以通过名称、编码、Emojione 码等方式，获取特定的表情符号：
const smilingEmoji = emojiData.findByName('smiling face with open mouth and smiling eyes');
console.log(smilingEmoji);输出结果为：
-- -------------------- ---- -------
-
------- -------- ---- ---- ---- ----- - ------- ------
---------- --------
------------- -----
--------- -------
----- -------
----------- -------
--------- -----------
-------- ------------
---------- --
---------- --
------------- ---------
-------------- -
---------
---------------------------------------------
--
------- -----
-------- -----
----------- ------- - ------
------------- --
----------- ------
---------------- -----
----------------- -----
------------------ -----
------------------- ----
-我们也可以通过编码获取表情符号：
const cryingEmoji = emojiData.findByUnified('1F62D');
console.log(cryingEmoji);输出结果为：
-- -------------------- ---- -------
-
------- ------- ------ ------
---------- --------
------------- -----
--------- -------
----- -------
----------- -------
--------- -----------
-------- ------------
---------- --
---------- ---
------------- ------
-------------- -
------
--------------------
--
------- -----
-------- -----
----------- ------- - ------
------------- ---
----------- ------
---------------- -----
----------------- -----
------------------ -----
------------------- ----
-呈现方式
emoji-data 包提供了多种呈现表情符号的方式，例如文本、HTML、Unicode 码等。
- 文本：通过表情符号的 short_name 属性获取：
const grinningEmoji = emojiData.findByShortName('grinning');
console.log(grinningEmoji.short_name);输出结果为：
grinning
- 图片：通过表情符号的 image 属性获取：
const grinningEmoji = emojiData.findByShortName('grinning');
console.log(`https://cdn.jsdelivr.net/gh/iamcal/emoji-data@v1.1.0/img-apple-64/${grinningEmoji.image}`);输出结果为：
https://cdn.jsdelivr.net/gh/iamcal/emoji-data@v1.1.0/img-apple-64/1f600.png
- Unicode 码：
const grinningEmoji = emojiData.findByShortName('grinning');
console.log(String.fromCodePoint(`0x${grinningEmoji.unified}`));输出结果为：
😀
示例代码
最后，我们给出一个示例代码，演示了如何在 HTML 中使用 emoji-data 包呈现表情符号：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ---------------
-------
------
---
------ ------ ----------------------
----
---
- -- - ---- --------------------------------------------------------------------------------- ------------- ----- ---
----
---
---- -- - ----- ----------------------------------------------------------------------- ------
----
-------
------- ---------------------- -----------------------------------
------- -----------------------
----- ------------------ - ----- -- -
----- -- - -------------------------------
------------ - -------------------------------------------
------ ---
--
----- -------- - -- -- -
----- -------------- - ------------------------------
----- ------------ - ----------------------------- ---- ---- ---- ----- --- ------- -------
----- --------- - ----------------------------------
-------------------------------------------------------------
---------------------------------------------------- ----
----------------------------------------------------------
------------------------------------------
--
-----------
---------
-------该代码中，我们分别使用了 Unicode 码、图片以及文本呈现了表情符号。我们还使用了 findByName 和 findByShortName 方法，分别按名称和 short_name 属性查找了表情符号。同时，我们也使用了 createEmojiElement 方法动态生成表情符号元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ea563576b7b1ecd5d