重音字符的javascript编码问题

Question

我有一个带有 UTF-8 header 的页面:

<meta charset="utf-8" />

在页面中，我使用 umbraco 字典来获取各种语言的内容。 当我在页面上用德语打印时，它看起来很好:

<h1>@library.GetDictionaryItem("A")</h1>

决议:

<h1>Ä</h1>用德语

但是如果我通过脚本输入它:

<script type="text/javascript" charset="utf-8">
  var a = "@library.GetDictionaryItem("A")";
  alert(a);
</script>

警报打印:

ä

如果我这样做

<script type="text/javascript" charset="utf-8">
  var a = "Ä";
  alert(a);
</script>

警报打印:

Ä

那么什么可以解释这种行为，我该如何修复警报？ 据我所知，一切都是 UTF-8，字典和页面编码都很好。问题发生在 Javascript 中。

从我在这里的表格中可以看出，Javascript 将字符解析为其数值。我使用了“escape、encodeUrl、decodeUrl”等，但没有成功。

chr  HexCode  Numeric   HTML entity     escape(chr)  encodeURI(chr) 

ä    \xE4     ä    ä          %E4          %C3%A4 

Answer 1

(FWIW:字符实体 ä 是 ä，而不是 Ä。)

这与字符编码无关。您正在将 HTML 实体 输出到 JavaScript 字符串，然后要求浏览器显示该 JavaScript 字符串而不执行任何解释 HTML 的操作(通过 alert)。就像您实际输入的一样:

<h1>&#228;</h1>

...(将在页面上显示 ä)和

<script>
var a = "&#228;";
alert(a);
</script>

...这不会。 HTML 实体不会在任何理解 HTML 实体的地方使用。 alert 不解释 HTML。

但是如果你这样做:

<script>
var a = "&#228;";
var div = document.createElement('div');
div.innerHTML = a;
document.body.appendChild(div);
</script>

...您会在页面上看到字符，因为我们将实体赋予将解释 HTML 的东西 (innerHTML)。所以如果你写第一行:

var a = "@library.GetDictionaryItem("A")";

...然后在 HTML 上下文中使用 a(如上所述)，您将在文档中获得 ä。

如果您总是从 Umbraco 获得十进制数字字符实体(如 ä)，因为它们定义了 unicode 代码点，而 JavaScript(大部分)使用 unicode 代码指向它的字符串*，您可以很容易地解析实体:

function characterFromDecimalNumericEntity(str) {
    var decNumEntRex = /^\&#(\d+);$/;
    var match = decNumEntRex.exec(str);
    var codepoint = match ? parseInt(match[1], 10) : null;
    var character = codepoint ? String.fromCharCode(codepoint) : null;
    return character;
}
alert(characterFromDecimalNumericEntity("ä")); // ä

Live Example

* 为什么是“大部分”:JavaScript 字符串由对应于 UTF-16 代码单元 的 16 位“字符”组成，而不是 Unicode 代码点(您不能存储 Unicode 代码指向 16 位，则需要 21)。 Basic Multilingual Plane 中的所有字符适合一个 UTF-16 代码单元，但来自 Supplementary Multilingual Plane 的字符, Supplementary Ideographic Plane , and so on一个字符需要两个 UTF-16 代码单元。其中一个字符将占用 JavaScript 字符串中的两个“字符”。上面的功能对他们来说会失败。更多内容 the JavaScript spec和 the Unicode FAQ .