For the string "Batman", Firefox would create a wrapper like the following object literal. Recall from Chapter 1 that an object may have elements just like an array. So, this object contains six elements numbered 0 to 5.

{"0": "B", "1": "a", "2": "t", "3": "m", "4": "a", "5": "n"}

With this in mind, we can query characters in "Batman" numerically with the [] operator. Try doing so in Firebug, verifying your work with Figure 2-5:

"Batman"[3];
// "m"
"Batman"[0];
// "B"

Figure 2-5. Querying elements in a wrapper object

String wrappers have a length member equal to the number of elements. That is to say, length is equal to the number of characters in the string. Try querying length for the Incredibles and a few of their supervillains.

"Mr. Incredible, Elastigirl, Violet, Dash, Jack-Jack".length;
// 51
"Underminer, Syndrome, Bomb Voyage".length;
// 33

Just as you can query the final element in an array by subtracting 1 from its length member, you can query the final character, which is to say the final element, in a string the very same way. Similarly, subtracting 2 from length returns the second-from-last character, subtracting 3 returns the third-from-last character, and so on:

var parrFamily = "Mr. Incredible, Elastigirl, Violet, Dash, Jack-Jack";
parrFamily[parrFamily.length - 1];
// "k"
parrFamily[parrFamily.length - 15];
// "D"

Querying elements in a wrapper object with the [] operator is a Firefox proprietary feature that is helpful in understanding the way strings are represented with wrapper objects. However, ECMAScript does not require JavaScript interpreters to support it. So, Internet Explorer and other browsers don't. Therefore, it's best to query characters the standard way—by passing the element's index, in other words, its number, to charAt(). Though not as convenient, doing so works cross-browser. Try the following sample in Firebug, verifying your work with Figure 2-6:

var parrFamily = "Mr. Incredible, Elastigirl, Violet, Dash, Jack-Jack";
parrFamily.charAt(7);
// "r"
parrFamily.charAt(parrFamily.length - 1);
// "k"

Figure 2-6. Querying elements the standard way is less convenient but works cross-browser.

For nonkeyboard characters, it's typically simpler to work with the Unicode encoding than the character. For example, Dr. Otto Günther Octavius is the secret identity of one of Spider-Man's archenemies, Doctor Octopus. Rather than try to type the ü in Günther, pass its Unicode encoding (252) to String.fromCharCode() like so in Firebug, verifying your work with Figure 2-7:

var id = "Dr. Otto G" + String.fromCharCode(252) + "nther Octavius";
id;
// "Dr. Otto Günther Octavius"

Figure 2-7. String.fromCharCode() provides a way to insert nonkeyboard characters.

Conversely, it's simpler to encode the ü and work with 252, say in a comparison, than to try to type the ü. To do so, pass the index to charCodeAt(), which returns the Unicode encoding rather than the character, as its partner in crime, charAt(), would. Although the following two comparisons are equivalent, I'm guessing you were only able to key in the first in Firebug. Figure 2-8 displays both, however.

var id = "Dr. Otto G" + String.fromCharCode(252) + "nther Octavius";
id.charCodeAt(10) === 252;
// true
id.charAt(10) === "ü";
// true

Figure 2-8. charCodeAt() is useful for encoding nonkeyboard characters.

In addition to decoding and encoding characters with String.fromCharCode() and charCodeAt(), you can convert their case to lowercase or uppercase with toLowerCase() or toUpperCase(). For example, fight scenes in Batman comic books would have onomatopoeic words such as pow, bam, and zonk superimposed in uppercase. So in Firebug, let's add some pop to some lowercase onomatopoeic words with the help of toUpperCase():

"Pow! Bam! Zonk!".toUpperCase();
// "POW! BAM! ZONK!"

Conversely, if the Penguin were to quietly spray a paralytic gas on Batman and Robin with his umbrella, we might want to tone down "PSST...ZZZZ" with toLowerCase(), verifying both samples with Figure 2-9. Note that toLowerCase() or toUpperCase() only manipulate letters. So, nothing weird like the "!" changing to a "1" will happen.

"PSST...ZZZZ".toLowerCase();
// "psst...zzzz"

Figure 2-9. Converting to uppercase or lowercase

Turkish has dotted and dotless versions of i:

The lowercase version of I is ı, not i. Conversely, the uppercase version of i is İ, not I. So for Turkish, toLowerCase() and toLowerCase() would mess up the i pairings. For Turkish and other alphabets with dotted and dotless i versions such as Azerbaijani, Kazakh, Tatar, and Crimean Tatar, JavaScript provides a second pair of methods, toLocaleLowerCase() and toLocaleUpperCase(), which get the i conversions right:

"I".toLowerCase();
// "i"
"i".toUpperCase()
// "I"
"I".toLocaleLowerCase();
// "ı"
"i".toLocaleUpperCase()
// "İ"

Sometimes you will want to search a string for a smaller string, referred to as a substring. For example, "man" is a substring of "Batman" and "Catwoman". One way to do so is with indexOf(), which works with two parameters:

If the substring is found, indexOf() returns the index of the first matched character. Otherwise, it returns −1 to convey failure. So in Firebug, let's determine where the substring "Ghost" begins in a literal containing some of Iron Man's archenemies:

"Iron Monger, Titanium Man, Madame Masque, Ghost, Mandarin".indexOf("Ghost");
// 42

Try doing so indirectly through a variable containing the literal. Pass in "Mandarin" and then "Green Goblin", who is Spider-Man's responsibility. So, as Figure 2-10 displays, JavaScript confirms this by returning −1:

var villains = "Iron Monger, Titanium Man, Madame Masque, Ghost, Mandarin";
villains.indexOf("Mandarin");
// 49
villains.indexOf("Green Goblin");
-1

Figure 2-10. indexOf() returns −1 to convey failure.

Note that you may call indexOf() on any expression evaluating to string. Those include literals and variables as well as return values for operators or functions, which we'll cover in Chapters 3 and 6, respectively.

indexOf() optionally takes a second parameter telling JavaScript where to begin looking for a substring. Insofar as indexOf() returns the location of the first match, the second parameter provides a way to locate a recurring substring, such as "Man" in our list of Iron Man supervillains. So, we could locate the first and second occurrences of "Man" like so in Firebug. Note that JavaScript evaluates villains.indexOf("Man") + 1, which returns 23, prior to passing the parameter to indexOf(). Verify your work with Figure 2-11:

var villains = "Iron Monger, Titanium Man, Madame Masque, Ghost, Mandarin";
villains.indexOf("Man");
// 22
villains.indexOf("Man", villains.indexOf("Man") + 1);
// 49

Figure 2-11. Locating the second occurence of "Man"

indexOf() has a partner in crime named lastIndexOf() that searches upstream, from the end of a string to the beginning. Insofar as the second occurrence of "Man" is also the last, we could therefore rewrite the previous sample like so:

var villains = "Iron Monger, Titanium Man, Madame Masque, Ghost, Mandarin";
villains.lastIndexOf("Man");
// 49

Sometimes you may want to cut a slice from a string. To do so, pass two parameters to slice():

So, to slice n characters beginning at index i, pass i for the first parameter and i + n for the second parameter. Just remember that character indexes begin at 0.

"Superman, Batman, Spider-Man, Iron Man".slice(18, 24);
// "Spider"

Note that, if you omit the second parameter, JavaScript cuts a slice from the index in the first parameter all the way the end of the string. That is, it sets the second index to length. So, the following two samples do the same thing:

var heroes = "Superman, Batman, Spider-Man, Iron Man";
heroes.slice(30);
// "Iron Man"
heroes.slice(30, heroes.length);
// "Iron Man"

Note too that, if either parameter is negative, JavaScript adds length to them. Verify your work with Figure 2-12:

heroes.slice(10, −22);
// "Batman"

Figure 2-12. Clipping a substring with slice()

If you want to replace part of a string, invoke its replace() method, which works with two parameters:

However, the first parameter may be a string or RegExp object (we'll explore RegExp objects in Chapter 5), and the second parameter can be a string or a function that returns a string.

To begin with, we'll make both parameters strings. So, double-clear Firebug as detailed in the preface, and let's use replace() to turn Batman into Superman like so:

"Batman".replace("Bat", "Super");
// "Superman"

One thing to note when passing a string rather than a RegExp object for the first parameter is that replace() swaps only the first occurrence. To illustrate the point, run the following sample in Firebug:

"Batman and Batgirl".replace("Bat", "Super");
// "Superman and Batgirl"

To replace two or more occurrences of a search string like "Bat" with a replacement string like "Super", the first parameter must be a RegExp object marked with a g flag, which tells JavaScript to find all matches rather than just the first match. So, just as a primer for Chapter 5, if we make the first parameter in the previous sample a very simple RegExp literal, /Bat/g, we get the desired duo. Verify this and the previous two samples with Figure 2-13:

"Batman and Batgirl".replace(/Bat/g, "Super");
// "Superman and Supergirl"

Figure 2-13. Replacing a substring with replace()

Now let's create a title-casing function named titleCase() to pass as the second parameter so that we can replace each hero's name with its title-case version. JavaScript will pass titleCase() the matched text, which we can refer to as m within the function block. There we'll chain invocations of slice() and toUpperCase() in order to convert the first letter in m to uppercase. Then we'll glue that to a slice containing every character in m but the first and return that as the replacement string.

var titleCase = function(m) {
  return m.slice(0,1).toUpperCase() + m.slice(1);
};

If we then pass a RegExp literal that matches words, /w+/g, for the first parameter, JavaScript will pass each word in the string we call replace() to titleCase(). Let's try this on "batman, spider-man, iron man", verifying our work with Figure 2-14. Note that JavaScript invokes titleCase() five times, once for each of the following matches: "batman", "spider", "man", "iron", and "man".

var titleCase = function(m) {
  return m.slice(0,1).toUpperCase() + m.slice(1);
};
"batman, spider-man, iron man".replace(/w+/g, titleCase);
// "Batman, Spider-Man, Iron Man"

Figure 2-14. The second parameter to replace() may be a function.

If you want to divide a string into smaller strings, pass the split() method a divider. It will then split the string into smaller strings, referred to as substrings, based on where the divider occurs. Those substrings do not include the divider and are returned in an array by split(). Double-clear Firebug, and let's divvy up a list of Spider-Man's archenemies relative to a comma followed by a space. We'll pass ", " to split() like so, verifying our work with Figure 2-15:

var villains = "Green Goblin, Doctor Octopus, Venom, Hobgoblin, Sandman";
villains.split(", ");
// ["Green Goblin", "Doctor Octopus", "Venom", "Hobgoblin", "Sandman"]

Figure 2-15. Splitting a string into smaller strings with split()

Say the final villain is prefaced by ", and " rather than ", ". That is to say, we want to divvy up a string based on two dividers, ", " or ", and ". This can't be done by passing a string divider. Rather, we'd need to pass in a RegExp literal to match both dividers:

/, (?:and)?/g

Don't worry, this won't look like gobbledygook by the end of Chapter 5 (note how you can identify the dividers in the expression, and we're using /g again). Try the following sample in Firebug, verifying your work with Figure 2-16:

var villains = "Green Goblin, Doctor Octopus, Venom, Hobgoblin, and Sandman";
villains.split(/, (?:and )?/g);
// ["Green Goblin", "Doctor Octopus", "Venom", "Hobgoblin", "Sandman"]

Figure 2-16. Passing a RegExp object to split()

Do you remember from Chapter 1 how you would query the array returned by split()?

Uh-huh. By passing an index to the [] operator. So, to return the fourth element, "Hobgoblin", we'd pass [] the index 3 since JavaScript numbers elements beginning with 0:

var villains = "Green Goblin, Doctor Octopus, Venom, Hobgoblin, and Sandman";
villains.split(/, (?:and )?/g)[3];
// "Hobgoblin"

That worked well. But what happened to the array? It's not in villains, as Figure 2-17 displays:

var villains = "Green Goblin, Doctor Octopus, Venom, Hobgoblin, and Sandman";
villains.split(/, (?:and )?/g)[3];
// "Hobgoblin"
villains;
// "Green Goblin, Doctor Octopus, Venom, Hobgoblin, and Sandman"

Figure 2-17. Where'd the array of substrings go?

As noted earlier in the chapter, split(), like any other string method, does not modify the string value it's called upon. Rather, split() returns a new value. We'd need to save the array to a new variable or overwrite villains. Let's do the latter, verifying our work with Figure 2-18:

var villains = "Green Goblin, Doctor Octopus, Venom, Hobgoblin, and Sandman";
villains = villains.split(/, (?:and )?/g);
villains[1];
// "Doctor Octopus"

Figure 2-18. Overwriting the string in villains with the array returned by split()

Whereas indexOf() returns the index of the first match of a string, search() returns the index of the first match of a RegExp object. So, the following samples are equivalent:

var villains = "Green Goblin, Doctor Octopus, Venom, Hobgoblin, and Sandman";
villains.indexOf("Goblin");
// 6
villains.search(/Goblin/);
// 6

In the event that you want all matches rather than just the first one, pass match() the RegExp instead. JavaScript will then return an array of matching substrings. Let's find any occurrence of goblin regardless of case in Firebug, verifying our work with Figure 2-19:

var villains = "Green Goblin, Doctor Octopus, Venom, Hobgoblin, and Sandman";
villains.match(/[Gg]oblin/g);
// ["Goblin", "goblin"]

We'll revisit search() and match() in Chapter 5, where you will learn to write more interesting RegExp patterns.

Figure 2-19. Passing a RegExp object to match()

Now let's try converting some values to a number by passing them to Number(). Double-clear Firebug, and then try converting nothing, undefined or null, to a number:

Number(undefined);
// NaN
Number(null);
// 0

Whereas both undefined and null convert to the same boolean (false), they convert to different numbers: undefined to NaN, and null to 0. Note that NaN ("not a number") is a special number literal JavaScript returns for math errors, such as division by 0, or for conversions to the number type that fail. Note too that, if either operand to a math operator like * or - is NaN, the return value will be NaN, too. Therefore, as Figure 2-22 displays, you can do math with null but not with undefined.

var nothing, zilch = null;
nothing * 4;
// NaN
zilch * 4;
// 0

Figure 2-22. JavaScript can do math with null but not with undefined.

Converting strings to numbers is fairly straightforward. Number-like strings such as "4" or "3.33" convert to an equivalent number (4 and 3.33). The "" empty string converts to 0. Everything else converts to NaN. Let's try converting a few strings to a number in Firebug, verifying our work with Figure 2-23:

Number("4");
// 4
Number("");
// 0
Number("Mr. Incredible");
// NaN

Figure 2-23. Most strings convert to NaN.

One common bugaboo is trying to do math with a CSS value; JavaScript represents all of those as strings. So, if you try to move an element 3 pixels to the left by subtracting 3 from a left value of, say, 30px, you're really doing the following calculation. Note that manipulating CSS is covered in Chapter 8.

"30px" - 3;
// NaN

Converting booleans to numbers is very simple. true converts to 1, and false converts to 0. Try doing so in Firebug:

Number(true);
// 1
Number(false);
// 0

Rarely will an object, array, or function convert to a number other than NaN. Trying to do math with an object, array, or function value will generally return NaN to convey failure. Try converting one of each in Firebug, verifying your work with Figure 2-24:

Number(["Green Goblin", "Doctor Octopus", "Sandman"]);
// NaN
Number({hero: "Batman", archenemy: "Joker"});
// NaN
Number(String.fromCharCode);
// NaN

Figure 2-24. Most object, array, and function values convert to NaN.

Table 2-1 displays at a glance the number conversions we explored.

In Chapter 1, you learned that the [] operator converts a number to a string. So, the following queries both return the member named "3":

"Mezmerella"[2];
// "z"
"Mezmerella"["2"];
// "z"

Though JavaScript frequently converts numbers to strings behind the scenes, occasionally it will have to convert values of other types to strings. Doing so for undefined, null, or booleans is unsurprising:

String(undefined);
// "undefined"
String(null);
// "null"
String(true);
// "true"
String(false);
// "false"

On the other hand, converting values of the object type or array and function subtypes to strings in not straightforward or common. To do so, JavaScript calls the value's toString() method. The following array to string conversions are equivalent:

String(["Green Goblin", "Doctor Octopus", "Sandman"]);
// "Green Goblin,Doctor Octopus,Sandman"
["Green Goblin", "Doctor Octopus", "Sandman"].toString();
// "Green Goblin,Doctor Octopus,Sandman"

So too are the following object to string conversions, as Figure 2-25 displays. Note that the lowercase object indicates the value type, and the uppercase Object indicates the class, which is to say the identifier for the Object() constructor. Figure 2-25 displays the results:

({"Bob Parr": "Mr. Incredible", "Helen Parr": "Elastigirl"}).toString();
// "[object Object]"
String({"Bob Parr": "Mr. Incredible", "Helen Parr": "Elastigirl"});
// "[object Object]"

Don't devote too many brain cells to converting objects, arrays, or functions to strings. It's not important to know.

Figure 2-25. Converting an array and object to a string

Methods for Converting a Number to a String

Mr. Incredible's 10-year-old son, Dashiell "Dash" Robert Parr, is a speedster like the Flash. He can probably run at the speed of light: 299,792,458 meters per second. JavaScript numbers may not contain commas, so the number literal for that would be 299792458. That's pretty ugly.

Not to worry. Number wrappers provide the following three methods to convert a bloated number like 299792458 to a succinct string.

Number.toExponential()
Number.toFixed()
Number.toPrecision()

Double-clear Firebug, and let's call each of those in turn on 299792458. First, toExponential() converts a number to an exponential string. Optionally, you can indicate the number of decimal places by passing a number between 0 and 20. Try passing 2 and omitting the parameter, verifying your work with Figure 2-26:

(299792458).toExponential(2);
// "3.00e+8"
(299792458).toExponential();
// "2.99792458e+8"

Figure 2-26. Converting a number to a string with toExponential()

The next method, toFixed(), converts a number to a decimal string. Optionally, you can indicate the number of decimal places by passing a number between 0 and 20. Let's divide 299792458 by 1000 to determine kilometers per second. Then convert that to a string with three or no decimal places, verifying your work with Figure 2-27. Note that omitting the parameter is the same as passing 0.

(299792458 / 1000).toFixed(3);
// "299792.458"
(299792458 / 1000).toFixed();
//"299792"

Figure 2-27. Converting a number to a string with toFixed()

If you are indecisive and want JavaScript to choose between exponential and decimal format, call toPrecision() on the number. The optional parameter differs this time: it's a number between 1 and 21 indicating the number of significant digits. If the parameter is less than the number of digits in the integer part of the number, JavaScript chooses exponential format. If not, JavaScript chooses decimal format. Finally, if you omit the parameter, JavaScript invokes Number.toString(). Try the following samples to clarify how toPrecision() works, verifying your work with Figure 2-28. Note that the final two samples are equivalent.

(299792458).toPrecision(2);
// "3.0e+8"
(299792458).toPrecision(12);
// "299792458.000"
(299792458).toPrecision();
// "299792458"
(299792458).toString();
// "299792458"

Figure 2-28. Converting a number to a string with toPrecision()

Note that toExponential(), toFixed(), and toPrecision() round trailing digits 0-4 down and 5-9 up just like you would.

Even though I will cover RegExp objects more fully in Chapter 5, if you are new to both JavaScript and programming, I suggest simply passing string parameters to the four methods that work with RegExp objects. replace() and split() work with either a string or a RegExp parameter. So, a string will do as is. match() and search() work only with a RegExp parameter, but JavaScript implicitly converts a string parameter to a RegExp object. So, just as a string is converted to a wrapper object by passing it to new and String(), it can be converted to a RegExp object by passing it to new and RegExp(). Insofar as JavaScript does the latter just as quietly as the former, this means that a beginner can put off learning RegExp syntax until after learning JavaScript syntax. I recommend you do.

To illustrate this beginner-friendly JavaScript string to RegExp conversion feature, double-clear Firebug, and then enter and run the following sample. As Figure 2-29 displays, passing a string to match() and search() works just dandy:

var incredibles = "Mr. Incredible, Elastigirl, Violet, Dash, Jack-Jack";
incredibles.match("Jack");
// ["Jack"]
incredibles.search("Jack");
// 42

Figure 2-29. JavaScript quietly converts "Jack" to /Jack/ for both match() and search().

JavaScript quietly passed "Jack" to RegExp(), which like String() is referred to as a constructor function. So to explicitly do what JavaScript implicitly did, let's enter and run the following in Firebug. As Figure 2-30 displays, the return values are the same:

var incredibles = "Mr. Incredible, Elastigirl, Violet, Dash, Jack-Jack";
incredibles.match(new RegExp("Jack"));
// ["Jack"]
incredibles.search(new RegExp("Jack"));
// 42

Figure 2-30. Passing a RegExp for a literal string to match() and search()

Note, however, that, when JavaScript converts a string to a RegExp object, the g, i, and m flags, which we'll explore in Chapter 5, are not set. There's no way for JavaScript to save the day if we intended to pass /jack/ig but instead passed "jack" to match(), as Figure 2-31 displays:

var incredibles = "Mr. Incredible, Elastigirl, Violet, Dash, Jack-Jack";
incredibles.match(/jack/ig);
// ["Jack", "Jack"]
incredibles.match("jack");
// null

Note that match() conveys failure, which is to say no array of matching strings, by returning null. Remember from Chapter 1 that null conveys no value on the heap, in other words, no object, array, or function. That is why match() returned null instead of undefined.

Figure 2-31. JavaScript does not set the i, g, or m flag when converting a string to a RegExp object.