javascript 高效按字節截取字符串

　　做為一個前端開發人員在網頁展示中經常會碰到，標題過長，需要截取字符串，用CSS的實現的話各種兼容問題，各種坑。

讓后台程序截一下，又各種推托，讓后台按字節截一下更是和要了后台老命一樣，最后可能只會安字符長度給你截一下，最后不好看，對不齊，還是回頭整CSS、調兼容；

有以上有感觸的前端同學默默點個贊吧。

 

　　最近接觸一個項目，后台只提供接口（json），所有頁面的數據渲染，數據綁定都都交給了前端。終於，不考慮SEO，頁面所有的主動權到偶的手中了，不經意間就碰到字節截取老問題了。

網絡上流傳一個Javascript簡單獲取字節長度的方法：

String.prototype.Blength = function(){//返回字符串字節長度
    return this.replace(/([^\x00-\xFF])/g, "aa").length;
};

確實很簡單，大於ASCII碼的字符都算做兩個字節，雖然嚴格來說不正確，但我們是用來輔助展示效果的，真嚴格起來反而不好了，

但總感覺為了一點投機取巧，而用正則這種較耗時東西不太好，其實也就節省了兩行代碼，所以我決定還是用正常方式計算：

function getBlength(str){
    for(var i=str.length,n=0;i--;){
        n += str.charCodeAt(i) > 255 ? 2 : 1;
    }
    return n;
}

我並沒有把方法擴展到String對像的原型上去，還是因為效率問題,以下是測試代碼：

//擴展到String的prototype上
String.prototype.Blength = function () {
    var str = this,
    n = 0;
    for (var i = str.length; i--; ) {
        n += str.charCodeAt(i) > 255 ? 2 : 1;
    }
    return n;
}
//給String對像增加一個方法
String.getBlength = function (str) {
    for (var i = str.length, n = 0; i--; ) {
        n += str.charCodeAt(i) > 255 ? 2 : 1;
    }
    return n;
}
//先構造一個中英混合的長字符串
var str = "javascript 高效按字節截取字符串方法 getBlengthjavascript 高效按字節截取字符串方法 getBlength";
str = str.replace(/./g, str).replace(/./g, str);
console.log("創造的字符串長度為：",str.length)
console.log("-------------測試開始--------------")
console.log("str.Blength() >> ",str.Blength())
console.log("String.getBlength(str) >> ",String.getBlength(str))
console.log("--效率測試開始--")

var time1 = new Date()
for(var i=0;i<100;i++){
    str.Blength()
}
console.log("Blength耗時：",new Date() - time1);

var time2 = new Date()
for(var i=0;i<100;i++){
    String.getBlength(str)
}
console.log("getBlength耗時：",new Date() - time2);

結果效率差的不是一點半點，至於原因可能時間花費在了原型鏈的檢索上了，我沒有深究，知道的可以留言告訴我：

創造的字符串長度為： 314432 
-------------測試開始-------------- 
str.Blength() >>  425408 
String.getBlength(str) >>  425408
--效率測試開始-- 
Blength耗時： 1774 
getBlength耗時： 95 

現在要截取字符串的基礎函數有了，因為在這種情況下字符占的字節長度最長為2，所以用二分法來找到合適截取位置是再好不過了。

給一個效率應該算不錯的截取函數：

 

//簡單計算字節長度
String.getBlength = function (str) {
    for (var i = str.length, n = 0; i--; ) {
        n += str.charCodeAt(i) > 255 ? 2 : 1;
    }
    return n;
}
//按指定字節截取字符串
String.cutByte = function(str,len,endstr){
    var len = +len
        ,endstr = typeof(endstr) == 'undefined' ? "..." : endstr.toString();
    function n2(a){ var n = a / 2 | 0; return (n > 0 ? n : 1)} //用於二分法查找
    if(!(str+"").length || !len || len<=0){return "";}
    if(this.getBlength(str) <= len){return str;} //整個函數中最耗時的一個判斷,歡迎優化
    var lenS = len - this.getBlength(endstr)
        ,_lenS = 0
        , _strl = 0
    while (_strl <= lenS){
        var _lenS1 = n2(lenS -_strl)
        _strl += this.getBlength(str.substr(_lenS,_lenS1))
        _lenS += _lenS1
    }
    return str.substr(0,_lenS-1) + endstr
}

 

拿上面的字符串來測試一下,應該是載得越長越耗時,截個20W的長度試試：

console.log("創造的字符串長度為：",str.length," 字節長度為：",String.getBlength(str))
console.log("-------------測試開始--------------")
console.log("String.cutByte('1開始1',6,'...') >> ",String.cutByte('1開始1',6,'...'))
console.log("String.cutByte(str,12,'...') >> ",String.cutByte(str,12,'...'))
console.log("String.cutByte(str,13,'..') >> ",String.cutByte(str,13,'..'))
console.log("String.cutByte(str,14,'.') >> ",String.cutByte(str,14,'.'))
console.log("String.cutByte(str,15,'') >> ",String.cutByte(str,15,''))
console.log("--效率測試開始--")
var time1 = new Date()
for(var i=0;i<100;i++){
    String.cutByte(str,200000,'...')
}
console.log("耗時：",new Date() - time1);

輸出結果:

創造的字符串長度為： 314432  字節長度為： 425408 
-------------測試開始-------------- 
String.cutByte('1開始1',6,'...') >>  1開始1 
String.cutByte(str,12,'...') >>  javascrip... 
String.cutByte(str,13,'..') >>  javascript .. 
String.cutByte(str,14,'.') >>  javascript 高. 
String.cutByte(str,15,'') >>  javascript 高 
--效率測試開始-- 
耗時： 155 

其實把截取字符長度改到30W 40W的耗時也差不了多少,在二分法面前,這都是一個級別的

對比之前的計算字節長度的耗時,用二分法查找截取只消耗了不到兩次字節長度的記算的時間.

最后,同學們,來挑戰一下效率吧!

 

2014年4月24日補充：

 因為一般來說，超長的占位符一般長度很小，所以把函數再改了一下，取消了一開始就比較 str的字節長 和 len的大小，而是等二分法查詢完成之后，比較被截掉的字符串和站位符的長度。

這樣，在多數情況下，特別是在處理大字符串的時候，效率會有質的提升。

String.cutByte = function (str, len, endstr) {
    var len = +len,
    endstr = typeof(endstr) == 'undefined' ? "..." : endstr.toString(),
    endstrBl = this.getBlength(endstr);
    function n2(a) {var n = a / 2 | 0; return (n > 0 ? n : 1)}//用於二分法查找
    if (!(str + "").length || !len || len <= 0) {
        return "";
    }
    if(len<endstrBl){
        endstr = "";
        endstrBl = 0;
    }
    var lenS = len - endstrBl,
    _lenS = 0,
    _strl = 0;
    while (_strl <= lenS) {
        var _lenS1 = n2(lenS - _strl),
        addn = this.getBlength(str.substr(_lenS, _lenS1));
        if (addn == 0) {return str;}
        _strl += addn
        _lenS += _lenS1
    }
    if(str.length - _lenS > endstrBl || this.getBlength(str.substring(_lenS-1))>endstrBl){
        return str.substr(0, _lenS - 1) + endstr
    }else{
        return str;
    }    
}

用上面的測試例子測試的結果如下：

創造的字符串長度為： 314432  字節長度為： 425408 
-------------測試開始-------------- 
String.cutByte('1開始1',6,'...') >>  1開始1 
String.cutByte(str,12,'...') >>  javascrip... 
String.cutByte(str,13,'..') >>  javascript .. 
String.cutByte(str,14,'.') >>  javascript 高. 
String.cutByte(str,15,'') >>  javascript 高 
--效率測試開始-- 
耗時： 72 

 

轉載請注明出處 http://www.cnblogs.com/whyoop，謝謝！