码迷,mamicode.com
首页 > Web开发 > 详细

JS 截取字符串-全是干货

时间:2020-01-08 10:27:19      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:targe   slice   遇到   orm   byte   func   字符编码   code   sub   

一、需求场景

大家在平时的开发中,肯定会遇到“某些字符超过多少字截断,并显示...”的需求,特别是在移动端,碍于屏幕尺寸的限制,某些“昵称”,“备注”等等字段,经常会让截断,后面跟着仨点。

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字符编码一样。


来源:https://www.jianshu.com/p/752c68ba943f

JS 截取字符串-全是干货

标签:targe   slice   遇到   orm   byte   func   字符编码   code   sub   

原文地址:https://www.cnblogs.com/yu-shang/p/12165147.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!