Working with Strings


We've been introduced to the various data types in JavaScript now, and one of them bears more investigation here: strings. There's more to this data type than meets the eye in JavaScript, and it's a good idea to understand this data type now, because we'll be seeing it throughout the book.

When you assign a string value to a variable, that string is just treated as a literal value, and stored as a string literal , which means that just the actual characters making up the text are stored in the variable:

 var myText = "How do you like my text? Pretty good, huh?" 

Tip

JavaScript itself has no limit on how long string literals can be. Note, however, that some older browsers have a maximum string length of 255 characters.


It's a very common thing to want to work with the actual characters in a string, such as converting them all to lower case, or searching for a certain substring, or replacing some characters with others. To enable you to do these kinds of things easily, JavaScript supports the string object, which has built-in methods for all these actions.

Tip

As mentioned in Chapter 1, "Essential JavaScript," you can enclose strings in either single or double quotation marks. If a string itself encloses a quote, it's best to alternate the types of quotation marks like this: "'Hello,' he said." or '"Hello," he said.' so that the browser isn't confused . Keep in mind that an apostrophe is treated as a single quotation mark, which can make things difficult. To avoid problems here, you can use the term \' rather than just ' to tell the browser that it should just insert a ' character in a string, but not treat it as the beginning or end of a string, like this: 'Welcome to Frank\'s web page!<BR>' . You also can use \" in the same way, like this: "\"Hello,\" he said." .


The string object is supported in all scriptable browsers (in other words, since Netscape Navigator 2 and Internet Explorer 3). As we'll see in Chapter 18, "The Date , Time , and String Objects," where we deal with the string object in detail, to create a string object (not just a string literal), you use the new operator and specify the string's text, as here where I'm creating a string object named myString :

 var myText = "How do you like my text? Pretty good, huh?"  var myString = new String("How do you like my text? Pretty good, huh?")  

Now we can use all the built-in methods of the string object, such as toUpperCase which converts the text in a string object to upper caseon myString , like this:

 var myText = "How do you like my text? Pretty good, huh?"  var myString = new String("How do you like my text? Pretty good, huh?")  document.write(myString.toUpperCase())  

So how does that help us with the simple string variable myText ? Even though the text in myText is stored as simple characters, it turns out that JavaScript enables you to use all the string object's methods with myText ;it converts myText to a string object temporarily for you in order to be able to do this. The upshot is that we can use all the string object's properties and methods on the simple variable myText , which is great to know when dealing with text:

 var myText = "How do you like my text? Pretty good, huh?"  var myString = new String("How do you like my text? Pretty good, huh?")  document.write(myString.toUpperCase())  document.write(myText.toUpperCase())  

Here's an example showing a few more string object properties and methods. In this case, I'm using the length property to find how many characters are in myText . It uses the toUpperCase method to see the text in upper case and the toLowerCase method to see the text in lower case. The example uses the italics method to see the text in italics, the indexOf method to find a single word in the text, and the replace method to replace one word with another, like this:

(Listing 02-03.html on the web site)
 <HTML>      <HEAD>          <TITLE>              Working With Strings          </TITLE>      </HEAD>      <BODY>          <H1>Working With Strings</H1>          <SCRIPT LANGUAGE="JavaScript">          <!--  var text = "Here " + "is " + "the " + "text!"   document.write("The text: " + text + "<BR>")   document.write("The length of the text: " + text.length + "<BR>")   document.write("In upper case: " + text.toUpperCase() + "<BR>")   document.write("In lower case: " + text.toLowerCase() + "<BR>")   document.write("In italics: " + text.italics() + "<BR>")   document.write("Location of 'the': " + text.indexOf("the") + "<BR>")   document.write("Replacing is with isn't: " + text.replace("is", "isn't") + graphics/ccc.gif "<BR>")   if(navigator.appName == "Netscape") {   document.write("The third letter is: " + text[2] + "<BR>")   }  // -->          </SCRIPT>       </BODY>  </HTML> 

Figure 2.2 shows the results of this code. We'll see all these properties and methods of the string object in depth in Chapter 18, but it's good to know at this stage that they exist.

Figure 2.2. Using a string in Netscape Navigator.

graphics/02fig02.gif

Note two more things here. First, as we've already mentioned in the preceding chapter, you can use the + string operator to join strings together, called concatenating them. In other words, these two statements do the same thing:

 var text = "Here " + "is " + "the " + "text!"  var text = "Here is the text!" 

Second, the Netscape Navigatorbut not the Internet Explorerlets you access the individual characters in a string in a simple way. For example, text[0] gives you the first character in text , text[1] gives you the second character, and so on:

 if(navigator.appName == "Netscape") {      document.write("The third letter is: " + text[2] + "<BR>")  } 

This way of accessing characters, using a number inside square braces, [ and ], treats them as if they were in an array , and that's a perfect lead-in for our next topic: JavaScript arrays. Before moving on to arrays, however, it's essential to finish this topic by noting that strings and numbers are quite different in JavaScriptsomething that can be confusing if you're just starting out, as we'll see next.



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net