操作字符串slice()substr()substring() 区别和共同点

Posted 2020-08-05

html部分

 

<div id="div1">y8y9y8u89</div>
<div id="div2">ffdffffef</div>
<button id="btn1">concat</button><span></span> <br/>
<button id="btn2">slice(3)</button><span></span> <br/>
<button id="btn3">slice(3,6)</button><span></span> <br/>
<button id="btn4">slice(-1)</button><span></span> <br/>


<button id="btn5">substr(3)</button><span></span> <br/>
<button id="btn6">substr(3，6)</button><span></span> <br/>
<button id="btn7">substr(-1) 兼容</button><span></span> <br/>

slice()和substring()区别
<button id="btn8">slice(6,3)</button><span></span> <br/>
<button id="btn9">substring(6,3)</button><span></span> <br/>

js部分

window.onload = function() {
    var div1 = document.getElementById("div1").innerHTML;
    var div2 = document.getElementById("div2").innerHTML;
    function onBtnClick(id,txt) {
        // alert(123);
        document.getElementById(id).onclick = function() {
            this.nextSibling.innerHTML = txt;

            //slice（“取字符串的起始位置”，【结束位置】）； 结束位置可以省略，可选参数
            onBtnClick("btn2",div1.slice(3));  // 从第3个开始取，一直取到最后：9y8u89
            onBtnClick("btn3",div1.slice(3,6));  // 3 从 第3个开始 取     6  取到第6索引号的位置，还是从左边的第0个开始数。 但是不包 6 。9y8
            onBtnClick("btn4",div1.slice(-1));  // 从右边开始取,-几就是几位   9

            //substr组  substr（“起始位置”，【取的个数】）；
            onBtnClick("btn5",div1.substr(3));  //  9y8u89
            onBtnClick("btn6",div1.substr(3,6));  //9y8u89  从第3位起取6位数字
            //substr(-1);ie6/7/8会报错
            onBtnClick("btn7",div1.substr(div1.length-1,1));   //兼容的写法 9

            // substring 组  和slice一样，不过substring（6，3）自动认为substring（3，6）
            onBtnClick("btn8",div1.slice(6,3));
            onBtnClick("btn9",div1.substring(6,3));   //9y8
        }
    }
    onBtnClick("btn1",div1.concat(div2));
}