JavaScript中Unicode字符与编码的互转

冷不防 2024-04-17 13:53 26阅读 0赞

说起 Unicode 字符与编码的互转，我们很容易想到 `charCodeAt` 和 `fromCharCode` 两个方法。

*  `String.prototype.charCodeAt()`
 *  `String.fromCharCode()`

> 注意：`charCodeAt` 是 `String` 的原型方法，`fromCharCode` 是 `String` 的静态方法，它们的使用方式是不同的。

**用法：**

'A'.charCodeAt();  // 65
    String.fromCharCode(65);  // "A"
    复制代码

很简单对吧？一个是 charCode 的 “at”，即字符的编码位于哪里；另一个是 charCode 的 “from”，即从编码找出对应的字符，容易理解和记忆。然而当我们遇到某些特殊字符时就出问题了：

'?'.charCodeAt();  // 55357
    String.fromCharCode(55357);  // "�"
    
    '?'.charCodeAt();  // 55360
    String.fromCharCode(55360);  // "�"
    复制代码

可以看到我们无法通过获取的编码还原出字符，这是因为上面的 `?` 和 `?` 都是 4 字节字符（length 长度为 2 而不是 1），它们各自的 Unicode 编码有 2 组，所以要获取完整的编码值得这样写：

'?'.charCodeAt(0);  // 前两个字节的值：55357
    '?'.charCodeAt(1);  // 后两个字节的值：56960
    
    '?'.charCodeAt(0);  // 前两个字节的值：55360
    '?'.charCodeAt(1);  // 后两个字节的值：56743
    复制代码

如何将上面这种 4 字节组成的 charCode 值解析为字符串呢？需要将 2 组编码都传入 fromCharCode 中进行解析：

String.fromCharCode(55357, 56960);  // "?"
    String.fromCharCode(55360, 56743);  // "?"
    复制代码

这在实际使用时会很不便，我们需要手动判断字符是否为 4 字节字符，还需要做相应处理，好在 ES6 中新增了 `codePointAt` 和 `fromCodePoint` 两个 API 来解决这个问题，它们的使用方法和原有的 `charCodeAt` 和 `fromCharCode` 基本一致：

'A'.codePointAt();  // 65
    String.fromCodePoint(65);  // "A"
    
    '?'.codePointAt();  // 128640
    String.fromCodePoint(128640);  // "?"
    
    '?'.codePointAt();  // 131495
    String.fromCodePoint(131495);  // "?"
    复制代码

> [charCodeAt][]

> [fromCodePoint][]

转载于:https://juejin.im/post/5d5a82b1e51d4561ae4da619

[charCodeAt]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FString%2FcharCodeAt
[fromCodePoint]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FString%2FfromCodePoint