javascript - 将 unicode 转义添加到动态字符串值

Question

我不知道如何正确地将 unicode 转义添加到动态字符串值，以便在 React 中呈现表情符号。
在我的数据库中，我存储了该表情符号的十六进制代码( 1f44d )
我创建了一个 样式组件使用正确的 css 渲染表情符号

const EmojiWrapper = styled.span(({ label }) =>
  css({
    role: 'img',
    ariaLabel: label || '',
    ariaHidden: label ? 'false' : 'true',
  })
);

以及符号等于 1f44d 的用法只显示 '\u{1f44d}'

<EmojiWrapper className="emoji" label={label}>
   {`'\\u{${symbol}}'`}
</EmojiWrapper>

我尝试将十六进制代码存储为转义字符串 '\u{1f44d}'但仍然显示 '\u{1f44d}'与表情符号相反。
如果我用转义符硬编码十六进制代码 '\u{1f44d}'表情符号正确呈现:

<EmojiWrapper className="emoji" label={label}>
   {'\u{1f44d}'}
</EmojiWrapper>

就像 {eval("'\\u" + {symbol} + "'")}我试图避免使用 eval 但是因为我读过它是一个坏主意。
任何想法将不胜感激。

Answer 1

您可以使用 String.fromCodePoint() ，此方法已添加到 ECMAScript 2015 中。在这里您将找到 Polyfill如果浏览器兼容性有问题:

const symbol = "1f44d";

<EmojiWrapper className="emoji" label={label}>
   {String.fromCodePoint(`0x${symbol}`)} // encoding UTF-32/UTF-32BE (hex)
</EmojiWrapper>