JavaScript Tutorials

Conversion Methods

As mentioned previously, all objects have toLocaleString(), toString(), and valueOf() methods. The toString() and valueOf() methods return the same value when called on an array.

The result is a comma-separated string that contains the string equivalents of each value in the array, which is to say that each item has its toString() method called to create the final string. Take a look at this example:

var colors = ["red", "blue", "green"]; //creates an array with three strings
alert(colors.toString()); //red,blue,green
alert(colors.valueOf()); //red,blue,green
alert(colors); //red,blue,green

In this code, the toString() and valueOf() methods are first called explicitly to return the string representation of the array, which combines the strings, separating them by commas. The last line passes the array directly into alert(). Because alert() expects a string, it calls toString() behind the scenes to get the same result as when toString() is called directly.

The toLocaleString() method may end up returning the same value as toString() and valueOf(), but not always. When toLocaleString() is called on an array, it creates a comma delimited

string of the array values. The only difference between this and the two other methods is that toLocaleString() calls each item’s toLocaleString() instead of toString() to get its string value. Consider the following example:

var person1 = {
  toLocaleString : function () {
    return 'Nikolaos';
  toString : function() {
    return 'Nicholas';
var person2 = {
  toLocaleString : function () {
    return 'Grigorios';
  toString : function() {
    return 'Greg';
var people = [person1, person2];
alert(people.toString()); //Nicholas,Greg
alert(people.toLocaleString()); //Nikolaos,Grigorios

Here, two objects are defined, person1 and person2. Each object defines both a toString() method and a toLocaleString() method that return different values. An array, people, is created

to contain both objects. When passed into alert(), the output is “Nicholas,Greg”, because the toString() method is called on each item in the array (the same as when toString() is

called explicitly on the next line). When toLocaleString() is called on the array, the result is “Nikolaos,Grigorios”, because this calls toLocaleString() on each array item. The inherited methods toLocaleString(), toString(), and valueOf() each return the array items as a comma-separated string. It’s possible to construct a string with a different separator using

the join() method. The join() method accepts one argument, which is the string separator to use, and returns a string containing all items. Consider this example:

var colors = ['red', 'green', 'blue'];
alert(colors.join(',')); //red,green,blue
alert(colors.join('||')); //red||green||blue

Here, the join() method is used on the colors array to duplicate the output of toString(). By passing in a comma, the result is a comma-separated list of values. On the last line, double pipes are passed in, resulting in the string “red||green||blue”. If no value or undefined is passed into the join() method, then a comma is used as the separator. Internet Explorer 7 and earlier incorrectly use the string “undefined” as the separator.