String methods

In the book, Eloquent Javascript: A Modern Introduction to Programming, Marijn Haverbeke takes the reader through a good number of string-parsing examples. And, in his examples, Haverbeke makes frequent use of the String method, slice(). When I think of slice(), I think of extracting portions of a Javascript array; I don't think I was even aware that the Javascript String prototype had a slice() method. To clear up my own confusion and misconceptions, I wanted to take a quick look at the various ways in which Javascript allows for partial string extraction.

From what I can see, there are three primary methods for substring extraction:

String.slice( begin [, end ] )
String.substring( from [, to ] )
String.substr( start [, length ] )

In all cases, the second argument is optional. If it is not provided, the substring will consist of the start index all the way through the end of the string. For both the slice() and substring() methods, the second argument is exclusive; that is, the resultant substring will not contain the character at the final index.

Let's take a look as these three approaches in action:

<!DOCTYPE html>
<html>
<head>
<title>Extracting Substrings In Javascript</title>
<script type="text/javascript">
// For these demos, let's create a numbered string so that
// we can easily see where the indexes come into play with
// all of the substring methods.
//
// NOTE: We are starting at zero since Javascript is all
// zero-based.
var numbers = "0123456789";
// -------------------------------------------------- //
// -------------------------------------------------- //
// String.slice( begin, end )
// Let's start by using both begin and end.
console.log(
"slice( 3, 7 ) :",
numbers.slice( 3, 7 )
);
// What happens when we start with a negative number.
console.log(
"slice( -7, 7 ) :",
numbers.slice( -7, 7 )
);
// What happens when we use two negative numbers.
console.log(
"slice( -7, -3 ) :",
numbers.slice( -7, -3 )
);
// What happens when we omit the last argument.
console.log(
"slice( 3 ) :",
numbers.slice( 3 )
);
// And with the negative, end-relevant index.
console.log(
"slice( -7 ) :",
numbers.slice( -7 )
);
// If the index is out of range, it returns the empty string.
console.log(
"slice( 100, 101 ) :",
numbers.slice( 100, 101 )
);
// -------------------------------------------------- //
// -------------------------------------------------- //
// String.substring( from, to )
// Let's start by using both begin and end.
console.log(
"substring( 3, 7 ) :",
numbers.substring( 3, 7 )
);
// What happens when we start with a negative number.
console.log(
"substring( -7, 7 ) :",
numbers.substring( -7, 7 )
);
// What happens when we use two negative numbers.
console.log(
"substring( -7, -3 ) :",
numbers.substring( -7, -3 )
);
// What happens when we omit the last argument.
console.log(
"substring( 3 ) :",
numbers.substring( 3 )
);
// And with the negative, end-relevant index.
console.log(
"substring( -7 ) :",
numbers.substring( -7 )
);
// If the index is out of range, it returns the empty string.
console.log(
"substring( 100, 101 ) :",
numbers.substring( 100, 101 )
);
// -------------------------------------------------- //
// -------------------------------------------------- //
// String.substr( start, length )
// Let's start by using both start and length
console.log(
"substr( 3, 4 ) :",
numbers.substr( 3, 4 )
);
// What happens when we start with a negative number.
console.log(
"substr( -7, 4 ) :",
numbers.substr( -7, 4 )
);
// What happens when we omit the last argument.
console.log(
"substr( 3 ) :",
numbers.substr( 3 )
);
// And with the negative, end-relevant index.
console.log(
"substr( -7 ) :",
numbers.substr( -7 )
);
// If the index is out of range, it returns the empty string.
console.log(
"substr( 100, 1 ) :",
numbers.substr( 100, 1 )
);
</script>
</head>
<body>
</body>
</html>

slice( 3, 7 ) : 3456
slice( -7, 7 ) : 3456
slice( -7, -3 ) : 3456
slice( 3 ) : 3456789
slice( -7 ) : 3456789
slice( 100, 101 ) :

substring( 3, 7 ) : 3456
substring( -7, 7 ) : 0123456
substring( -7, -3 ) :
substring( 3 ) : 3456789
substring( -7 ) : 0123456789
substring( 100, 101 ) :

substr( 3, 4 ) : 3456
substr( -7, 4 ) : 3456
substr( 3 ) : 3456789
substr( -7 ) : 3456789
substr( 100, 1 ) :

As you can see, the slice() and substring() methods are roughly the same; the only difference is that the slice() method can accept a negative index, relative to the end of the string. Should you try to use a negative index in substring(), it seems to be relative the beginning of the string (and therefore is out-of-bounds).

The substr() method can use a negative index; but, rather than using a to-argument, it uses a length-argument. This can be especially useful if you know the length of the substring ahead of time and don't want to perform any superflous math to calculate the necessary indices.

jQuery Repo

Thursday 14 March 2013

Using Slice(), Substring(), And Substr() In Javascript

String methods

No comments:

Post a Comment

About Me

Blog Archive