Let's experiment with a few of the methods you can call on string objects (see Appendix C, Built-in Objects, for the complete list).

Start off by creating a string object:

    > var s = new String("Couch potato"); 

The toUpperCase() and toLowerCase() methods transform the capitalization of the string:

    > s.toUpperCase(); 
    "COUCH POTATO" 
    > s.toLowerCase(); 
    "couch potato" 

The charAt() method tells you the character found at the position you specify, which is the same as using square brackets (treating a string as an array of characters):

    > s.charAt(0); 
    "C" 
    > s[0]; 
    "C" 

If you pass a non-existent position to charAt(), you get an empty string:

    > s.charAt(101); 
    "" 

The indexOf() method allows you to search within a string. If there is a match, the method returns the position at which the first match is found. The position count starts at 0, so the second character in Couch is o at position 1:

    > s.indexOf('o'), 
    1 

You can optionally specify where (at what position) to start the search. The following finds the second o, because indexOf() is instructed to start the search at position 2:

    > s.indexOf('o', 2); 
    7 

The lastIndexOf()starts the search from the end of the string (but the position of the match is still counted from the beginning):

    > s.lastIndexOf('o'), 
    11 

You can search , not only for characters, but also for strings, and the search is case sensitive:

    > s.indexOf('Couch'), 
    0 

If there is no match, the function returns position -1:

    > s.indexOf('couch'), 
    -1 

For a case-insensitive search, you can transform the string to lowercase first and then search:

    > s.toLowerCase().indexOf('couch'.toLowerCase()); 
    0 

If you get 0, this means that the matching part of the string starts at position 0. This can cause confusion when you check with if, because if converts the position 0 to a Boolean false value. So, while this is syntactically correct, it is logically wrong:

    if (s.indexOf('Couch')) {...} 

The proper way to check whether a string contains another string is to compare the result of indexOf() to the number -1:

    if (s.indexOf('Couch') !== -1) {...} 

The slice()and substring() return a piece of the string when you specify the start and end positions:

    > s.slice(1, 5); 
    "ouch" 
    > s.substring(1, 5); 
    "ouch" 

Note that the second parameter you pass is the end position, not the length of the piece. The difference between these two methods is how they treat negative arguments. substring() treats them as zeros, while slice() adds them to the length of the string. So, if you pass parameters (1, -1) to both methods, it's the same as substring(1,0) and slice(1,s.length-1):

    > s.slice(1, -1); 
    "ouch potat" 
    > s.substring(1, -1); 
    "C" 

There's also the non-standard method substr(), but you should try to avoid it in favor of substring().

The split() method creates an array from the string using another string that you pass as a separator:

    > s.split(" "); 
    ["Couch", "potato"] 

The split() method is the opposite of the join() method, which creates a string from an array:

    > s.split(' ').join(' '), 
    "Couch potato" 

The concat() glues strings together, in the same way in which the + operator does for primitive strings:

    > s.concat("es"); 
    "Couch potatoes" 

Note that while some of the preceding methods discussed return new primitive strings, none of them modify the source string. After all the method calls listed previously, the initial string is still the same:

    > s.valueOf(); 
    "Couch potato" 

You have seen how to use indexOf() and lastIndexOf() to search within strings, but there are more powerful methods (search(), match(), and replace()) that take regular expressions as parameters. You'll see these later in the RegExp() constructor function.

At this point, you're done with all of the data wrapper objects, so let's move on to the utility objects Math, Date, and RegExp.

Once you've created a date object, there are lots of methods you can call on that object. Most of the methods can be divided into set*() and get*() methods, for example, getMonth(), setMonth(), getHours(), setHours(), and so on. Let's see some examples.

Creating a date object by writing the following code:

    > var d = new Date(2015, 1, 1); 
    > d.toString(); 
    Sun Feb 01 2015 00:00:00 GMT-0800 (PST) 

Setting the month to March (months start from 0):

    > d.setMonth(2); 
    1425196800000 
    > d.toString(); 
    Sun Mar 01 2015 00:00:00 GMT-0800 (PST) 

Getting the month by writing the following code:

    > d.getMonth(); 
    2 

In addition to all the methods of date objects, there are also two methods (plus one more added in ES5) that are properties of the Date() function/object. These do not need a date object; they work just like the Math object methods. In class-based languages, such methods would be called static because they don't require an instance.

The Date.parse() method takes a string and returns a timestamp:

    > Date.parse('Jan 11, 2018'), 
    1515657600000 

The Date.UTC() method takes all the parameters for year, month, day, and so on, and produces a timestamp in Universal Time (UT):

    > Date.UTC(2018, 0, 11); 
    1515628800000 

As the new Date() constructor can accept timestamps, you can pass the result of Date.UTC() to it. Using the following example, you can see how UTC() works with Universal Time, while new Date() works with local time:

    > new Date(Date.UTC(2018, 0, 11)); 
    Wed Jan 10 2018 16:00:00 GMT-0800 (PST) 
    > new Date(2018, 0, 11); 
    Thu Jan 11 2018 00:00:00 GMT-0800 (PST) 

The ES5 addition to the Date constructor is the now()method, which returns the current timestamp. It provides a more convenient way to get the timestamp instead of using the getTime() method on a Date object as you would in ES3:

    > Date.now(); 
    1362038353044 
    > Date.now() === new Date().getTime(); 
    true 

You can think of the internal representation of the date being an integer timestamp and all other methods being sugar on top of it. So, it makes sense that valueOf() is a timestamp:

    > new Date().valueOf(); 
    1362418306432 

Also, dates cast to integers with the + operator:

    > +new Date(); 
    1362418318311 

    > var d = new Date(2016, 5, 20); 
    > d.getDay(); 
    1 

    > d.toDateString(); 
    "Mon Jun 20 2016" 

    var stats = [0, 0, 0, 0, 0, 0, 0]; 

    for (var i = 2016; i < 3016; i++) { 
       stats[new Date(i, 5, 20).getDay()]++; 
    } 

    > stats; 
    [140, 146, 140, 145, 142, 142, 145] 

Regular expression objects have the following properties:

None of these properties, except for lastIndex, can be changed once the object has been created.

The first three items in the preceding list represent the regex modifiers. If you create a regex object using the constructor, you can pass any combination of the following characters as a second parameter:

These letters can be in any order. If a letter is passed, the corresponding modifier property is set to true. In the following example, all modifiers are set to true:

    > var re = new RegExp('j.*t', 'gmi'), 

Let's verify:

    > re.global; 
    true 

Once set, the modifier cannot be changed:

    > re.global = false; 
    > re.global; 
    true 

To set any modifiers using the regex literal, you add them after the closing slash:

    > var re = /j.*t/ig; 
    > re.global; 
    true 

Regex objects provide two methods you can use to find matches-test() and exec(). They both accept a string parameter. The test() method returns a Boolean (true when there's a match, false otherwise), while exec() returns an array of matched strings. Obviously, exec() is doing more work, so use test() only if you really need to do something with the matches. People often use regular expressions to validate data. In this case, test() should be enough.

In the following example, there is no match because of the capital J:

    > /j.*t/.test("Javascript"); 
    false 

A case-insensitive test gives a positive result:

    > /j.*t/i.test("Javascript"); 
    true 

The same test using exec() returns an array, and you can access the first element as shown here:

    > /j.*t/i.exec("Javascript")[0]; 
    "Javascript" 

Previously in this chapter, you learned about string objects and how you can use the indexOf() and lastIndexOf() methods to search within text. Using these methods, you can only specify literal string patterns to search. A more powerful solution would be to use regular expressions to find text. String objects offer you this ability.

String objects provide the following methods that accept regular expression objects as parameters:

Let's look at some examples of using the search()and match() methods. First, you create a string object:

    > var s = new String('HelloJavaScriptWorld'), 

Using match(), you get an array containing only the first match:

    > s.match(/a/); 
    ["a"] 

Using the g modifier, you perform a global search, so the result array contains two elements:

    > s.match(/a/g); 
    ["a", "a"] 

A case-insensitive match is as follows:

    > s.match(/j.*a/i); 
    ["Java"] 

The search() method gives you the position of the matching string:

    > s.search(/j.*a/i); 
    5 

The replace() method allows you to replace the matched text with some other string. The following example removes all capital letters (it replaces them with blank strings):

    > s.replace(/[A-Z]/g, ''), 
    "elloavacriptorld" 

If you omit the g modifier, you're only going to replace the first match:

    > s.replace(/[A-Z]/, ''), 
    "elloJavaScriptWorld" 

When a match is found, if you want to include the matched text in the replacement string, you can access it using $&. Here's how to add an underscore before the match while keeping the match:

    > s.replace(/[A-Z]/g, "_$&"); 
    "_Hello_Java_Script_World" 

When the regular expression contains groups (denoted by parentheses), the matches of each group are available as $1 for the first group, $2 the second, and so on:

    > s.replace(/([A-Z])/g, "_$1"); 
    "_Hello_Java_Script_World" 

Imagine you have a registration form on your web page that asks for an e-mail address, username, and password. The user enters their e-mail IDs, and then, your JavaScript kicks in and suggests the username, taking it from the e-mail address:

    > var email = "[email protected]"; 
    > var username = email.replace(/(.*)@.*/, "$1"); 
    > username; 
    "stoyan" 

When specifying the replacement, you can also pass a function that returns a string. This gives you the ability to implement any special logic you may need before specifying the replacements:

    > function replaceCallback(match) { 
       return "_" + match.toLowerCase(); 
      } 
 
    > s.replace(/[A-Z]/g, replaceCallback); 
    "_hello_java_script_world" 

The callback function receives a number of parameters (the previous example ignores all but the first one):

Let's test this. First, let's create a variable to store the entire arguments array passed to the callback function:

    > var glob; 

Next, define a regular expression that has three groups and matches e-mail addresses in the format [email protected]:

    > var re = /(.*)@(.*).(.*)/; 

Finally, let's define a callback function that stores the arguments in glob and then returns the replacement:

    var callback = function () { 
      glob = arguments; 
      return arguments[1] + ' at ' + 
        arguments[2] + ' dot ' +  arguments[3]; 
    }; 

Now, perform a test:

    > "[email protected]".replace(re, callback); 
    "stoyan at phpied dot com" 

Here's what the callback function received as arguments:

    > glob; 
    ["[email protected]", "stoyan", "phpied", "com", 0,  
    "[email protected]"] 

You already know about the split() method, which creates an array from an input string and a delimiter string. Let's take a string of comma-separated values and split it:

    > var csv = 'one, two,three ,four'; 
    > csv.split(','), 
    ["one", " two", "three ", "four"] 

Because the input string happens to have random inconsistent spaces before and after the commas, the array result has spaces too. With a regular expression, you can fix this using s*, which means zero or more spaces:

    > csv.split(/s*,s*/); 
    ["one", "two", "three", "four"] 

One last thing to note is that the four methods that you have just seen (split(), match(), search(), and replace()) can also take strings as opposed to regular expressions. In this case, the string argument is used to produce a new regex as if it were passed to new RegExp().

An example of passing a string to replace is shown as follows:

    > "test".replace('t', 'r'), 
    "rest" 

The preceding lines of code are the same as the following one:

    > "test".replace(new RegExp('t'), 'r'), 
    "rest" 

When you pass a string, you cannot set modifiers the way you do with a normal constructor or regex literal. There's a common source of errors when using a string instead of a regular expression object for string replacements, and it's due to the fact that the g modifier is false by default. The outcome is that only the first string is replaced, which is inconsistent with most other languages and a little confusing. Here is an example:

    > "pool".replace('o', '*'), 
    "p*ol" 

Most likely, you want to replace all occurrences:

    > "pool".replace(/o/g, '*'), 
    "p**l" 

Errors happen, and it's good to have the mechanisms in place so that your code can realize that there has been an error condition and can recover from it in a graceful manner. JavaScript provides the try, catch, and finally statements to help you deal with errors. If an error occurs, an error object is thrown. Error objects are created using one of these built-in constructors-EvalError, RangeError, ReferenceError, SyntaxError, TypeError, and URIError. All these constructors inherit from Error.

Let's just cause an error and see what happens. What's a simple way to cause an error? Just call a function that doesn't exist. Type this into the console:

    > iDontExist(); 

You'll get something like the following:

The display of errors can vary greatly between browsers and other host environments. In fact, most recent browsers tend to hide the errors from the users. However, you cannot assume that all of your users have disabled the display of errors, and it is your responsibility to ensure an error-free experience for them. The previous error propagated to the user, because the code didn't try to trap (catch) this error. The code didn't expect the error and was not prepared to handle it. Fortunately, it's trivial to trap the error. All you need is the try statement followed by a catch statement.

This code hides the error from the user:

    try { 
      iDontExist(); 
    } catch (e) { 
      // do nothing 
     } 

Here you have:

There can be an optional finally statement (not used in this example) followed by a block of code, which is executed regardless of whether there was an error or not.

In the previous example, the code block that follows the catch statement didn't do anything. However, this is the place where you put the code that can help recover from the error, or at least give feedback to the user that your application is aware that there was a special condition.

The variable e in the parentheses after the catch statement contains an error object. Like any other object, it contains properties and methods. Unfortunately, different browsers implement these methods and properties differently, but there are two properties that are consistently implemented-e.name and e.message.

Let's try this code now:

    try { 
      iDontExist(); 
    } catch (e) { 
      alert(e.name + ': ' + e.message); 
    } finally { 
      alert('Finally!'), 
    } 

This will present an alert() showing e.name and e.message and then another alert() saying Finally!.

In Firefox and Chrome, the first alert will say ReferenceError: iDontExist is not defined. In Internet Explorer, it will be TypeError: Object expected. This tells us two things:

You can also create error objects yourself using new Error() or any of the other error constructors and then let the JavaScript engine know that there's an erroneous condition using the throw statement.

For example, imagine a scenario where you call the maybeExists() function and after that make calculations. You want to trap all errors in a consistent way, no matter whether the error is that maybeExists() doesn't exist or that your calculations found a problem. Consider the following code:

    try { 
      var total = maybeExists(); 
      if (total === 0) { 
        throw new Error('Division by zero!'), 
      } else { 
        alert(50 / total); 
      } 
    } catch (e) { 
       alert(e.name + ': ' + e.message); 
     } finally { 
      alert('Finally!'), 
    } 

This code will alert different messages depending on whether or not maybeExists() is defined and the values it returns:

In all cases, there will be a second alert that says Finally!.

Instead of throwing a generic error, thrownewError('Divisionbyzero!'), you can be more specific if you choose to, for example, throw thrownewRangeError('Divisionbyzero!'). Alternatively, you don't need a constructor; you can simply throw a normal object:

    throw { 
      name: "MyError", 
      message: "OMG! Something terrible has happened" 
    } 

This gives you cross-browser control over the error name.