What is the difference between String.slice and String.substring?
slice()
works like substring()
with a few different behaviors.
Syntax: string.slice(start, stop);
Syntax: string.substring(start, stop);
What they have in common:
- If
start
equalsstop
: returns an empty string - If
stop
is omitted: extracts characters to the end of the string - If either argument is greater than the string's length, the string's length will be used instead.
Distinctions of substring()
:
- If
start > stop
, thensubstring
will swap those 2 arguments. - If either argument is negative or is
NaN
, it is treated as if it were0
.
Distinctions of slice()
:
- If
start > stop
,slice()
will return the empty string. (""
) - If
start
is negative: sets char from the end of string, exactly likesubstr()
in Firefox. This behavior is observed in both Firefox and IE. - If
stop
is negative: sets stop to:string.length – Math.abs(stop)
(original value), except bounded at 0 (thus,Math.max(0, string.length + stop)
) as covered in the ECMA specification.
Source: Rudimentary Art of Programming & Development: Javascript: substr() v.s. substring()
TL;DR;
- If you know the index (the position) on which you'll stop (but NOT include), use
slice()
. - If you know the length of characters to be extracted, use
substr()
.
Otherwise, read on for a full comparison
Syntax
string.slice(start,end)
string.substr(start,length)
string.substring(start,end)
Note #1: slice()==substring()
What it does?
- The
slice()
method extracts parts of a string and returns the extracted parts in a new string. - The
substr()
method extracts parts of a string, beginning at the character at the specified position, and returns the specified number of characters. - The
substring()
method extracts parts of a string and returns the extracted parts in a new string.
Note #2: slice()==substring()
Changes the Original String?
-
slice()
Doesn't -
substr()
Doesn't -
substring()
Doesn't Note #3:slice()==substring()
Using Negative Numbers as an Argument
-
slice()
selects characters starting from the end of the string -
substr()
selects characters starting from the end of the string -
substring()
Doesn't Perform
Note #3: slice()==substr()
If the First Argument is Greater than the Second
-
slice()
Doesn't Perform -
substr()
since the Second Argument is NOT a position, but length value, it will perform as usual, with no problems -
substring()
will swap the two arguments, and perform as usual
The First Argument
-
slice()
Required, indicates: Starting Index -
substr()
Required, indicates: Starting Index -
substring()
Required, indicates: Starting Index
Note #4: slice()==substr()==substring()
The Second Argument
-
slice()
Optional, The position (up to, but not including) where to end the extraction -
substr()
Optional, The number of characters to extract -
substring()
Optional, The position (up to, but not including) where to end the extraction
Note #5: slice()==substring()
What if the Second Argument is Omitted?
-
slice()
selects all characters from the start-position to the end of the string -
substr()
selects all characters from the start-position to the end of the string -
substring()
selects all characters from the start-position to the end of the string
Note #6: slice()==substr()==substring()
So, you can say that there's a difference between slice()
and substr()
, while substring()
is basically a copy of slice()
.
Ben Nadel has written a good article about this, he points out the difference in the parameters to these functions:
String.slice( begin [, end ] )
String.substring( from [, to ] )
String.substr( start [, length ] )
He also points out that if the parameters to slice are negative, they reference the string from the end. Substring and substr doesn't.
Here is his article about this.
The one answer is fine but requires a little reading into. Especially with the new terminology "stop".
My Go -- organized by differences to make it useful in addition to the first answer by Daniel above:
1) negative indexes. Substring requires positive indexes and will set a negative index to 0. Slice's negative index means the position from the end of the string.
"1234".substring(-2, -1) == "1234".substring(0,0) == ""
"1234".slice(-2, -1) == "1234".slice(2, 3) == "3"
2) Swapping of indexes. Substring will reorder the indexes to make the first index less than or equal to the second index.
"1234".substring(3,2) == "1234".substring(2,3) == "3"
"1234".slice(3,2) == ""
--------------------------
General comment -- I find it weird that the second index is the position after the last character of the slice or substring. I would expect "1234".slice(2,2) to return "3". This makes Andy's confusion above justified -- I would expect "1234".slice(2, -1) to return "34". Yes, this means I'm new to Javascript. This means also this behavior:
"1234".slice(-2, -2) == "", "1234".slice(-2, -1) == "3", "1234".slice(-2, -0) == "" <-- you have to use length or omit the argument to get the 4.
"1234".slice(3, -2) == "", "1234".slice(3, -1) == "", "1234".slice(3, -0) == "" <-- same issue, but seems weirder.
My 2c.