::Stuff for the multi-spec coder;

Coding, formats, standards, and other practical things.

Home // JavaScript // Strings: Part 1

<!-- JavaScript

Strings Part 1

JavaScript defines five differenet primitive types: Number, String, Boolean, Null, and Undefined. Whenever a literal value is assigned to a variable, the JavaScript interpreter must decide which one of those five the particular value belongs to.
Suppose you were to assign a value to a variable; how would you know what type of value was assigned? The typeof operator can determine this for you. The typeof operator takes one parameter (or argument, if you think of it as a function without parentheses): the variable's name. For example:

var something = "my string"; alert(typeof something); // alerts 'string'

The String type is used to store zero or more Unicode characters, which, internally, are represented as 16-bit integers (this is important to note since you can make direct lookups for specific characters on the international character set). A String of zero characters is still a String, as can be gleaned from this test:

var something = ""; alert(typeof something); // alerts 'string'

String literals can be encased in single-quotes(''), or double-quotes(""). Unlike many other languages, choosing which one to use does not change the behaviour of the assignment. Both single and double quotes may be used, and you'd often simply choose the one which doesn't appear within the string you're assigning. For example:

var something = '<div align="center"></div>';

Here, single-quotes were chosen because the string itself contained double-quotes. If the string value contained single quotes, you may have chosen to use double quotes. There's another way around this, however, which is called character escaping. Here's the same string assignment, this time using double quotes:

var something = "<div align=\"center\"></div>";

By placing a Backslash (\) before the double quote within the string, you're telling the JavaScript interpreter that you don't want to end the string there, but rather you actually want the double quote character (") to be within the string. The string won't actually contain the backslash characters, this is just for the purpose of the assignment, so that the JavaScript Interpreter knows what you mean. The same goes for single quotes. If you have a string that's encased in single quotes, and would like to place a single quote character within it, you can 'escape it' (place a Backslash character before it) within the string, for instance: 'everyone\'s here'.

There are other escaped characters which you can use within strings. These include, but are not limited to:

Literal	Meaning
`\n`	Newline
`\t`	Tab
`\r`	Carriage return (this is system-dependant, it can appear as a newline or as `\r\n`)
`\\`	Backslash character (`\`)
`\x`nn	A character represented by a hexadecimal code nn. For example, `\x61` is 'a', and `\x7E` is '~'.
`\u`nnnn	A unicode character represented by a hexadecimal code nnnn. For example, `\u03A9` is the Greek capital letter Omega.

The String 'Class'

Note: What are commonly referred to as "classes" in JavaScript are actually 'Reference Types'. This is to denote that you are dealing with an object, not a primitive type. This is just semantics, however, and generally you'll find that in practice Reference Types are referred to as classes.

While Strings are Primitive Types in JavaScript, the String class provides methods for operating on primitive string values. Strings may be declared as instances of the String class like so:

var myStr = new String("String Value");

The new operator was used to create a new String Object. Here's what the typeof operator has to say about it:

var myStr = new String("String Value"); alert(typeof myStr); // alerts 'object'

That's actually rather generic. An object can be anything, after all. If you want to know what type of class the Object is an instance of, you can use the instanceof operator:

var myStr = new String("String Value"); alert(myStr instanceof String); // alerts 'true'

Granted, that's some odd syntax. Try to imagine that the code is asking: "is myStr an instanceof the String class?".

You can always get the String primitive back from the String object using either the valueOf() method, or the toString() method:

var myStr = new String("String Value"); var primStr = myStr.valueOf(); // myStr.toString() will do the same alert(typeof primStr); // alerts 'string'

While the String class has many Methods, it has but one property: length. The length property returns an integer which is the number of characters in the String. Here's how it's implemented:

var myStr = new String("String Value"); alert(myStr.length); // alerts 12

Every character counts as just one character, even if it takes up more space in the declaration. A newline (\n) is one character, and a unicode character (\u03A9) is also just one character.

It's important to mention, that just because a String is in the form of an Object, doesn't mean that it can't be used as a normal string:

var myStr = new String("Hello World"); alert(myStr); // alerts 'Hello World'

There's no need to jump back and forth from a primitive String to a String Object. If you need the functionality of the String class, then declare a String Object. If you just need a quick string which you won't be doing much with, declare a primitive. Either way, you're going to need to write a really large, complex, function-intensive program to notice the difference in performance.

The Makeup of Strings

Before going through the various methods, it's important to understand how Strings are built. As mentioned above, Strings are made up of a variable amount of 16-bit integers, each storing one character. In a way, Strings are Arrays, in which the first character is stored at index 0, and each following character is stored at the next sequential integer. For example, the String "One" contains the character 'O' at index 0, the character 'n' at index 1, and the character 'e' at index 2. The length of the String is always the amount of characters in the String, which, in this case, is 3. The last index in the String is always the length of the String minus one (example.length-1).

One of the many String Methods is the charAt() method. We'll get into the wide range of String Methods in a bit, but charAt() will help clarify how Strings are built in a tangible sense.

We'll start with declaring a string:

var myStr = new String("Computational Geometry is Fun!"); alert(myStr.length); // alerts '30'

Now, we'll 'probe' the String using the charAt() method. The charAt() method takes one argument, and that is the position of the character you want to retrieve. Remember that you're giving it the index of the character, which starts at 0. For example:

var myStr = new String("Computational Geometry is Fun!"); alert(myStr.charAt(0)); // alerts 'C'

The charAt() method looked at index 0, which is where the first character in the String is located, and found a capital C.

Now we'll use something that won't be covered until a bit later, but it's fun, and not too difficult to understand, so what the hey:

var myStr = new String("Computational Geometry is Fun!"); alert(myStr.charAt(0) + myStr.charAt(1) + myStr.charAt(2) + myStr.charAt(3) + myStr.charAt(4) + myStr.charAt(5) + myStr.charAt(15) + myStr.charAt(20));

What did it alert? And why?
Well, you can find out what it alerts simply by running the script, but the why may require a bit of expanding. The alert function actually didn't do anything special here. The charAt() method returned 8 individual Strings, each 1-character-long. The plus (+) signs joined these strings together into one String and that String was handed over as the argument to the alert function. Other than that, it was just a matter of picking the right character positions within the string.
There's a lot more to joining Strings, however, and you can do a lot more than just chain them together like that, as you'll see when we get to String Class Methods.

Strings to Numbers

JavaScript provides you with two very convenient built-in functions for converting Strings to Numbers. These functions are parseInt() and parseFloat(). Predictably, the former parses a String in search of an Integer, while the latter parses a String in search of a Floating Point number. Both methods have a strict set of rules which they follow, step-by-step, in order to determine what number to glean from a given String.

We'll start with parseInt(). The parseInt() function starts at index 0 of the String and determines if it is a valid number. If it isn't, parseInt() returns NaN and doesn't continue. If the character located at index 0 was a valid number, it will continue to index 1, and perform the same test. This process continues until parseInt() encounters a character which isn't a valid number, or reaches the end of the String. Once that occurs, it takes all of the numeric values it has collected until this point, and converts them into number type value.
For example, if parseInt() was given the String '123abc', it would return the number 123, because it would stop when it reached the letter 'a'. As well, if it was given the String '12abcd34', it would return 12, because, once again, it would stop when it reached the letter 'a'.
However, parseInt() is clever enough to recognize non-decimal numbers as well. If you were to hand over the String '0x1F' to parseInt(), it would return 31. It will also recognize octal values: '0160' will return 112. It does so by 'seeing' the 0x prefix in hexadecimal values, and the 0 prefix, along with the absence of the 8 and 9 numbers in octal values. For explicit base handling, parseInt() has its radix mode, in which it takes two arguments:

parseInt("10010101", 2) -- returns 149
parseInt("251", 8) -- returns 169
parseInt("1AC", 16) -- returns 428

The second argument, as you can see, tells parseInt() in which base the number is in.

If parseInt() encounters floating-point numbers, it will truncate them. The reason for this is very simple: a period (.) is not a valid number, so parseInt() will simply stop when it reaches it. If you were to hand the String '45.98' to parseInt(), you would get back 45. This is where parseFloat() comes in.

The parseFloat() function differs in two major ways from parseInt(): First, it only deals with decimal numbers. Numbers that are not base-10 are not valid numbers for parseFloat(). The second difference, and the one that gives the function the 'Float' part, is that the first decimal point that it encounters is considered a valid number. Apart from that, it functions virtually the same way as parseInt(): It looks through a String, starting at index 0, checking for valid numbers. It moves forward until either A) a non-number character appears, or B) it reaches the end of the String. Remember that here, however, the first decimal point encountered is a valid number. After the first decimal point is found, any additional decimal points are considered invalid characters and will end the cycle just like any other non-number character.

Here are a few examples of what parseFloat() will return:

parseFloat("234.7458") -- returns 234.7458
parseFloat("12.34.56") -- returns 12.34
parseFloat("12.0abc") -- returns 12
parseFloat("12.01") -- returns 12.01
parseFloat("0xD") -- returns 0

Numbers to Strings

When converting a Number type to a String, it's much simpler, you just use the toString() method. The toString() method may take one argument, or none. When it takes none, it converts the number to a decimal representation. For example:

var num_a = 5; var num_b = 5.5; var num_c = 57.5; var num_d = 100; alert(num_a.toString()); alert(num_b.toString()); alert(num_c.toString()); alert(num_d.toString());

You can pass an integer as an argument to toString(), in which case it will convert the number to the String using a different base, such as binary (2), octal (8), or hexadecimal (16). Here's how this works:

var my_number = 32; alert(my_number.toString(2)); // alerts 100000 alert(my_number.toString(8)); // alerts 40 alert(my_number.toString(16)); // alerts 20 alert(my_number.toString()); // alerts 32

The first alert will outputs the binary representation of the number 32, the second outputs the octal one, the third the hexadecimal one, and the last outputs the decimal representation, since it was given no argument.

In Strings Part 2: Methods, we'll cover the various methods that the String Class provides you with.

Return to the JavaScript section, or go the to Main page.

Looking for the old guiStuff?

It's still here, the old content didn't go anywhere.