前端如何实现emoji表情

在前端开发中，其实我们的utf-8字符库中，包含了上万种的字符符号，我们直接用就可以，支持十进制和十六进制两种，其实很简单，我写个demo。下面我写了一个简单的例子，循环出来了一些表情包，喜欢的朋友们直接拿去用就可以了。这一段代码循环出来是这样的，相信已经可以满足绝大部分场景了。这就是下面这个表情了，

前端小火龙

1479人浏览 · 2023-11-13 22:16:35

前端小火龙 · 2023-11-13 22:16:35 发布

在前端开发中，其实我们的utf-8字符库中，包含了上万种的字符符号，我们直接用就可以，支持十进制和十六进制两种，其实很简单，我写个demo

<div class="out" style="display: flex; width: 500px; flex-wrap: wrap;">
   <p>&#129488;</p>
</div>

这就是下面这个表情了，

下面我写了一个简单的例子，循环出来了一些表情包，喜欢的朋友们直接拿去用就可以了

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="out" style="display: flex; width: 500px; flex-wrap: wrap;"></div>
  <script>
    const doms = document.querySelector('.out')
    for (var a = 128512; a <= 128580; a++) {
      const emojis = '&#' + a
      const pTags = document.createElement('p')
      pTags.innerHTML = emojis
      doms.appendChild(pTags)
    }
    for (var b = 129296; b <= 129488; b++) {
      const emojis = '&#' + b
      const pTags = document.createElement('p')
      pTags.innerHTML = emojis
      doms.appendChild(pTags)
    }

  </script>
</body>

</html>

这一段代码循环出来是这样的，相信已经可以满足绝大部分场景了

技术共进，成长同行——讯飞AI开发者社区

更多推荐

AI智能体—人工智能工作流与人工智能智能体：真正的区别是什么？

本文探讨了人工智能工作流与智能体的核心区别。工作流是静态、可预测的执行序列（如预处理→嵌入→搜索→总结），适合批处理作业；而智能体能动态感知环境、自主决策（感知→推理→决策循环），具备适应性和工具选择能力。关键差异在于：工作流遵循固定路径，智能体则能根据目标调整策略。架构上，工作流使用Airflow等工具，智能体依赖LangChain等框架。智能体的自主性使其更适用于动态环境，代表下一代AI应用方