Working with JavaScript String Functions

The Role of JavaScript String Functions

This is an introduction to a few of the numerous JavaScript string functions available in this popular language for client-side scripts in web development. Although programming is basically pure logic and mathematics, the many ways in which you can manipulate strings causes you to sometimes forget about things like order of operations as you focus on characters. If this is your first introduction to JavaScript string functions, you have a little ways to go in your programming studies. However, you’ll at least be aware of just how important it is to learn how to handle strings to “fine tune” your scripts.

Learning by Example JavaScript Code

I’ve included the following example code that I wrote for this tutorial to accompany explanations. I used simple opening and closing tags without declaring a document type because although the script can be run, it’s not live; it’s for educational purposes. I’ll explain each line of code and the sample of JavaScript string functions introduced.

-——Code Begins Here——-

-——Code Ends Here——-

You should already be familiar with XHTML tags, how to declare a variable of the string type, and how to use document.write to print. If you are going to validate your pages that contain JavaScript, you’ll want to enclose your code within a character data (CDATA) section to avoid errors. Now, we’ll talk about the JavaScript string functions used in this brief tutorial.

In my first document.write statement all I’m doing is concatenating strings, in other words, I’m “stringing” them together without spaces in this example. I didn’t have to declare variables; but, that’s how I prefer to work. The second line to print involves taking the string stored in the word1 variable to upper case letters using the toUpperCase() method. I could just have easily used this method directly on a string “caught up” within the document.write statement by writing: document.write(“apples”.toUpperCase().

I demonstrate the dreaded blink in the third print (document.write) statement by using the blink() method on the string in the word2 variable. You can see how easy the syntax is: “theString”.blink() or variableName.blink(). Remember, you can’t delimit an actual variable by quotation marks. This is why I didn’t write something like “word2”.blink(). That wouldn’t work. The fourth print statement is practice with the bold() method on the variable word3. Notice the pattern in the syntax for all of these JavaScript string functions. Finally, we take the string written in all capital letters held in the variable word5 to all lowercase letters by writing: word5.toLowerCase(). You can see the results of all of these JavaScript string functions (methods) as they appear in a browser if you click on the screen shot below. Yes, the word “oranges” blinks and it happens that its picture was snapped for the screen shot just as it blinked “on.”

One more method to which I call your attention is parseInt() which is used to convert a string to a number, an integer. I don’t demonstrate it here, but there’s also parseFloat() to turn a string into a floating-point number. I included this snippet of code from a script I wrote a while back when I was studying Javascript because I want you to see the prompt that it creates. The user is asked to enter an hourly salary. Yes, as an integer, not a floating-point number; this was during my practice days. The prompt boxes through which users can submit input are text boxes, not number boxes. How would you convert strings into numbers in order to perform mathematical calculations on them were it not for JavaScript string functions like parseInt() and parseFloat()? There are certainly more methods to learn, but these get you started. You might also want to learn how to work with the JavaScript indexOf() and typeOf() operators.