JS中substr和substring的用法和区别

substr 和 substring都是JS 截取字符串函数,两者用法很相近,下面是两者的语法很示例:

substr 方法

返回一个从指定位置开始的指定长度的子字符串。

stringvar.substr(start [, length ])

参数
stringvar
必选项。要提取子字符串的字符串文字或 String 对象。
start
必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
length
可选项。在返回的子字符串中应包括的字符个数。

说明
如果 length 为 0 或负数,将返回一个空字符串。如果没有指定该参数,则子字符串将延续到 stringvar 的最后。

示例代码

[js]function SubstrDemo(){
var s, ss; // 声明变量。
var s = "The rain in Spain falls mainly in the plain.";
ss = s.substr(12, 5); // 获取子字符串。
return(ss); // 返回 "Spain"。
}[/js]

substring 方法

返回位于 String 对象中指定位置的子字符串。

strVariable.substring(start, end)

“String Literal”.substring(start, end)

参数
start
指明子字符串的起始位置,该索引从 0 开始起算。
end
指明子字符串的结束位置,该索引从 0 开始起算。

说明
substring 方法将返回一个包含从 start 到最后(不包含 end )的子字符串的字符串。
substring 方法使用 start 和 end 两者中的较小值作为子字符串的起始点。例如, strvar.substring(0, 3) 和 strvar.substring(3, 0) 将返回相同的子字符串。
如果 start 或 end 为 NaN 或者负数,那么将其替换为0。
子字符串的长度等于 start 和 end 之差的绝对值。例如,在 strvar.substring(0, 3) 和 strvar.substring(3, 0) 返回的子字符串的的长度是 3。

示例代码

[js]function SubstringDemo(){
var ss; // 声明变量。
var s = "The rain in Spain falls mainly in the plain..";
ss = s.substring(12, 17); // 取子字符串。
return(ss); // 返回子字符串。
}[/js]

截止字符串最后一位字符的方法

[js]var str="aaaaaaaaaaaaaaaaaa|";
var texts=str.substr(0, str.length-1);
alert(texts);[/js]

【注】:应用substr和substring两个函数截取带有空格的字符串后的长度是每个空格算一个字符长度。例如:

var a = “I am shi huan!”; a.substring(0, 5).length的值是5,而不是4,

但alert(a.substring(0, 5));的值却是I am ,这样在做alert(“I am” == a.substring(0, 5));的时

候就是false了,alert(“I am” == a.substring(0, 4));才是true。

如何让错误的js代码不打断后面的代码继续执行

一个js文件中如果有一行代码报错了,那么它后面的代码也就被打断了不会继续执行,所以我们经常看到网页显示一半就不显示了,因为代码被错误打断了。
如果想后面的代码不被错误打断怎么办?
使用Try…Catch 语句
try…catch 可以测试代码中的错误。try 部分包含需要运行的代码,而 catch 部分包含错误发生时运行的代码。
语法:

try
{
//在此运行代码
}
catch(err)
{
//在此处理错误
}

例子:

提示:你可以先修改部分代码再运行。

跳转到指定元素的位置组件(源生)

/**
 * 跳转到指定元素的位置
 * 使用方法
 * scroller(el, duration)
 * el : 目标锚点 ID
 * duration : 持续时间,以毫秒为单位,越小越快
 */
var flutil = {
    intval: function(v) {
        v = parseInt(v);
        return isNaN(v) ? 0 : v;
    },
    getPos: function(e) { // 获取元素信息 
        var l = 0;
        var t = 0;
        var w = this.intval(e.style.width);
        var h = this.intval(e.style.height);
        var wb = e.offsetWidth;
        var hb = e.offsetHeight;
        while (e.offsetParent) {
            l += e.offsetLeft + (e.currentStyle ? this.intval(e.currentStyle.borderLeftWidth) : 0);
            t += e.offsetTop + (e.currentStyle ? this.intval(e.currentStyle.borderTopWidth) : 0);
            e = e.offsetParent;
        }
        l += e.offsetLeft + (e.currentStyle ? this.intval(e.currentStyle.borderLeftWidth) : 0);
        t += e.offsetTop + (e.currentStyle ? this.intval(e.currentStyle.borderTopWidth) : 0);
        return {
            x: l,
            y: t,
            w: w,
            h: h,
            wb: wb,
            hb: hb
        };
    },
    getScroll: function() { // 获取滚动条信息 
        var t, l, w, h;
        if (document.documentElement && document.documentElement.scrollTop) {
            t = document.documentElement.scrollTop;
            l = document.documentElement.scrollLeft;
            w = document.documentElement.scrollWidth;
            h = document.documentElement.scrollHeight;
        } else if (document.body) {
            t = document.body.scrollTop;
            l = document.body.scrollLeft;
            w = document.body.scrollWidth;
            h = document.body.scrollHeight;
        }
        return {
            t: t,
            l: l,
            w: w,
            h: h
        };
    },
    scroller: function(el, duration) { // 锚点(Anchor)间平滑跳转 
        if (typeof el != 'object') {
            el = document.getElementById(el);
        }
        if (!el) return;
        var z = this;
        z.el = el;
        z.p = this.getPos(el);
        z.s = this.getScroll();
        z.clear = function() {
            window.clearInterval(z.timer);
            z.timer = null
        };
        z.t = (new Date).getTime();
        z.step = function() {
            var t = (new Date).getTime();
            var p = (t - z.t) / duration;
            if (t >= duration + z.t) {
                z.clear();
                window.setTimeout(function() {
                    z.scroll(z.p.y, z.p.x)
                }, 13);
            } else {
                st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t;
                sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l;
                z.scroll(st, sl);
            }
        };
        z.scroll = function(t, l) {
            window.scrollTo(l, t)
        };
        z.timer = window.setInterval(function() {
            z.step();
        }, 13);
    }
}

复选框被选中的个数大于某值时Callback组件

/**
 * 判断多选框如果大于限制的选中数量的值则执行Callback函数
 * 使用方法如下
 * checkboxIsoverstep(defEl, voteCountNum, function() {
 *      alert('最多选' + voteCountNum + '项');
 *  });
 * checkboxsWarpEl : checkbox的父级元素
 * num : 限制的选中数量
 */
checkboxIsoverstep: function(checkboxsWarpEl, num, callBack) {
    var checkboxEl = $('input[type=checkbox]', checkboxsWarpEl);
    checkboxEl.on('click', function() {
        var checkedsLen = $(':checked', checkboxsWarpEl).length;
        if (checkedsLen > num) {
            $(this).prop('checked', false);
            callBack()
        }
    });
}