原生js之字符串截取[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

字符串截取的方法有三种：

slice(start, end+1), substring(start, end+1), substr(start, n).
slice(start, end+1): 两个参数时，参数指截取位置，截取含头不含尾；一个参数时，默认截取到字符串结尾。参数可以为负数，负数就倒着数位置。
substring(start, end+1): 两个参数时，参数指截取位置，截取含头不含尾；一个参数时，默认及渠道字符串结尾。参数不可以为负数。
substr(start, n): 两个参数时，第一个参数指截取起始位置，第二个参数指截取字符个数；一个参数时，默认截取到字符串结尾。第一个参数可为负数，第二个不可为负数。
example：
var str = “今天是星期二”;
console.log(str.slice(3, 6)); // 截取“星期二”并打印
console.log(str.slice(3, -1)); // 截取“星期”并打印
console.log(str.slice(3,-3)); // 未截取任何信息，因为正着数第三位是“星”,倒着数第三位也是“星”，截取取头不取尾，头和尾重了，所以没有截取到任何信息。
console.log(str.slice(-2, -3)); // 同理因为倒数第二位是“期”，倒数第三位是“星”，不能反着截取，所以没有截取到任何信息。
console.log(str.substring(3,6)); // 截取“星期二”并打印
console.log(str.substr(3, 3)); // 截取“星期二”并打印
console.log(str.substr(-1, 3)); //截取“二”并打印。因为倒着数第一位是“二”，虽然此时要截取的长度是3，但是因为只有一位，所以只能截取一位。

但是如果不知道要截取的字符在字符串中的位置，可以使用indexOf()方法搜索到字符在字符串的起始位置，如果省略第二个参数，默认起始位置为下标0。
var str = “今天是星期二”;
var i = str.indexOf(“星”);
console.log(str.substring(i, i+4)); // 截取“星期二”并打印

原生js的字符串截取

可是原生js中并不是一般直接用slice、substring、substr就可以了，先看一下原生js实现字符串长度截取的代码：

function cutstr(str, len) { 
   
     var temp;  // 定义新的字符来存放每次截取的字符
     var icount = 0; // 定义变量来记录已经截取的字符串的长度
     var patrn = /[^\x00-\xff]/; // 正则判断字符是否匹配非单字节的字符（例如汉字、汉字符号，单字节字符包含英文字母、数字、英文符号等。）
     var strre = " ";
     for(var i = 0; i < str.length; i++) { 
   
        if(icount < len) { 
    //看了很多博客写的这里是icount < len - 1, 但是觉得是不对的，应该是icount < len, 如不正确，请指正！
            temp = str.substr(i, 1);
            if(patrn.exec(temp) == null) { 
   
                icount += 1; //如果是单字节字符，则长度+1；
            } else { 
   
                icount += 2; //如果是双字节字符，则长度+2；
            }
            strre += temp;
        } else { 
   
            break;
        }
     }
     return strre;   
}

可以看到代码中通过正则匹配来判断字符是否匹配非单字节的字符，这是因为并不是所有的字符串都只包含单字节字符，也会包含汉字等双字节字符。
如果没有正则匹配，
cutstr("我ABC汉DEF", 6); //输出的是“我ABC+汉的半个”
加上正则匹配后，
cutstr("我ABC汉DEF", 6); //输出的是“我ABC”

参考
前端学习笔记之九——原生JavaScript实现字符串截取
分享原生JavaScript技巧大收集（1~10）