JavaScript高效按字节截取字符串：二分法与性能优化

前端字符串截取的常见困境

前端开发中，网页展示时常遇到标题过长需截取的情况。若仅依赖CSS实现，往往面临各种兼容性问题与潜在陷阱。

若请求后端协助截取，常遭推诿；要求后端按字节截取更是困难重重，最终可能仅按字符长度截断，导致显示效果不佳、对齐混乱，仍需前端调整CSS并处理兼容性问题。

对此深有体会的前端开发者，不妨为此点个赞。

近期参与的一个项目中，后端仅提供JSON接口，页面数据渲染与绑定全权由前端负责。在暂不考虑SEO的前提下，页面控制权完全掌握在前端手中，却也再次遇到了字节截取的难题。

字节长度计算方法对比

网络上流传一种简单的JavaScript方法用于获取字符串字节长度：

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

该方法确实简洁：将非ASCII字符（即大于ASCII码的字符）均视为两个字节。尽管从严格意义上讲并不完全准确，但作为辅助展示效果的手段，过于严格的计算反而可能带来不便。

然而，使用正则表达式这种相对耗时的操作，似乎有些得不偿失，毕竟仅节省了两行代码。因此，我决定采用更常规的方式计算字节长度：

 
function getBlength(str){
for(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<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，耗时差异也不大。在二分法面前，这些都属于同一数量级。

与之前单纯计算字节长度的耗时相比，采用二分法查找截取位置仅消耗了不到两次字节长度计算的时间。

最后，欢迎各位同学挑战并优化效率！