Javascript如何截取含有表情的字符串

Javascript如何截取含有表情的字符串

一、说说背景

社区社交应用中，难免会有输入用户昵称的操作，如果用户老老实实的输入中文汉字或者英文字母，那当然没啥问题，我们能够轻松的处理字符串的截取，产品说按多少字符截取，那我们就按多少字符截取，那还有啥问题，但这帮千奇百怪的人类，当然不会好好输入昵称，比如会输入带有特殊字符表情的昵称，嘿嘿😁，就是我这样的昵称，比如这个昵称，成者为王，败者😁为寇。

看到这里，难免有些好奇宝宝就会问了，这又有什么问题呢？
那先请问，这个昵称有几个字符呢？他的长度应该是多少呢？截取这个字符的前8个字符该怎么做呢？

善于思考的看客们应该开始动手了，那还不简单，看我字符length，slice和substring， substr大法运算一波

let nickName = '成者为王，败者😁为寇';
let sliceName = nickName.slice(0, 8);
let substrName = nickName.substr(0, 8)
let substringName = nickName.substring(0, 8)
console.log(nickName.length,sliceName, substrName, substringName);// 11 '成者为王，败者\uD83D' '成者为王，败者\uD83D' '成者为王，败者\uD83D'

运行结果发现，这个字符竟然是11个长度，这个嘿嘿😁竟然占了两个字符长度，而且我们常规的截取方案竟然出现了乱码。
为了再次验证，我们直接打印位置7和位置8看看结果

nickName[7]
'\uD83D'
nickName[8]
'\uDE01'console.log('\uD83D\uDE01')
// 😁

嘿嘿，果然是你。

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

二、谈谈方案

2.1 Array.from方法

Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。用大实话说，就是能够将雷数组转换为真实数组，比如将NodeList，arguments，String，Set，Map等转换为数组.

console.log(Array.from('foo'));
// Expected output: Array ["f", "o", "o"]console.log(Array.from([1, 2, 3], x => x + x));
// Expected output: Array [2, 4, 6]

试试这种方案吧

let names = Array.from('成者为王，败者😁为寇');
let name = names.slice(0, 8).join('');
console.log(name);// 成者为王，败者😁 

使用Array.from把nickName转换后，可以看到转换成一个真实的数组了，嘿嘿特殊字符字符占了数组中的一个位置，然后按照数组中的方法截取再进行拼接即可

2.2 String.prototype.codePointAt()方法

codePointAt() 方法返回 一个 Unicode 编码点值的非负整数。返回值是在字符串中的给定索引的编码单元体现的数字，如果在索引处没找到元素则返回 undefined 。

'ABC'.codePointAt(1);          // 66
'\uD800\uDC00'.codePointAt(0); // 65536
'\uD800\uDC00'.codePointAt(1); // 56320'XYZ'.codePointAt(42); // undefined

在ES6之前， JS 的字符串以 16 位字符编码(UTF-16)为基础。每个 16 位序列(相当于2个字节)是一个编码单元(code unit)，可简称为码元，用于表示一个字符。字符串所有的属性与方法(如length属性与charAt() 方法等)都是基于16位序列。

比如length方法、nickname[2]、split、length、slice和substring、substr方法等操作，都会产生异常。为此在ES6中，加强了对 Unicode 的支持，并且扩展了字符串对象。

对于 Unicode 码点大于0xFFFF的字符，是使用4个字节进行存储。ES6 提供了codePointAt方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。

console.log("😁".codePointAt(0).toString(16)); // 1f601// 输出码点对应的字符
"\u{1f601}"; // 😁

请注意： 在之前Unicode编码，均在[\u000-\uFFFF]之间，因此可以使用类似\u0047这样的编码；但是现在码点超过\uFFFF的界限，若再这样使用，则获取不到对应的字符。因此在ES6中，码点的字符放在中括号内，类似上面的格式（所有的码点均可以使用这种格式）：

"\u{1f601}"

那么就容易了：判断需要截取的位置是否正好是4字节的字符，如果是则延长一位截取，否则正常截取：

function truncated(str, num){let index = Array.from(str)[num-1].codePointAt(0) > 0xFFFF ? num+1 : num;return str.slice(0, index);
}
let nickname = '成者为王，败者😁为寇';
truncated(nickname, 8); // 成者为王，败者😁

虽然上面使用了slice，但是也使用了我们方案一种的Array.from，有点多此一举的感觉。

2.3 for-of

for…of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

let iterable = [10, 20, 30];for (const value of iterable) {console.log(value);
}
// 10
// 20
// 30let iterable = "boo";
for (let value of iterable) {console.log(value);
}
// "b"
// "o"
// "o"

就是因为for-of能够迭代String这一特性，因此我们能够用来去做截取字符串的操作

let nickname = "成者为王，败者😁为寇";
for (let name of nickname) {console.log(name);
}
// 成
// 者
// 为
// 王
// ，
// 败
// 者
// 😁
// 为
// 寇

封装后，我们就可以进行使用了

function truncated(str, num){let s = '';for(let v of str){s += v;num--;if(num<=0){break;}}return s;
}
truncated('成者为王，败者😁为寇', 8);
// '成者为王，败者😁'

三、总结

总结了三种方案，通过遍历和检查都是去判断字符的完整性，但是可能还会有很多其他考虑不到的方案，有想法的小伙伴可以分享分享。

四、引用参考

• Array.from
  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from

• String.prototype.codePointAt()
  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt

• for…of
  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for…of