向动态字符串值添加 unicode 转义

Adding a unicode escape to a dynamic string value

我不知道如何正确地将 unicode 转义添加到动态字符串值以便在 React 中呈现表情符号。

在我的数据库中,我存储了该表情符号的十六进制代码 (1f44d)

我创建了一个 styled-component 用正确的 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,但据我所知这是个坏主意。 任何想法将不胜感激。

你可以使用String.fromCodePoint(),ECMAScript 2015已经添加了这个方法。如果浏览器兼容性有问题,你会在这里找到Polyfill

const symbol = "1f44d";

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