使用数据绑定将含emoji的文本绑定到Label时如何正确显示？

问题根因 #

• 你在XAML中硬编码的🙂属于XML转义字符，会被XAML编译器在编译阶段自动解析为对应的Unicode emoji字符，所以可以正常显示
• 绑定的message.raw是API返回的原始字符串，内容是HTML十六进制实体编码，运行时XAML渲染不会自动做实体解码，因此会原样输出编码文本

解决方案 #

你只需要对绑定的字符串做HTML实体解码，再赋值给绑定的属性即可，不同开发平台的实现方式如下：

如果你用的是C#（Xamarin/.NET MAUI/WPF） #

直接用内置的解码方法即可，.NET Core/.NET 5+ 推荐用不需要额外引用的WebUtility：

using System.Net;

// 处理API返回的原始消息后再绑定
public string DecodedMessage => WebUtility.HtmlDecode(message.raw);

修改绑定逻辑指向解码后的字段：

<Label Text="{Binding DecodedMessage}"/>

如果你用的是JavaScript/TypeScript（React Native/跨端框架） #

前端环境可以直接用DOM能力解码：

function decodeHtmlEntities(str) {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = str;
  return textarea.value;
}

const decodedMessage = decodeHtmlEntities(message.raw);

无DOM的Node.js环境可以用正则匹配替换十六进制实体：

function decodeHexHtmlEntities(str) {
  return str.replace(/&#x([0-9a-fA-F]+);/g, (match, hex) => 
    String.fromCodePoint(parseInt(hex, 16))
  );
}

如果你用的是Java（安卓原生） #

用系统自带的Html类处理即可：

import android.text.Html;

String decodedMessage = Html.fromHtml(message.raw, Html.FROM_HTML_MODE_LEGACY).toString();

如果你用的是Swift（iOS原生） #

扩展String实现HTML解码能力：

extension String {
    func htmlDecoded() -> String {
        guard let data = self.data(using: .utf8) else { return self }
        let options: [NSAttributedString.DocumentReadingOptionKey: Any] = [
            .documentType: NSAttributedString.DocumentType.html,
            .characterEncoding: String.Encoding.utf8.rawValue
        ]
        guard let attributedString = try? NSAttributedString(data: data, options: options, documentAttributes: nil) else { return self }
        return attributedString.string
    }
}

// 调用
let decodedMessage = message.raw.htmlDecoded()

补充说明 #

如果你的消息里除了emoji实体编码，还包含其他HTML标签（比如<b>、<a>），也可以直接让Label支持渲染HTML内容，不需要单独做解码，不同平台的文本组件都有对应的HTML渲染属性。

内容的提问来源于stack exchange，提问作者KDev