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(" ")
|
|
| 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.