3.3 Converting Between Arrays and Strings

NN 3, IE 4

3.3.1 Problem

You want to obtain a string representation of an array's data or change a string to an array.

3.3.2 Solution

Array objects and string values have methods that facilitate conversion between these data types, thus allowing arrays to be conveyed to other pages via URL search strings or cookies.

To convert a simple (one-dimensional) array to a string, first select a character that can act as a unique delimiter character between the array values when they become embedded in a string. The character cannot appear in any of the data entries. Specify that character as the sole parameter to the join( ) method of the array. The following statement uses a comma as a delimiter between entries after the conversion to string form:

var arrayAsString = myArray.join(",");

The original array is not disturbed in the course of this transformation.

If you have a string with a delimiter character separating individual points of data that you want to convert to an array, specify that character as the parameter of the split( ) method of your string value or object:

var restoredArray = myRegularString.split(",");

The split( ) method performs the task of an array constructor, automatically passing the values between delimiters as items of the new array.

3.3.3 Discussion

Although the preceding examples show only single characters used as the so-called separators for the string versions, you can use any string. For example, if you intended to display the array entries as a vertical list in a textarea element, you could use the \n special character to force carriage returns between the items. Similarly, if the data was to be formatted as an XHTML list, you could use the string <br /> as the separator of the join( ) method. Then use the resulting string as a value to assign to an element's innerHTML property for display in the body text of a page.

Use the join( ) method only on simple arrays. For a multidimensional array, the method is safe to use on any of the most deeply nested arrays, which are, themselves, simple arrays.

Even more powerful is the split( ) method of a string value or object. You can use regular expressions as the separator parameter. For example, consider the string of comma-delimited dollar values:

var amounts = "30.25,120.00,45.09,200.10";

If you want to create an array of just the integer portions of those values, you could create a regular expression whose pattern looks for a period, followed by two numerals and an optional comma (to accommodate the final entry):

var amtArray = amounts.split(/\.\d{2},?/);

One by product of the use of the split( ) method on a string when the separator is at the end of the string is that the method creates an array entry for the nonexistent item following the end separator. Most typically, the separator does not come at the end of the string, but if it does, watch out for this extra empty array entry.

An optional second parameter of the split( ) method lets you supply an integer representing the number of items from the string to send to the new array. Thus, if the string value always ends in the separator character or sequence, you can limit the split( ) method to the actual number of items in the string (assuming your scripts know or derive that information from string parsing or other activities). This parameter is not part of the formal ECMAScript standard, but is implemented in mainstream browsers.

In practice, converting arrays to a string is limited to array data that is easily represented in strings, such as numbers, Booleans, and other strings. If an array's items consist of references to objects (either custom or DOM), such objects don't have a suitable or meaningful string representation. For an array of DOM objects, you might consider grabbing the id properties of the objects and preserving them in the string. Although the characteristics of the objects won't be conveyed, if the same objects exist in another page, the IDs can be used (via the document.getElementById( ) method) to resurrect a proper reference to the object. See Recipe 3.13 and Recipe 8.14 for ideas about converting objects to strings.

3.3.4 See Also

Recipe 3.13 for a way to convert data consisting of custom objects and arrays to a string that can later rebuild the objects and arrays; Recipe 8.14 to convert form data to strings for transfer to another page.