Hi，大家好，我是你们的grain先森，好久没有分享自己的文章啦！甚是想念你们！
今天我要跟大家分享的是js截取字符串。遇到这样的问题，大家可能选择直接百度，但是百度到的方法，有些却不尽你意，小编也是遇坑之后，想想还是自力更生吧，现在整理出来分享给大家。
话不多说啦，就是上干货。
一、需求场景
大家在平时的开发中，肯定会遇到“某些字符超过多少字截断，并显示...”的需求，特别是在移动端，碍于屏幕尺寸的限制，某些“昵称”，“备注”等等字段，经常会让截断，后面跟着仨点。
1、纯汉字或纯英文字符串
直接用slice、substr、substring、splice等方法就可以直接按照需求截断，这里不做解释啦，当然我下面介绍的方法也可以实现。
2、中英文组合、表情的字符串
这才是咱们今天的主角
二、代码片段
/**
* @获取字符串字节长度
* @param {String} str
* @returns
*/
function getStrLen (str) {
let len = 0;
for (let i = 0; i < str.length; i++) {
let currLen = str.charCodeAt(i);
if (currLen >= 0 && currLen <= 128) {
len += 1;
} else {
len += 2;
}
}
return len;
}
/**
* @截取指定长度的字符串，超出部分显示指定字符
* @param {*} name
* @param {number} [len=8]
* @param {string} [endStr="..."]
* @returns
*/
function cutOffStr (name, len = 8, endStr = "...") {
// 小于等于指定长度
if (getByteLen(name) <= len) return name;
// 超出指定长度
let formatName = '';
let strLen = 0;
for (let i = 0; i < name.length; i++) {
strLen += getByteLen(name[i]);
if (strLen <= len) {
formatName += name[i];
} else {
break;
}
}
return formatName + endStr;
}
三、代码分析
首先，我要知道当前的字符串有多少个字节（不知道位、字节、字符、字符串的可以自行百度）；
其次，通过charCodeAt()方法获取某个字符的Unicode编码（后面有解释）。本方法中ASCII小于等于128的算一个字节，大于128的则算作两个字节，也即，一个英文字符、数字等算一个字节，一个汉字、表情等算两个字节。这样可以知道一个字符串的长度；
接着，截断字符串，先判断字符串长度是否小于等于指定长度，是，则直接原样返回，否则，继续下一步；
最后，要实现按指定长度截断，就必须对每个字符进行判断是几个字节，对未超出指定长度的字符进行累加，直至超出指定长度，循环终止，返回截断后的字符串，达到需求。
注：charCodeAt()方法可返回指定位置的字符的 Unicode 编码，这个返回值是 0 - 65535 之间的整数。开头的128个Unicode编码单元和ASCII字符编码一样。
感兴趣的小伙伴，可以关注公众号【grain先森】，回复关键词 “vue”，获取更多资料，更多关键词玩法期待你的探索~
网友评论