Since JavaScript string types are read-only arrays, they are rather limited in terms of methods they have to offer. To overcome this limitation, JavaScript provides the String object. Objects are mutable and so the String object can contain as many methods as is required for strings. In fact, the String object comes with a lot of useful built-in methods.
We can define a String object of String type using the "new" operator to invoke the String() constructor method provided for String objects. The String() constructor takes a string literal as an argument; a string literal is text enclosed within double-quotes or single-quotes.
Let us go through a simple example that defines variables of both string type and String object and prints their types.
<!doctype html>
<html>
<div id="idDiv"></div>
<script type="text/javascript">
// Get a handle of the div element.
var elem = document.getElementById("idDiv");
var sObj = new String("The wise dragon advised the troubled wizard");
var sStr = "The wise dragon advised the troubled wizard";
elem.innerHTML += sObj // prints "The wise dragon advised the troubled wizard";
elem.innerHTML += sStr // prints "The wise dragon advised the troubled wizard";
elem.innerHTML += (typeof sObj); // prints "object"
elem.innerHTML += (typeof sStr); // prints "string"
</script>
</html>
Every JavaScript object is linked to a prototype object and the object inherits all properties of its prototype. String objects come with their own built-in prototype: String.prototype; this prototype provides a host of very handy methods.
Let us begin by listing properties and methods provided by String.prototype. To provide the list, we use the getOwnPropertyNames() method of the global "Object" object.
<!doctype html>
<html>
<div id="idDiv"></div>
<script type="text/javascript">
// Get a handle of the div element.
var elem = document.getElementById("idDiv");
var x = Object.getOwnPropertyNames(String.prototype);
for (var item in x) {
elem.innerHTML += x[item] + "<br>";
}
</script>
</html>
The output of the above example prints the entire list of methods available with String.prototype: length, constructor, quote, toSource, toString, valueOf, substring, toLowerCase, toUpperCase, charAt, charCodeAt, indexOf, lastIndexOf, trim, trimLeft, trimRight, toLocaleLowerCase, toLocaleUpperCase, localeCompare, match, search, replace, split, substr, concat, slice, bold, italics, fixed, fontsize, fontcolor, link, anchor, strike, small, big, blink, sup, and sub.
We can also add new methods to String objects by adding a function to the String.prototype and the new methods become automatically available to all String objects. Thus, if we define a new function as: "function getLastChar() {return this[this.length-1];}" and then assign it to String.prototype as "String.prototype.returnLastChar = getLastChar;". With this, any String object (let us say sObj) can now use this new method by invoking this method (as "sObj.returnLastChar()").
For the sake of discussion, we organize methods provided by String.prototype into five sets. The first set discusses basic String methods like getting a character of the string, getting the string value of a String object etc. The second set focuses on methods that manipulate string case (lower/upper). The third set provides methods that update, split, slice, and trim strings. The next set provides methods that search, match, and retrieve substrings from a given larger string value. The fifth and the last set focuses on methods that provide an HTML wrapper to strings and thus, help us format the strings as per HTML syntax.