Print this Section

  
  

String Objects in JS

All text strings that are created in a script either as a quoted literal value or a variable containing a string of text characters is an object that has associated properties and methods. Some of the more useful string properties and methods are described below.

The following examples assume existence of variable TextString, which is defined with the assignment,

var TextString = "A text string";

A string's property is accessed, or a string's method is applied, by appending the property or method name to the string. The property or method can be referenced for a variable containing a string or for a literal string value.

TextString.property     // Accessing a string property
TextString.method()      // Applying a string method
or
"A text string".property     // Accessing a string property
"A text string".method()     // Applying a string method

Keep in mind that all strings have zero-based indexing; that is, characters in a string are numbered beginning with 0. In the above examples, the location of word "text" in the string "A text string" begins at position (index) 2 although it is the 3rd character in the string.

String Properties

The most common string property is the length property.

Property Description Returns
length Returns the number of characters in a string:
  TextString.length
  "A text string".length

Figure 2-25. Property of string objects.

Although characters in a string are indexed beginning with 0, the length of a string counts characters beginning with 1. Thus, the length of a string is always one more than the index number of the last character.

String Methods

String methods provide handy ways to manipulate strings without have to write a lot of original code to perform the operations. In most cases, the methods change the string in some fashion. For example, the bold() method changes a string to bold characters.

TextString.bold()

Such changes, however, are not made in place. That is, the method does not directly change the string (the variable or literal value) to which it is applied; it returns a copy of the changed characters to the script, which then must do something with the returned value. The returned value is often reassigned to the variable containing the original string, replacing the original value by the changed value.

TextString = TextString.bold();
TextString = "A text string".bold();

Changing String Appearance

Common methods that change the appearance of strings are shown in the following table.

Method Description Returns
bold() Changes the text in a string to bold.
  TextString.bold()
  "A text string".bold()
italics() Changes the text in a string to italic.
  TextString.italics()
  "A text string".italics()
strike() Changes the text in a string to strike-through characters.
  TextString.strike()
  "A text string".strike()
sub() Changes the text in a string to subscript.
  "Subscript" + TextString.sub()
  "Subscript" + "A text string".sub()
sup() Changes the text in a string to superscript.
  "Superscript" + TextString.sup()
  "Superscript" + "A text string".sup()
toLowerCase() Changes the text in a string to lower-case.
  TextString.toLowerCase()
  "A text string".toLowerCase()
toUpperCase() Changes the text in a string to upper-case.
  TextString.toUpperCase()
  "A text string".toUpperCase()
fixed() Changes the text in a string to fixed
(monospace) font.
  TextString.fixed()
  "A text string".fixed()
fontcolor ("color") Changes the color of a string using color
names or hexadecimal values.
  TextString.fontcolor("blue")
  TextString.fontcolor("#0000FF")
  "A text string".fontcolor("blue")
  "A text string".fontcolor("#0000FF")
fontsize("n") Changes the size of a string using font sizes
1 (smallest) - 7 (largest).
  TextString.fontsize("4")
  "A text string".fontsize("4")
link("href") Formats a string as a link.
  TextString.link("page.htm")
  "A text string".link("page.htm")

Figure 2-26. Methods of string objects.

There are great similarities between many of the string methods and common style sheet settings. For instance, the .bold() method is equivalent to the fontWeight="bold" style property. However, you cannot apply style sheet properties to script variables or strings. You cannot, that is, use a statement such as TextString.style.fontWeight="bold". Style sheet properties are only applicable to XHTML elements, not to script variables or literals. Therefore, you must use the string methods to style scripted strings.

Getting and Setting String Contents

Besides setting various style characteristics of strings, you can work with the contents of strings. The following methods are used to locate or extract portions of strings or to convert numbers to strings for decimal formatting.

Method Description Returns
charAt(index) Returns the character at position index in the string.
  TextString.charAt(0)
  "A text string".charAt(0)
charCodeAt(index) Returns the Unicode or ASCII decimal value of the character at position index in the string.
  TextString.charCodeAt(0)
  "A text string".charCodeAt(0)
concat(string1,string2) Concatenates string arguments string1,string2 to the string on which the method is called.
  var string1 = "Another text string";
  var string2 = "A third text string";
  TextString.concat(string1,string2)
  "A text string".concat(string1,string2)
indexOf("chars") Returns the starting position of substring "chars" in the string. If "chars" does not appear in the string, then -1 is returned.
  TextString.indexOf("text")
  "A text string".indexOf("text")

lastIndexOf("chars") Returns the starting position of substring "char" in the string, counting from end of string. If "chars" does not appear in the string, then -1 is returned.
  TextString.lastIndexOf("text")
  "A text string".lastIndexOf("text")


slice(index1[,index2]) Returns a substring starting at position index1 and ending at (but not including) position index2. If index2 is not supplied, the remainder of the string is returned.
  TextString.substring(2,6)
  "A text string".substring(2,6)

split(delimiter) Splits a string into separate substrings which are copied as individual elements into a new array object. The delimiter identifies the separator character for splitting the string but it is not included in the substrings. The array object does not need to be prior declared.
  var StringArray = TextString.split(" ")
  var StringArray = "A text string".split(" ")
A
text
string
substr(index[,length]) Returns a substring starting at position index and including length characters. If no length is given, the remaining characters in the string are returned.
  TextString.substring(7,6)
  "A text string".substring(7,6)
substring(index1,index2) Returns a substring starting at position index1 and ending at (but not including) position index2.
  TextString.substring(7,13)
  "A text string".substring(7,13)
toString() Converts a value to a string.
  var NumberValue = 10
  var StringValue = NumberValue.toString()
toFixed(n) Returns a string containing a number formatted to n decimal digits.
  var NumberValue = 10.12345
  var StringValue = NumberValue.toFixed(2)
toPrecision(n) Returns a string containing a number formatted to n total digits.
  var NumberValue = 10.12345
  var StringValue = NumberValue.toPrecision(5)

Figure 2-27. Methods to work with string contents.

Many of these methods work in conjunction with JavaScript techniques that are introduced later. Discussions of the pertinent methods are taken up at that time. You can refer back to this page to review their general formats.


TOP | NEXT: The Date Object