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。

document.all用法

一.

document.all是页面内所有元素的一个集合。例如:
document.all(0)表示页面内第一个元素

二.

document.all可以判断浏览器是否是IE
if(document.all){
alert(“is IE!”);
}

三.

也可以通过给某个元素设置id属性(id=aaaa),然后用document.all.aaaa调用该元素

四.

案例:

代码1:

[js]<input name=aaa value=aaa>
<input id=bbb value=bbb>
<script language=Jscript>
alert(document.all.aaa.value) //根据name取value
alert(document.all.bbb.value) //根据id取 value
</script> [/js]

代码2:
但是常常name可以相同(如:用checkbox取用户的多项爱好的情况)

[js] <input name=aaa value=a1>
<input name=aaa value=a2>
<input id=bbb value=bbb>
<script language=Jscript>
alert(document.all.aaa(0).value) //显示a1
alert(document.all.aaa(1).value) //显示a2
alert(document.all.bbb(0).value) //这行代码会失败
</script> [/js]

代码3:
理论上一个页面中的id是互不相同的,如果出现不同tags有相同的id
document.all.id 就会失败,就象这样:

[js] <input id=aaa value=a1>
<input id=aaa value=a2>
<script language=Jscript>
alert(document.all.aaa.value) //显示 undefined 而不是 a1或者a2
</script> [/js]

代码4:
对于一个复杂的页面(代码很长,或者id是由程序自动产生),或着一个
javascript初学者写的程序,很有可能出现两个tags有相同id的情况。
为了编程的时候不出错,我推荐这样的写法:

[js]
<input id=aaa value=aaa1>
<input id=aaa value=aaa2>
<input name=bbb value=bbb>
<input name=bbb value=bbb2>
<input id=ccc value=ccc>
<input name=ddd value=ddd>

<script language=Jscript>
alert(document.all("aaa",0).value)
alert(document.all("aaa",1).value)
alert(document.all("bbb",0).value)
alert(document.all("bbb",1).value)
alert(document.all("ccc",0).value)
alert(document.all("ddd",0).value)
</script> [/js]

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

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

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

例子:

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

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

[js]/**
* 跳转到指定元素的位置
* 使用方法
* 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);
}
}[/js]

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

[js]/**
* 判断多选框如果大于限制的选中数量的值则执行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()
}
});
}[/js]