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字符編碼一樣。

來源： https://www.jianshu.com/p/752c68ba943f