JavaScript 中substr与substring的区别

写在前面 能看到这篇博客的小伙伴说明我们都曾经被同一个问题困惑过，我把我的问题顺利解决了。希望我的博客可以帮到你！

substr() 方法

语法
substr( start, length ) 第一个参数：必填。 说明：start：表示你要抽取字符集的下标。 length可选：表示你要获取 从start下标抽取的字符集中length长度的字符串
不带 length 参数的例子：

	//全局变量
	var str = "0123456789";
	
    //3表示： 字符串在下标为3（包含下标为3的字符）之后开始截取的字符
    var str_1 = str.substr(3);
    //即 控制台输出的结果为 3456789
    console.log(str_1);
    //同理 4 即 表示抽取 下标为4（包含下标为4的字符）
    var str_2 = str.substr(4);
    //即 控制台输出的结果为 456789
    console.log(str_2);

效果图：

带 length 参数的例子：

	//全局变量
	var str = "0123456789";
	
	//表示 先把 [0123456789] 字符串按照 下标 抽取为 3456789 的字符串
    // 然后 从3456789 取出 1个长度的字符
    var str_3 = str.substr(3, 1);
    // 即  控制台输出的结果为 3
    console.log(str_3);

    //表示 先把 [0123456789] 字符串按照 下标 抽取为 3456789 的字符串
    // 然后 从3456789 取出 3个长度的字符
    var str_4 = str.substr(3, 3);
    //即  控制台输出的结果为  345
    console.log(str_4);

效果图：

substring() 方法

语法
substring( start, end) 第一个参数start必填，表示你要抽取字符集的下标。第二个参数end可选， 表示结束下标。
不带 end 参数的例子：

	//全局变量
	var str = "0123456789";
	
    //3表示： 字符串在下标为3（包含下标为3的字符）之后开始截取的字符
    var string_1=str.substring(3);
     //即 控制台输出的结果为 3456789
    console.log(string_1);

效果图：

带 end参数的例子：

	//全局变量
	var str = "0123456789";
	//表示 抽取 0123456789  字符串 字符下标从3 开始 包含3  到下标为5结束 不包含5
    var string_2=str.substring(3,5);
    //即   控制台输出的结果为     34
    console.log(string_2);

   //表示 抽取 0123456789  字符串 字符下标从3 开始 包含3  到下标为9结束 不包含9
    var string_3=str.substring(3,9);
    //即   控制台输出的结果为     345678
    console.log(string_3);

效果图：

注意

1. substring() 方法使用时 start 和 end 两者中的较小值作为子字符串的起始点
2. ECMA 标准规范 并没有对 substr() 进行标准化，所以并不建议使用 substr()
3. start 或 end 为 NaN 或者负数，那么将其替换为0
4. start 和 end 相等时，取出来的值为空值。

 console.log("str.substring(3, 3)====>\t"+str.substring(3, 3));

效果图：

总结

substr()和substring()相同点：
当只存在一个参数时，substr()和substring() 并无实质性区别。作用都是：截取字符串当前下标以后直到字符串最后的字符串片段。
substr()和substring()不同点：
substr（3,8） 第二个参数是截取字符串的长度
substring（3,8） 第二个参数是截取字符串最终的下标 这里截取的下标包含3 不包含 8