原生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)

猜你喜欢

转载自blog.csdn.net/undytk/article/details/88820987
今日推荐