Angular 5中拆分含Unicode emoji字符串为单个字符的实现问题

嘿，这个坑我之前踩过！你遇到的问题根源在于：部分Emoji属于Unicode代理对字符（比如你例子里的🎯，是由\ud83c和\udfdb两个UTF-16码元组成的），而普通的for循环按索引取值时，会把这两个码元拆分开，单独显示就变成了乱码（��）。

下面给你两种适配Angular 5的解决方案：

方案1：用Array.from()快速拆分（推荐） #

ES6的Array.from()方法会自动识别Unicode扩展字符（包括Emoji），直接把完整字符拆成数组项，完全不用手动遍历：

// 替换你原来的for循环逻辑
const currentSentence = "Hello hello \ud83c\udfdb";
this.sentencesSplitter = Array.from(currentSentence);

处理后，sentencesSplitter数组里的每一项都是完整的字符，不管是普通字母还是Emoji。

方案2：用for...of循环手动遍历 #

如果需要在遍历过程中做额外处理（比如添加样式标记），可以用for...of循环，它也是按完整字符迭代的：

this.sentencesSplitter = [];
const currentSentence = "Hello hello \ud83c\udfdb";
for (const char of currentSentence) {
  // 这里可以加额外逻辑，比如判断是否是Emoji后添加样式
  this.sentencesSplitter.push(char);
}

验证效果 #

处理后的数组直接在Angular模板里使用*ngFor绑定就可以正常显示了：

<span *ngFor='let character of sentencesSplitter; let j = index'>{{character}}</span>

此时每个<span>里都会是一个完整的字符，Emoji也能正确显示，不会出现乱码。

为什么原来的方法不行？

普通的currentSentence[j]取的是UTF-16编码的单个码元，而很多Emoji是由两个码元组成的代理对，单独取出其中一个码元无法被浏览器识别为有效字符，所以显示成乱码。

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