如何将CSS中正常使用的emoji Unicode转换后在JavaScript中正确输出

原因说明 #

CSS 和 JavaScript 的 Unicode 转义语法规则不同，你之前的写法不符合 JS 转义规范导致运行失败，以下是3种可行实现方案：

• 方案1：使用标准 \u 前缀四位转义序列
  JS 中四位及以下的 Unicode 码点使用小写 \u 作为前缀，后跟四位十六进制字符，示例代码：

  console.log('\uf410');
  console.log('\uf2d1');
  

• 方案2：使用大括号包裹的通用 Unicode 转义
  这种写法兼容所有长度的 Unicode 码点（包括超过四位的高位 emoji/自定义字符），语法更宽松：

  console.log('\u{f410}');
  console.log('\u{f2d1}');
  

• 方案3：使用 String.fromCodePoint 方法生成
  直接传入十六进制格式的码点数值即可，可读性更高，不易写错转义规则：

  console.log(String.fromCodePoint(0xf410));
  console.log(String.fromCodePoint(0xf2d1));
  

注意：如果这两个字符属于自定义图标字体的私有域字符，需要确保当前页面已经正确加载对应的图标字体，否则输出后会显示为乱码或空白占位符，和 CSS 中未加载字体时的表现一致。

内容的提问来源于stack exchange，提问作者Weilory