vue基础教学（12）

substring和substr的区别

一、substr() 方法
语法：substr(start,length)
在字符串中抽取从 start 下标开始的指定数目的字符。
（1）start，提取字符的位置。如果为负值，则被看作 str.Length + start，其中 str.Length 为字符串的长度（例如，如果 start 为 -3，则被看作 strLength + (-3)）。
（2）length，可选可不选。选择则输入要提取的字符数，不选就是全部。
示例：

var str="Hello world!"
document.write(str.substr(3))
//输出lo world！
//此示例，只有前面提取字符的位置（即start），后面的length则没有填，
//     所以从第3个开始后面的所有都能截取得到
1
2
3
4
5
示例二：

var str = "abcdefghij";

console.log(  str.substr(1,2));   //   bc
console.log(  str.substr(-3,2));  //   hi
console.log(  str.substr(-3));    //   hij
console.log(  str.substr(-20,2)); //   ab
console.log(  str.substr(1));     //   bcdefghij
console.log(  str.substr(20,2));  //  

1
2
3
4
5
6
7
8
9

二、substring（）方法
语法：str.substring(indexStart[, indexEnd])
（1）indexStart为需要截取的第一个字符的索引，该索引位置的字符作为返回的字符串的首字母
（2）indexEnd，可选。一个 0 到字符串长度之间的整数，以该数字为索引的字符不包含在截取的字符串内。
示例：

var str="Hello world!"
document.write(str.substring(3))
//输出为'lo world!'
//因为indexEnd为默认，所以从下标3开始截取，后面的全部截取
1
2
3
4
示例二：

var str="Hello world!"
         0123456789
document.write(str.substring(3,7))
//indexStart为3，所以从三开始取，取到'l'
//indexEnd为7，所以取到第六位（注意：是第六位），'w'
//所以输出为'lo w'
1
2
3
4
5
6

总计：
从以上示例可以总结出，substr与substring的不同之处是：
substr（a，b），可以从下标为a的位置开始截取，一直截取到下标为b的位置，（取头取尾）；
而substring（a，b），是从下标为a的位置开始截取，截取到下标为b-1的位置，（取头取不到尾）。
 

appendChild 和insertBefore

做图片库的时候使用到了这两个不同的命令；
insertBefore：在您指定的已有子节点之前插入新的子节点；
其详细用法为：
node.insertBefore(newnode,existingnode)
getId(“box”).insertBefore(getClass (“myimg”)[3],getId(“myimg”))
在id为box的元素的里面插入class为myimg的第三个元素，位置为id为myimg的元素前方。
其中existingnode元素 w3c中说可以省略，但是我尝试了一下，省略之后无法运行，可能是我代码设置错误，有时间研究一下。具体到图片库里可以让第四张图片（一共四张）插入到第一张之前，然后再做一个移动效果，即可循环切换；

appendChild：向节点添加最后一个子节点
node.appendChild(node)
getId(“box”).appendChild(getId (“myimg”));
在id为box的元素的最后面插入id为myimg的元素（附带说一下，一旦几个元素id相同，使用id选择器会查找到第一个该id的元素，如果用变量保存，则可以得到两个元素-一个保存变量时第一个元素，一个当前第一个元素，感觉可能以后会用到）