Using the JavaScript String Length Property

The Usefulness of the JavaScript String Length Property

A web developer who writes what would be considered complex scripts would certainly know how to use the JavaScript string length property. However, even if you’re a beginning student of this scripting language, you can benefit from getting used to working with strings, getting much needed practice before it comes time to use that skill on a live site. So, what exactly are strings? A string is any combination of letters, numbers, symbols, and/or punctuation marks. They’re always delimited (enclosed) within single or double quotation marks. Why might you need to know the length of a string? Think of some of the web sites you might have visited that required you to register to participate in some activity or upload and maintain content.

You probably had to create a username and password that had to contain a minimum number of characters and that couldn’t exceed a maximum number of characters. Yes, you guessed it; the script had to have some way of checking the length of strings to know whether to accept or reject input. Of course there are many other situations that might require you to be able to find out the length of any string. This is the usefulness of the JavaScript string length property.

Let’s Practice Discovering String Length in JavaScript

If you click on the screen shot below, you’ll see a simple script I’ve written to demonstrate use of the JavaScript string length property. You should already understand the HTML tags you see. This isn’t a live script so I didn’t declare a document type; rather, I simply used opening and closing tags. The character data (CDATA) section in which the script is enclosed is out of habit from my training. If you validate your web pages, you’ll need to enclose your script within a CDATA section to avoid errors–modern web development calls for validation of web documents.

I work with four different strings; but, notice that I’ve only declared two variables. I simply want to demonstrate use of the JavaScript string length property on a string within a document.write statement and also on a variable of the string type. You’ll see why in just a moment.

The syntax to use is: “stringInQuoteMarks”.length. On line twelve of my code, you see: “Hannibal Smith”.length. This string’s length is fourteen. On line thirteen, you see: “Hannibal Smith”.length. This string’s length is seventeen. What’s the difference? You’ll often need to generate XHTML with a scripting language like JavaScript which is where the paragraph tag () comes from. Although you might generate XHTML in this manner, you’ll need to be careful because that XHTML tag counts as part of the string unless you separate it. If I wanted to keep the paragraph tag out of the count, I could write: “”, “Hannibal Smith”.length, “.” This keeps it out of the actual string of Hannibal Smith and returns a length of fourteen. Learning to program requires learning to pay close attention to detail and being extremely accurate. When something doesn’t work, the problem is not the program, it’s the programmer.

Now notice on lines fourteen and fifteen that I use the JavaScript string length property on the strings contained in the variables name1 and name2. I did this just to show that the string with which you work can appear directly within the document.write (print) statement or it can be stored in a variable. Programming is about being flexible. Can you tell the actual numbers that were returned when this script ran? You should come up with: 14, 17, 15, and 11. Remember, JavaScript counts spaces. Other JavaScript tutorials you might find helpful are: JavaScript IndexOf: Explanation and Examples and JavaScript TypeOf: Explanation and Examples.