移动网站建设可信赖推广普通话手抄报模板
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