JavaScript Strings: Introduction
JavaScript provides two types to store and process text-based data: JavaScript strings and JavaScript String objects. JavaScript strings belong to the primitive types and JavaScript String objects are a wrapper around the string type. The JavaScript string object comes in with a host of handy functions to process strings. For the sake of readability, we stick to referring the String object with an upper case "S".
A JavaScript string is a read-only array of 2-byte sized characters; these characters can be letters, numbers (from 0 to 9), white-space etc. JavaScript places little restriction on these elements except that they should be unsigned.
The following figure shows a JavaScript string variable (varString) that holds the text: "The Hobbit".
Figure: A JavaScript string is an array of characters
String types are implemented as read-only arrays since they belongs to the primitive types and hence, are immutable. Note that arrays are objects and so are mutable. Thus, the only way out is to simply makes string types as read-only arrays. Thus, we cannot change the value its characters; any attempt to change these values is silently ignored.
Being read-only arrays implies that string types do not inherit all characteristics of Arrays. First, for string types, the typeof operator returns "string". This is noteworthy since even though string types are arrays, JavaScript does not return the type as "object", which is what JavaScript returns for Arrays. Second, since string types are arrays, one might feel tempted to use the "delete" operator to delete some of the string's characters. However, since strings are read-only arrays, JavaScript silently ignores these delete operation.
However, a welcome exception is that a string type still use Array's length property to store the length of the string.
To assign a string value to a string type, we can keep the string within quotes (double or single) and simply assign the value to varString. Thus, the statement, "varString = "The Hobbit";", assigns the text "The Hobbit" to the string variable, varString.
Let us use a simple example to get started with JavaScript strings. This program (provided below) defines a string variable ("s") and assigns a text value to it. After that, it uses a "for" loop to iterate through individual characters compromising the string variable. Lastly, the program attempts to delete some of the element characters; as explained earlier, the delete operation fails silently and when we print the array again, the string value remains unchanged. We provide the output as comments.
<!doctype html>
<html>
<div id="idDiv"></div>
<script type="text/javascript">
// Get a handle of the div element.
var elem = document.getElementById("idDiv");
var s = "The Hobbit";
elem.innerHTML += s; // Prints "The Hobbit"
elem.innerHTML += s.length; // Prints 10
// This loop prints individual elements as: "T, h, e, , H, o, b, b, i, t,"
for (var i=0; i < s.length; i++) {
elem.innerHTML += s[i] + ", ";
}
// Next, let us attempt to delete some of the array characters.
delete s[1];
delete s[2];
delete s[3];
elem.innerHTML += s; // Still prints "The Hobbit"
elem.innerHTML += s.length; // Still prints 10
</script>
</html>
For comparing strings, JavaScript provides two operators: equality operator ("==") and strict equality operator ("===").
For equality operator, we can even pass values that are not string and the equality operator would automatically cast the non-string values into string values. The strict equality operator, is stricter and does not cast non-strings into strings.
In the example provided below, we can pass "101" (a string) and 101 (a number) to equality operator and the operator would automatically convert 101 into string before it begins the comparison. Hence, comparing "101" with 101 fails since the very types of these variables is not same, let aside their values!
<!doctype html>
<html>
<div id="idDiv"></div>
<script type="text/javascript">
// Get a handle of the div element.
var elem = document.getElementById("idDiv");
var str1 = "101";
var str2 = 101;
var x = (str1 == str2);
elem.innerHTML += x; // Prints "true"
x = (str1 === str2);
elem.innerHTML += x; // Prints "false"
</script>
</html>
Since string types are a read-only arrays, it places severe restriction on using methods defined by the Array object. Because a lot of Array methods end up modifying the original array and since strings are read-only arrays, these methods, in fact, simply do not apply for strings. We can avoid this restriction by using JavaScript Strings.