encodeURI/encodeURIComponent在代码不同部分编码结果不一致问题

核心原因 #

你遇到的问题本质是字符的Unicode表示形式不一致：

• element.article_id_thumbnail里的í是分解式字符序列：由基础字符i（U+0069）加上重音符号◌́（U+0301）组合而成，所以encodeURIComponent处理后得到fi%CC%81sica
• element.id里的í是预合成字符：单个Unicode字符í（U+00ED），处理后得到f%C3%ADsica

虽然两种形式解码后视觉上完全相同，但服务器会严格按照编码后的字节串匹配文件路径，所以只有预合成形式的编码能正确对应到目标文件。

解决方法 #

1. 前端统一字符归一化 #

在编码前，用String.prototype.normalize()将字符串统一转换为预合成形式（NFC），确保和element.id的格式一致：

// 对article_id_thumbnail做归一化处理
const normalizedThumbnailId = element.article_id_thumbnail.normalize('NFC');
// 再进行URI编码
const encodedPath = `stuff.../${encodeURIComponent(normalizedThumbnailId)}/...stuff`;

normalize('NFC')会把分解式字符序列合并成对应的预合成字符，这样编码结果就和element.id的处理结果一致了。

2. 从数据源头修复 #

排查后端返回数据的逻辑：为什么article_id_thumbnail和id的字符编码形式不同？可能是数据存储或传输时的编码差异。如果能在后端统一将字符串转换为NFC格式，就能从根源避免这个问题。

补充说明 #

在线解码工具显示结果一致，是因为它们会自动将两种Unicode形式归一化后显示，但服务器端的文件路径匹配是基于原始编码字节的，所以必须保证编码前的字符格式完全统一。

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