如何解决将 unicode 转义添加到动态字符串值
我不知道如何正确地将 unicode 转义添加到动态字符串值以便在 React 中呈现表情符号。
在我的数据库中,我正在存储该表情符号 (1f44d
) 的十六进制代码
我用正确的 css 创建了一个 styled-component 来渲染表情符号
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。