<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的几种截取字符串方法</title>
</head>
<body>
    <li>方法1：substr</li>
    <li>方法2：Substring</li>
    <li>方法3：slice</li>
    <li>方法4：charAt</li>

</body>
</html>
<script>
   /// 1.stringObject.substr(start,length)
   // start :必填 子串的起始下标。必须是数值，如果是负值，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
   // length:可选 截取字符串的个数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。
    var lis = document.getElementsByTagName("li");
    var str1 = "abcdefg";
    //0
    lis[0].innerHTML = str1.substr(0);//返回本身abcdefg
    //一个参数
    lis[0].innerHTML = str1.substr(2);//返回截取掉前面2个字符串的值cdefg
    //2个负数
    lis[0].innerHTML = str1.substr(-2,-1);//length不能为负数，若强行传递负数，就为0，相当于str1.substr(0,0)
    //2个正数
    lis[0].innerHTML = str1.substr(3,5);///截取第3个之后（不含3）的字符，截取5个字符 defg
    //一负一正
    lis[0].innerHTML = str1.substr(-2,2);//start为负数，-1 指字符串中最后一个字符，返回截取字符串倒数2个字符，fg
</script>

<script>
    /// 2.stringObject.Substring(start,length)
    // start :必填 一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
    // length:可选 一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1，如果省略该参数，那么返回的子串会一直到字符串的结尾。
    var lis = document.getElementsByTagName("li");
    var str1 = "abcdefg";
    //0
    lis[1].innerHTML = str1.substring(0);//返回本身abcdefg
    //一个参数
     lis[1].innerHTML = str1.substring(2);//截取第二个之后所有的字符 cdefg
    //2个正数
    lis[1].innerHTML = str1.substring(3,5);///截取第3个之后（不含3）到第5+1(提取的子串的 stringObject 中的位置多 1)个之间的字符 de
    //2个负数
     lis[1].innerHTML = str1.substring(-2,-1);//start、length不能为负数，若强行传递负数，就为0，相当于str1.substring(0,0) 值为"";
    //一负一正
     lis[1].innerHTML = str1.substring(-2,2);//跟substring(0,2)一样，返回ab
    //一正一负
     lis[1].innerHTML = str1.substring(3,-5);///截取第3个之后到第0个之间的字符 abc
</script>

<script>
    /// 3.stringObject.slice(start,end)
    // start :必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
    // end:可选 规定从何处结束选取。该参数是数组片断结束处的数组下标。如果省略该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
    var lis = document.getElementsByTagName("li");
    var str1 = "abcdefg";
    //0
    lis[2].innerHTML = str1.slice(0);//返回本身abcdefg
    //一个参数
    lis[2].innerHTML = str1.slice(2);//截取第二个之后所有的字符 cdefg
    //2个正数
    lis[2].innerHTML = str1.slice(3,5);///截取第3个之后（不含3）到第6个之间的字符 de
    //2个负数
    lis[2].innerHTML = str1.slice(-2,-1);//start end  -1 指最后一个元素，-2 指倒数第二个元素，以此类推。 f
    //一正一负
    lis[2].innerHTML = str1.slice(1,-3);//截取第1个(不含1)到 倒数第3个之间的字符 bcd
</script>

<script>
    // 4.charAt() 方法可返回指定位置的字符。
    // stringObject.charAt(index)
    //index: 必需。表示字符串中某个位置的数字，即字符在字符串中的下标。
    var lis = document.getElementsByTagName("li");
    var str1 = "abcdefg";
    lis[3].innerHTML = str1.charAt(2);//值截取一个值

</script>