The difference and usage between substr (), slice (), and substring () in the string interception methods of "understand series after reading"

String interception and splicing are the most commonly used and error prone methods for strings . The main reason is  substr()  and  slice()  and  substring() The difference between looks messy , There are many friends who don't quite understand .

So today, the ice cube was sacrificed

loaf on a job

  Rest time , Rearrange the differences between these three methods of intercepting strings .

First, let's summarize the parameters of the three methods ：

substr()：

Parameter one （ must ）： An integer , To start intercepting subscripts of characters , If it is negative, it means to intercept from the tail . Parameter two （ Optional ）： An integer , Number of characters to intercept . If this parameter is omitted , The default is string.length, That is, the length of the current string .

slice() ：

Parameter one （ must ）： An integer , To start intercepting subscripts of characters , If it is negative, it means to intercept from the tail . Parameter two （ Optional ）： An integer , To end the subscript of the intercepted character , If it is negative, it represents how many characters are intercepted from the tail . If this parameter is omitted , The default is string.length, That is, the length of the current string .

substring() ：

Parameter one （ must ）： A nonnegative integer , To start intercepting subscripts of characters . Parameter two （ Optional ）： A nonnegative integer , To end the subscript of the intercepted character . If this parameter is omitted , The default is string.length, That is, the length of the current string .

Let's talk about their differences in detail from the different transmission parameters ：

When both parameters are positive ：

Their parameters all indicate that they are intercepted from a certain subscript .substr()  Parameter 2 of represents the total number of bits intercepted ;slice()  and substring()  The second parameter of represents intercepting a subscript （ Does not contain this subscript character ）.

When both parameters are negative ：

substr()  and slice()  Parameter 1 of indicates that it is intercepted from the tail .slice()  Parameter 2 means from the tail n Subscript end intercept .substr() Parameter 2 means to intercept negative digits , The intercepted value is empty  .substring() Then both parameter one and parameter two are converted to 0, Intercept is null .

When there is only one parameter and it is positive ：

Their parameters all indicate that they are intercepted from a certain subscript . Parameter 2 defaults to the length of the current string length.

When there is only one parameter and it is negative ：

substr()  and slice()  The parameter one of represents from the tail n A subscript begins to intercept ;substring() Then change parameter 1 to 0. Their parameter 2 defaults to the length of the current string length.

The first parameter is positive , But when the second parameter is negative ：

substr()  and slice()  Parameter 1 of all indicates that it is intercepted from a subscript .substr() Parameter 2 means to intercept negative digits , The intercepted value is empty .slice() Parameter 2 means from the tail n Subscript end intercept .substring()  Then change the first parameter to 0, The second parameter is changed to the value of the first parameter .

The first parameter is negative , But when the second parameter is positive ：

substr()  and slice()  The parameter one of all represents from the tail n A subscript begins to intercept ,substring() Then change parameter 1 to 0, Their parameter two represents the interception of a subscript （ Does not contain this subscript character ）.

usage 1：

 string.substr(

start

,

length

)

usage 2：

 string.slice(

start

,

end

)

usage 3：

 string.substring(

start

,

end

)

Example a ：

 （ Both parameters are positive ）

let str = '0123456789'
let result1 = str.substr(2,5) //  From the subscript 2 Began to intercept , Intercept 5 position
let result2 = str.slice(2,5) //  From the subscript 2 Began to intercept , Intercept to subscript 5（ Without subscript 5）
let result3 = str.substring(2,5) //  From the subscript 2 Began to intercept , Intercept to subscript 5（ Without subscript 5）

console.log(result1) //  Console printing ：23456
console.log(result2) //  Console printing ：234
console.log(result3) //  Console printing ：234


Example 2 ：

 （ Both parameters are negative ）

let str = '0123456789'
let result1 = str.substr(-2,-5) //  amount to  str.substr(str.length-2,-5), amount to  str.substr(8,-5),  From the subscript 8 Began to intercept , Intercept -5 position
let result2 = str.slice(-2,-5) //  amount to  str.substr(str.length-2,str.length-5), amount to  str.substr(8,5),  From the subscript 8 Began to intercept , Intercept to subscript 5（ Without subscript 5）
let result3 = str.substring(-2,-5) //  amount to  str.substr(0,0)

//  Because there is no element in the interval where the subscript is intercepted , So the print is empty
console.log(result1) //  Console printing ： 
console.log(result2) //  Console printing ： 
console.log(result3) //  Console printing ： 


Example 3 ：

 （ There is only one parameter and it is positive ）

let str = '0123456789' // str.length by 10
let result1 = str.substr(2) //  amount to  str.substr(2,str.length), amount to  str.substr(2,10), Insufficient 10 Take the last bit
let result2 = str.slice(2) //  amount to  str.slice(2,str.length), amount to  str.slice(2,10)
let result3 = str.substring(2) //  amount to  str.substring(2,10)

console.log(result1) //  Console printing ：23456789
console.log(result2) //  Console printing ：23456789
console.log(result3) //  Console printing ：23456789


Example four ：

 （ There is only one parameter and it is negative ）

let str = '0123456789' // str.length by 10
let result1 = str.substr(-2) //  amount to  str.substr(str.length-2,str.length), amount to  str.substr(8,10), Insufficient 10 Take the last bit
let result2 = str.slice(-2) //  amount to  str.slice(str.length-2,str.length), amount to  str.slice(8,10)
let result3 = str.substring(-2) //  amount to  str.substring(0,10)

console.log(result1) //  Console printing ：89
console.log(result2) //  Console printing ：89
console.log(result3) //  Console printing ：0123456789


Example five ：

 （ The first parameter is positive , But the second parameter is negative ）

let str = '0123456789' // str.length by 10
let result1 = str.substr(2,-5) //  From the subscript 2 Began to intercept , Intercept -5 Characters , It's empty
let result2 = str.slice(2,-5) //  From the subscript 2 Began to intercept , Intercept to str.length-5, That is equivalent to  str.slice(2,5)
let result3 = str.substring(2,-5) //  amount to  str.substring(0,2) , When substring The first parameter of is a positive number , When the second parameter is negative , The first parameter will be taken as 0, The second parameter is changed to the value of the first parameter, that is 2.

console.log(result1) //  Console printing ：
console.log(result2) //  Console printing ：234
console.log(result3) //  Console printing ：01


Example six ：

 （ The first parameter is negative , But the second parameter is positive ）

let str = '0123456789' // str.length by 10
let result1 = str.substr(-2,5) //  amount to  str.substr(str.length-2,5), amount to  str.substr(8,5)
let result2 = str.slice(-2,5) //  amount to  str.slice(str.length-2,5), amount to  str.substr(8,5), It's empty
let result3 = str.substring(-2,5) //  amount to  str.substring(0,5), When substring When the first parameter of is negative , The first parameter will be taken as 0.

console.log(result1) //  Console printing ：89
console.log(result2) //  Console printing ：
console.log(result3) //  Console printing ：01234


Written in the back

This is big ice 《 After reading the series 》 Of the 1 An article ,《 After reading the series 》 It aims to present some common concepts or methods in an easy to understand way .

Originality is not easy. , If there is a mistake , Welcome to point out .

If it helps you , Please give the big ice cubes three times （ Like collection comments ）, Let's make progress on the front end ~🤭