本文介绍如何在 React 中安全、准确地解码并渲染包含乱码 Unicode 转义序列（如 \u00e2\u0080\u0099）的 API 响应字符串，避免 dangerouslySetInnerHTML 因编码错误导致显示异常。
本文介绍如何在 react 中安全、准确地解码并渲染包含乱码 unicode 转义序列（如 `\u00e2\u0080\u0099`）的 api 响应字符串，避免 `dangerouslysetinnerhtml` 因编码错误导致显示异常。
在实际开发中，后端 API 有时会返回经过双重编码（如 UTF-8 字节被错误解释为 Latin-1 后再转义为 \uXXXX 序列）的 HTML 字符串，例如：
We\u00e2\u0080\u0099re looking for... \u00e2\u0080\u009cmisfits that fit\u00e2\u0080\u009d
这类字符串并非标准 JavaScript Unicode 转义（如 \u2019），而是 UTF-8 字节序列被误读为 ISO-8859-1 字符后再转义的结果，直接使用 JSON.parse() 或 String.fromCharCode() 无法还原。
✅ 正确解法是逆向还原原始 UTF-8 字节流：将每个 \uXXXX 字符按其 Unicode 码点转为对应字节，再用 TextDecoder("utf-8") 解码为真实字符。以下是一个健壮的工具函数：
const decodeUnicodeString = (str: string): string => {
try {
// 将字符串逐字符转为 UTF-16 码点 → 映射为原始 UTF-8 字节（需先还原为字节数组）
// 注意：此处输入实为“被错误转义的 UTF-8 字节字符串”，需先将其视为 Latin-1 编码字节流
const bytes = new Uint8Array(
str.split('').map(char => char.charCodeAt(0))
);
return new TextDecoder('utf-8').decode(bytes);
} catch (err) {
console.warn('Failed to decode Unicode string, returning original:', str);
return str; // 降级为原字符串，避免白屏
}
};
// 使用示例
const apiResponse = '\n<p>We\u00e2\u0080\u0099re looking for a Customer Success Manager, Scale to join our team of five \u00e2\u0080\u009cmisfits that fit\u00e2\u0080\u009d. </p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11824" title="shopify-app-react-router"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="shopify-app-react-router" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill11824" title="shopify-app-react-router" class="overflowclass">shopify-app-react-router</a>
<p class="overflowclass">构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G</p>
</div>
<a rel="nofollow" href="/xiazai/skill11824" title="shopify-app-react-router" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>';
const decodedHtml = decodeUnicodeString(apiResponse);
// 在组件中安全渲染（仍需确保内容可信）
function Content() {
return <div dangerouslysetinnerhtml="{{" __html: decodedhtml></div>;
}
⚠️ 重要注意事项：
-
dangerouslySetInnerHTML仅适用于完全可信的内容。若 HTML 来自用户或不可信来源，务必配合 DOMPurify 等库进行 XSS 过滤； - 该解码逻辑针对「UTF-8 字节被误当 Latin-1 处理后转义」的典型乱码场景（常见于 PHP/MySQL 旧系统或编码配置错误的 API）；
- 若后端可修复，最优方案是让 API 返回正确 UTF-8 编码的纯文本或标准
\u2019形式转义，前端无需额外解码； - 不要使用
eval()、unescape()或正则替换\uXXXX—— 它们无法处理此类双重编码问题，且存在安全风险。
总结：面对 "\u00e2\u0080\u0099" 类乱码，本质是编码链断裂，解决关键在于用 TextDecoder 重建 UTF-8 解码流程。结合类型守卫与错误降级，即可在 React 中稳定渲染语义正确的 Unicode 文本。
