The String Object

The String object is probably the most used of the built-in JavaScript objects. A new String object can be explicitly created using the new String constructor, passing the literal string as a parameter:

var sObject = new String("Sample string");

The String object has several methods, some associated with working with HTML, and several not. One of the non-HTML-specific methods, concat, takes two strings and returns a result with the second string concatenated onto the first. Example 4-2 demonstrates how to create a String object and use the concat method.

Example 4-2. Creating a String object and calling the concat method

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Exploring String</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
//<![CDATA[

var sObj = new String(  );
var sTxt = sObj.concat("This is a ", "new string");

document.writeln(sTxt);

//]]>
</script>
</body>
</html>

There is no known limit to the number of strings you can concatenate with the String concat method. However, I rarely use this myself; I prefer the String operators, such as the string concatenation operator (+).

The properties and methods available with the String object are listed in Table 4-1.

Table 4-1. String Object methods

MethodDescriptionArguments
valueOf Returns the string literal the String object is wrappingNone
length Property, not method, with the length of the string literalUse without parentheses
anchor Creates HTML anchorString with anchor title
big, blink, bold, italics, small, strike, sub, supFormats and returns String object’s literal value as HTMLNone
charAt, charCodeAtReturns either character (charAt) or character code (charCodeAt) at given positionInteger representing position, starting at position zero (0)
indexOf Returns starting position of first occurrence of substringSearch substring
lastIndexOf Returns starting position of last occurrence of substringSearch substring
link Returns HTML for linkURL for href attribute
concat Concatenates strings togetherStrings to concatenate onto the String’s literal string
split Splits string into tokens based on some separatorSeparator and maximum number of splits
slice Returns a slice from the stringBeginning and ending position of slice
substring, substrReturns a substringBeginning and ending location of string
match, replace, searchRegular expression match, replace, and searchString with regular expression
toLowerCase, toUpperCaseConverts caseNone

The HTML formatting methods—anchor, link, big, blink, bold, italics, sub, sup, small, strike—generate strings that enclose the String’s literal value within HTML element tags. Example 4-3 demonstrates this using one specific string and various String methods.

Example 4-3. Working with the String object’s formatting functions

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>String formatting methods</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
//<![CDATA[

var someString = new String("This is the test string");

document.writeln(someString.big(  ));
document.writeln(someString.blink(  ));
document.writeln(someString.sup(  ));
document.writeln(someString.strike(  ));
document.writeln(someString.bold(  ));
document.writeln(someString.italics(  ));
document.writeln(someString.small(  ));

document.writeln(someString.link('http://www.oreilly.com'));
//]]>
</script>
</body>
</html>

One of the elements, blink, is deprecated HTML, and not supported at all in XHTML. However, if used with document.writeln, the results will validate because what the XHTML validators see is the proper use of JavaScript, not the generated results. If you copy the generated results into a new document and run these with any XHTML validator, you’ll receive an error for the use of blink.

Warning

Even if you don’t receive an error directly, the use of the HTML format methods (other than anchor and link) should be avoided as much as possible, primarily because they don’t use the more modern CSS styling. And whatever you do, avoid blink: it’s an obnoxious holdover from the days when web designers believed the more animations in the page, the better. Nowadays, nothing will drive away a web-site reader faster than using blink.

The best way to try out the other String methods for yourself is to create a simple web page, such as that in Example 4-3, and then replace the working code with the code snippets associated with each method in the rest of this section.

The charAt and charCodeAt methods return the character and the Unicode character code, respectively, at a given location. The methods take one parameter—an index of the character to be returned:

var sObj = new String("This is a test string");
var sTxt = sObj.charAt(3);
document.writeln(sTxt);

The index values begin at zero; to return the character at the fourth position, pass in the value 3.

The substr and substring methods, as well as slice, return a substring given a starting location and length of string:

var sTxt = "This is a test string";
var ssTxt = sTxt.substr(0,4);

document.writeln(ssTxt);

As this example demonstrates, the String methods can be used with a string literal, as well as a String object. The JavaScript engine converts the variable to an object, calls the method, and then reconverts the object back to a primitive variable.

The indexOf and lastIndexOf methods return the index of a search string, with the former returning the first occurrence, and the latter returning the last:

var sTxt = "This is a test string";
var iVal = sTxt.indexOf("t");

document.writeln(iVal);

Example 4-2 demonstrated concatenating strings together. If you want the reverse—to split a string apart—use the split method. This method has two parameters. The first is the character that marks each break; you can also pass in the number of splits to perform in the second parameter. Example 4-4 takes a string and splits it on the comma (,)—performing a break only on the first three commas. The resulting values are then split on the equals sign (=).

Example 4-4. Using the String split function to break a string into tokens

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>The Split Method</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
//<![CDATA[

var inputString = 'firstName=Shelley,lastName=Powers,state=Missouri,statement="This is a test, of split"';
var arrayTokens = inputString.split(',',3);
for (var i in arrayTokens) {
   document.writeln(arrayTokens[i] + "<br />");
   var newTokens = arrayTokens[i].split('=');
   document.writeln(newTokens[1] + "<br />");
}
//]]>
</script>
</body>
</html>

The result of running this JS application is the following output to the web page:

firstName=Shelley
Shelley
lastName=Powers
Powers
state=Missouri
Missouri

In addition to demonstrating the split method, Example 4-4 also demonstrates an interesting aspect of JavaScript and how it automatically manages conversion between variable to literal to object and back. The input string is created as a variable and assigned a literal value. Yet the split method is called on the variable, just as if it were created as a String object:

var arrayTokens = inputString.split(',',3);

The JavaScript engine processes this code by first converting the literal variable to a String object, and then executing the function call. So technically, you never have to explicitly create a String object if you think you might be wanting to use String methods later in your project. You don’t even have to create a variable; you can call String methods directly off of a string literal:

var tokens = 'firstname=Shelley'.split('=');
document.writeln(tokens[1]);

The same applies to all primitive types, and will be demonstrated later in the chapter with RegExp. These are perfectly legitimate uses of JavaScript but I don’t recommend you use them often, because they can make a JS program difficult to read.

Tip

The arrays used in Example 4-4 are covered later in this chapter.

Returning to the String object methods, toUpperCase and toLowerCase convert the string to all upper- or lowercase characters, respectively, and return the string:

var someString = new String("Mix of upper and lower");
var newString = someString.toUpperCase(  ); // uppercases all of the letters

This is a particularly useful function if case is going to be an issue, because you can convert the string to all upper- or lowercase before processing. There is also a static method on String: fromCharCode. A static method is called directly on the object, rather than an instance of an object. Here’s an example that uses this method:

var s = String.fromCharCode(345,99,99,76);
document.writeln(s);

The fromCharCode method takes Unicode values separated by commas and returns a string. However, as discussed in Chapter 2, you can also embed Unicode characters directly in a string.

The last String methods are dependent on a concept known as regular expressions. There is also a JS object associated with regular expressions, RegExp. Because these are associated, we’ll examine all of them in the next section.

Get Learning JavaScript now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial