javascript - 使用 JavaScript 无法正确显示 Unicode

Question

convert.onclick =
  function() {
    for (var i = 0; i < before.value.length; i++) {
      after.value += "'" + before.value.charAt(i) + "', ";
    }
  }

<textarea id="before" type="text" name="input" style="width:100%;">*𝟡(𝟘)-_=+𝕢ℚ𝕨𝕎𝕖𝔼𝕣ℝ𝕥𝕋𝕪𝕐𝕦𝕌</textarea><br />
<textarea id="after" cols="50" rows="10" name="output" style="width:100%;"></textarea>
<button id="convert" name="convert" type="button">convert</button>

这是一个简单的代码，当我运行它时，得到以下结果。

部分字母已成功转换。但大多数Unicode字符都无法正常显示。如何解决这个问题？

Answer 1

您遇到的情况称为 surrogate pairs 。某些 unicode 字符由两个字节而不是一个字节组成，如果将它们分开，它们将不再正确显示。

如果您可以使用 ES6，请使用 spread operator 迭代字符串或 for..of 语法实际上考虑了代理对，并且会更容易地为您提供正确的结果。其他答案显示了如何执行此操作。

如果您无法使用 ES6，MDN 有一个示例，说明如何使用 charAt here 处理这些问题。 。我将在下面使用此代码。

function getWholeChar(str, i) {
  var code = str.charCodeAt(i);

  if (Number.isNaN(code)) return '';
  if (code < 0xD800 || code > 0xDFFF) return str.charAt(i);

  if (0xD800 <= code && code <= 0xDBFF) {
    if (str.length <= (i + 1)) throw 'High surrogate without following low surrogate';
    var next = str.charCodeAt(i + 1);
    if (0xDC00 > next || next > 0xDFFF) throw 'High surrogate without following low surrogate';
    return str.charAt(i) + str.charAt(i + 1);
  }
  
  if (i === 0) throw 'Low surrogate without preceding high surrogate';
  var prev = str.charCodeAt(i - 1);

  if (0xD800 > prev || prev > 0xDBFF) throw 'Low surrogate without preceding high surrogate';
  return false;
}

convert.onclick =
  function() {
    for (var i = 0, chr; i < before.value.length; i++) {
      if(!(chr = getWholeChar(before.value, i))) continue;
      after.value += "'" + chr + "', ";
    }
  }

<textarea id="before" type="text" name="input" style="width:100%;">*𝟡(𝟘)-_=+𝕢ℚ𝕨𝕎𝕖𝔼𝕣ℝ𝕥𝕋𝕪𝕐𝕦𝕌</textarea><br />
<textarea id="after" cols="50" rows="10" name="output" style="width:100%;"></textarea>
<button id="convert" name="convert" type="button">convert</button>