码迷,mamicode.com
首页 > Web开发 > 详细

js中 substr(), substring(), slice()的区别

时间:2017-05-27 23:06:14      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:程序设计   rip   截取字符串   不能   作用   相同   log   开始   字符串   

一、作用

  三者都是基于原字符串创建新字符串的方法。

  接收一到两个参数,第一个参数截取字符串的开始位置(字符下标,从0开始),第二个参数因方法不同而不同,后面不同点会说到。

  另外,三个方法都不会修改原字符串的值。

二、相同点

  • 都可以传入一个或两个参数
  • 只传入一个参数时,都表示从指定下标,截取字符串长度,直到字符串最后一个字符
var str = ‘hello sarahshine!‘;

console.log(str.slice(3));          // ‘lo sarahshine!‘
console.log(str.substring(3));      // ‘lo sarahshine!‘
console.log(str.subtr(3));          // ‘lo sarahshine!‘

 

三、不同点

2.1   传入两个参数时,第二个参数代表的意义不同

  • slice ( ) 和 substring ( ) 的第二个参数,都表示截取字符串的结束位置
  • substr ( ) 的第二个参数代表的是,要截取的字符串位数
var str = ‘hello sarahshine!‘;

console.log(str.slice(3,7));           // ‘lo s‘
console.log(str.substring(3,7));       // ‘lo s‘
console.log(str.substr(3,7));          // ‘lo sara‘

 

2.2  传入的参数是负数

  • slice ( )  会把所有的负数参数加上字符串的长度值,如:str.slice(-3)   相当于 str.slice(14)
  • substring ( ) 会把所有的负数参数都转为0
  • substr ( ) 会把第一个参数的负值加上字符串的长度值,第二个参数的负值转为0   (毕竟第二个参数是要截取的字符串长度,总不能为负数吧)
var str = ‘hello sarahshine!‘;  //length = 17
            
//只传入一个负数
console.log(str.slice(-3));     // ‘ne!‘                相当于str.slice(14)
console.log(str.substring(-3)); // ‘hello sarahshine!‘  相当于str.substring(0)
console.log(str.substr(-3));    // ‘ne!‘                相当于str.substr(14)
            
//传入两个负数
console.log(str.slice(-3, -1));     // ‘ne‘          相当于str.slice(14,16)
console.log(str.substring(-3, -1)); // ‘‘            相当于str.substring(0,0)
console.log(str.substr(-3, -1));    // ‘‘            相当于str.substr(14,0)
            
//传入一正一负
console.log(str.slice(3, -4));     // ‘lo sarahsh‘   相当于str.slice(3,13)
console.log(str.substring(3, -4)); // ‘hel‘          相当于str.substring(3,0)  即(0,3)
console.log(str.substr(3, -4));    // ‘‘             相当于str.substr(3,0)

 

以上都出自《javascript高级程序设计》 

js中 substr(), substring(), slice()的区别

标签:程序设计   rip   截取字符串   不能   作用   相同   log   开始   字符串   

原文地址:http://www.cnblogs.com/sarahwang/p/6914590.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!