Comparing 3 JavaScript Methods - SubString, Substr And Slice to Pull Sub Strings
Last Updated -
Manipulating data is an important part of any application. As JavaScript has gained more market share the need to use the language to parse and extract data has risen.
JavaScript has native members of the String object to help extract sub-strings based on character position: substring, substr and slice. Each return a string, extracted from an initial string based on start position and a length.
On the surface they look almost identical, but have some subtle differences.
- substring(indexStart[, indexEnd]): returns the part of the string between the start and end indexes, or to the end of the string.
- substr(start[, length]): returns the part of a string between the start index and a number of characters after it.
- slice(beginIndex[, endIndex]): extracts a section of a string and returns it as a new string.
They also have different rules on how to deal with negative numbers and values outside the length of the source string. When you supply slice with a negative number it subtracts the number from the string's length.
"this is a test".slice(-3, -1); //returns "es"
Substring converts negative numbers or any value that is NaN to 0. If the indexStart is greater than indexEnd substring swaps the values. If they are equal it returns an empty string.
If the substr length value is a negative number it is converted to 0. If either start or length is NaN those values are converted to 0. If start is a negative number the index is set to the string length minus the value.
Parsing a Fixed Data String
Flat data files are a common source in many IT systems. They are the lowest common denominator of file formats. Typically they include field delineators like tabs or commas. But I have also seen many data sources use fixed width rows in text files.
The consumer is responsible for knowing how many characters belong to each field. For example a row may have 200 characters and the 'name' field is the first 30 characters. Any character not used is padded with a space.
You can use any of the three methods to extract the name field.
srcRecord.substring(0,30); srcRecord.substr(0,30); srcRecord.slice(0, 30); In my example I just copied a sentence and inserted my name, Chris Love, at the beginning and added spaces to padded the first 30 characters. I set the last character to 'e' as a tracer. That way you can see how the different methods extract the string.
Since the name field is the first 'field' in the record all three JavaScript extraction methods have the same parameters and return the same sub string.
Things get a little more interesting when you move to the next field, city. This example field is 20 characters wide. If you use the same parameters for each method you get different results:
The obvious plan is to use the start index, 30 and the field length, 20. The only method that works is substr.
By passing 30 and 20 to substring the values are inverted and the characters between the 20th and 30th positions are returned. To fix the issue the start index is 30 and the final index is 50.
Slice is different. Because 30 is greater than 20 an empty string is returned. Remember each parameter represents an index in the character array (string). Since 20 is before position 30 the method returns and empty string.
In this case slice works the same as substring. Passing 30 and 50 returns the desired characters.
As you can see substring and slice resemble each other. The key difference slice's ability to accept a negative number.
The negative index to slice indicates you want to stop or start that many characters from the end of the string. All negative numbers are converted to 0 in substring.
Wrapping Things Up
The JavaScript String substring, substr and slice methods can all extract portions of a string based on position. While similar each one uses their start end end index values differently.
substring only uses 0 and positive values, converting negative numbers to 0. It will also swap values when the start index is after the end index.
substr is also index based for the start position. The second value is the length of characters to extract. A negative length value converts to that many characters from the end of the string.
slice acts much like substring, except it uses negative numbers like substr.
Each of these methods are helpful when you need to parse a string and know the positions of the value needed.