unicode - 浏览器无法识别 UTF8

Question

我在 MYSQL 表中有 UTF8 数据。我在从表格中读取时对其进行 Base64 编码，并通过 PHP 和 AJAX 将其传输到网页。Javascript Base64 在插入 HTML 时对其进行解码。接收它的页面被声明为 UTF8。

我的问题是，如果我将 Base64 解码数据（使用 atob()）插入页面，构成单个 UTF-8 字符的任何两个字节都将显示为两个单独的 Unicode 代码点。我必须使用“decodeURIComponent(escape(window.atob(data)))”（从这个论坛上的另一个问题中学到，谢谢）才能正确表示字符，这个过程所做的是将两个 UTF- 8 字节到一个字节，等于 char 的 unicode 代码点（在 ISO 8859 下也是相同的 char）。

简而言之，要在 UTF-8 页面中正确呈现 UTF-8 数据，必须将它们转换为它们的 unicode 代码点/ISO 8859 值。

一个例子：

小写 e-acute 的 unicode 代码点是 \u00e9。该字符的 UTF-8 编码为 \xc3\xa9：

下图显示了我对这个词的 Base64 编码的各种解码所呈现的内容 - 首先是纯 atob()，然后将 escape() 添加到进程中，然后进一步添加 decodeURIComponent()。我展示了报告每个输出的控制台，以及填充了三个输出的三个 INPUT 字段（“record[6]”包含 Base64 编码数据）。首先是代码：

console.log(window.atob(record[6]));
console.log(escape(window.atob(record[6])));
console.log(decodeURIComponent(escape(window.atob(record[6]))));

jQuery("#b64-1").val(window.atob(record[6]));
jQuery("#b64-2").val(escape(window.atob(record[6])));
jQuery("#b64-3").val(decodeURIComponent(escape(window.atob(record[6])))); 

`

将 née 的两个版本复制并粘贴到十六进制编辑器中，可以揭示发生了什么

' '

显然，来自 atob() 解码的两个字节是 UTF-8 e-acute (\xc3\xa9) 的正确值，但最初不是作为单个 UTF-8 字符呈现，而是作为两个单独的字符呈现：C3 (大写 A 波浪号）和 A9（版权符号）。接下来的两个步骤将这两个字符转换为 e-acute \u00e9 的单个代码点。

因此 decodeURIComponent() 显然将这两个字节识别为单个 UTF-8 字符（因为它将它们更改为 A9），而不是浏览器。

谁能向我解释为什么这需要在声明为 UTF-8 的页面中发生？

（我在 W10-64 上使用 Chrome）

标签： unicodeencodingutf-8