将 unicode 转义添加到动态字符串值答案

【问题标题】：Adding a unicode escape to a dynamic string value将 unicode 转义添加到动态字符串值
【发布时间】：2020-12-19 23:05:19
【问题描述】：

我不知道如何正确地将 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，但我读过它是个坏主意。任何想法将不胜感激。

【问题讨论】：

标签： javascript reactjs unicode escaping next.js

【解决方案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>

【讨论】：