標題過長使用javascript按位元組截取字串_javascript技巧

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

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

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

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

網路上流傳一個Javascript簡單取得位元組長度的方法：

複製程式碼

複製程式碼

程式碼
複製程式碼

程式碼

String.prototype.Blength = function(){//返回字串位元組長度

return this.replace(/([^x00-xFF])/g, "aa"). length; }; 確實很簡單，大於ASCII碼的字符都算做兩個字節，雖然嚴格來說不正確，但我們是用來輔助展示效果的，真嚴格起來反而不好了， 但總覺得為了一點投機取巧，而用正則這種較耗時東西不太好，其實也就節省了兩行代碼，所以我決定還是用正常方式計算：

複製程式碼


程式碼如下:

function getBlength(str. (var i=str.length;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 str.Blength()
}
console.log("Blength耗時：",new Date() - time1);

var time2 = new Date()
for(var i=0;iString.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 || lenif(this.getBlength(str) var lenS = len - this.getBlength(endstr)
,_lenS = 0
, _strl = 0
while (_strl 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;iString.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的耗時也差不了多少,在二分法面前,這都是一個等級的

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

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