JavaScript 踩坑记录

字符串长度统计不正确

JavaScript 引擎使用 UTF-16 编码来存储字符串，而 UTF-16 编码中的大部分字符都是用一个或多个 UTF-16 单元表示，而字符串的 length 属性返回的是字符串中包含的 16 位值的数量，而不是字符的实际数量

    // 直接计算长度
    '𠮷'.length         // 2
    '😀'.length         // 2
    '👩‍👩‍👧‍👧'.length         // 11
    
    // 转为数组计算
    [...'𠮷'].length    // 1
    [...'😀'].length    // 1
    [...'👩‍👩‍👧‍👧'].length    // 7

WARNING

在 html 中，input 和 textarea 的 maxlength 属性也会计算错误

解决方法：

使用 lodash 提供的 size 方法来计算字符串的长度

    import { size } from 'lodash'
    
    size('𠮷') // 1
    size('😀') // 1
    size('👩‍👩‍👧‍👧') // 1

相关资料

• 探索 emoji 字符串长度之谜
• lodash | GitHub