JS如何截取完整带表情的字符串

导语： 若字符串中出现一些特殊字符，我们该如何截取才能不出现乱码的现象呢？

转载：https://www.xiabingbao.com/post/truncated/js-string-truncated.html

例：丑?八?怪? 用户含有特殊符号

let name = "丑?八?怪?"
name.length; //9
name[1] //"�"

说明中间的表情字符占了2个字符的长度，如果单独输出 name[1] 或者 name [2]时，均会输出乱码字符。.

JavaScript 内部，字符以 UTF-16 的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符，JavaScript 会认为它们是两个字符。

如果针对所有的昵称都要截取前3个字符时，该怎么截取呢？如果是中文、英文、数字、标点符号等常见字符，那么直接从3开始截取就行了，如果上面的那种有特殊符号的怎么办呢？

Array.from方法

Array.from这个方法能够将类数组转换为真实的数组，比如NodeList, argument等，同样，也包括字符串。

Array.from(name); // ["丑", "?", "八", "?", "怪", "?"]
name.split(''); // ["丑", "�", "�", "八", "�", "�", "怪", "�", "�"]

使用Array.from把name转换后，可以看到转换成一个真实的数组了，?字符占了数组中的一个位置，然后按照数组中的方法截取再进行拼接即可，而使用split方法拆分，则还是乱码：

truncated(str, num){
    return Array.from(str).slice(0, num).join('');
}
truncated(name, 3); // "丑?八"

for-of

for-in方法是遍历key值，for-of是遍历value值：

let arr = ['a', 'b', 'c'];
for(let k in arr){
    console.log(k); // 0 1 2
}

for(let v of arr){
    console.log(v); // a b c
}

for(let v of name){
    console.log(v); // 丑?八?怪?
}

因此利用这个功能，我们也能进行截取：

truncated(str, num){
    let s = '';
    for(let v of name){
        s += v;
        num--;
        if(num<=0){
            break;
        }
    }
    return s;
}
truncated(name, 3);