向动态字符串值添加 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>
我不知道如何正确地将 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>