06 April, 2009


I have created three (very) simple JavaScript methods for working with strings. Any competent JavaScript programmer could whip these up in 5 minutes; nonetheless, they are useful so I shall share them with you:
"use strict";
if (typeof String.prototype.sort !== "function") {
    String.prototype.sort = function (funct) {
        return this.split("").sort(funct).join("");
if (typeof String.prototype.splice !== "function") {
    String.prototype.splice = function (index, length, add) {
        var text = this.split("");
        text.splice(index, length, add);
        return text.join("");
if (typeof String.prototype.reverse !== "function") {
    String.prototype.reverse = function () {
        return this.split("").reverse().join("");

Let's examine them. All three make use of the string.split() and array.join() methods. These convert a string to an array and an array to a string, respectively.

By passing an empty string "" as the single argument, it creates an array where each index holds a single character of the string. Thus:

var text = "Hi!";

text = text.split("");
// text[0] == "H"
// text[1] == "i"
// text[2] == "!"

text = text.join("");
// text == "Hi!"

Useless? Not so! This allows us to treat a string as an array of characters, and thus pretend that strings are mutable. As a simple example:

var text = "Testing";
text = text.split("");

text[0] = "a";
text[1] = "b";
text[2] = "c";

text = text.join("");
// text == "abcting"

You can also use this to delete characters at specific indices by setting the index to null or "". In this way, you can manipulate strings.

This is very useful, but my methods go a step further by using the built-in Array methods. After adding the above three methods to your program, you can do stuff like this:

var text = "Testing";
text = text.reverse();
// text == "gnitseT"

Or you can use the powerful array.splice() method on strings:

var text = "Testing";
text = text.splice(3, 2).splice(0, 1, "A");
// text == "Aesng"

The first splice removes the characters at index 3 and 4 (remember, the second argument is the length, not the index!). The second splice removes the first index and inserts the string "A", producing the final result. Because all three methods return strings, you can chain them together, as shown above.

There are two differences between string.splice() and array.splice():

  1. string.splice() returns a string, which is the source string with the splice method applied. On the other hand, array.splice() returns an array of the removed values.
  2. string.splice() accepts up to 3 arguments. It ignores any arguments beyond the 3rd. array.splice() accepts an unlimited number of arguments.

    This is not a bug. These two lines are the same:
    string.splice(0, 0, "a", "b", "c");
    string.splice(0, 0, "a" + "b" + "c");
    Because extra arguments are unnecessary, I snipped them out for performance reasons.

Beyond those two differences, string.splice() performs identically to array.splice().

The third method is string.sort(). This performs identically to array.sort(), so please consult your favorite JavaScript manual for information on how to use it.

Note: I did not include the other Array methods because they are either useless (like array.concat()), can be simulated with array.splice() (array.pop(), array.push(), etc.), or already have a String equivalent (array.slice()).

Note: Beyond the two differences listed for string.splice(), all three methods perform identically to their Array counterparts.

[LINK] The unit tests.

[MDC] [w3] array.sort()
[MDC] [w3] array.splice()
[MDC] [w3] array.reverse()

No comments:

Post a Comment