Javascript Array Element to String

In this article, we are going to see how to convert javascript array elements to strings. We will convert both a single element and an entire array to a string.

Table Of Contents

1. Convert array element to a string
2. Convert array to a string
3. JavaScript join array of objects
4. javascript array to string without commas
5. Convert array to string with commas

Convert array element to a string

To convert an array element to a string first access the element using the index and then convert it to a string using any of the following methods.

1. Using toString() Method
2. Using template literal
3. Using String() Constructor
4. Concatenating the value with an empty ('') string

Here is an example of how to convert array elements to strings.

// JavaScript array element to string
var arr = [10, 25, true, 'Hello'];

console.log(arr[0].toString()); // '10'
console.log(`${arr[1]}`); // '25'
console.log(String(arr[2])); // 'true'
console.log(arr[1] + ''); // '25'

// you can check type by using typeof
console.log(typeof arr[0].toString()); // string
console.log(typeof `${arr[1]}`); // string

The above 4 methods work fine until we try to convert an object to a string.

Here is how converting an object to string fails by the above 4 methods.

// convert object to string
var arr = [{a: 1}, {b: 2}];

console.log(arr[0].toString()); // [object Object]
console.log(`${arr[1]}`); // [object Object]
console.log(String(arr[0])); // [object Object]
console.log(arr[1] + ''); // [object Object]

So all of the above methods fail to convert an object to a string.

If we have an array element that is an object then we can use JSON.stringify() method to convert it to string.

// convert object to string
var arr = [{a: 1}, {b: 2}];

console.log(arr[0]); // {"a":1}
console.log(arr[1]); // {"b":2}

Convert array to string

Above we have seen how to convert array elements to strings. Now let's look at how can we convert the entire array to a string.

To convert an array to a string you can use the join() method.

The join() is an array method that is used to join all the elements of an array into a string separated by a specified separator.

Here is an example of how to convert an array to a string.

// JavaScript array to string
var arr = [10, 25, true, 'Hello'];

console.log(arr.join()); // '10,25,true,Hello'
console.log(arr.join('')); // '1025trueHello'
console.log(arr.join('-')); // '10-25-true-Hello'

JavaScript join array of objects

When there is an object in the array or the entire array is of objects then the join() method does not seem to be working fine.

Here is how.

var arr = [{a: 1}, {b: 2}];

console.log(arr.join());
// [object Object],[object Object]

You can see the output of the above code is [object Object],[object Object] which is not desirable.

To fix this we are going to create our own method to join array elements and when we get an object in the array then we will use JSON.stringify() method to convert it to string.

var arr = [{a: 1}, {b: 2}, {c: 3}];

function joinArray(arr) {
  var str = '';
  for (var i = 0; i < arr.length; i++) {
    if (typeof arr[i] === 'object') {
      str += JSON.stringify(arr[i]);
    } else {
      str += arr[i];
    }
    if (i !== arr.length - 1) {
      str += ',';
    }
  }
  return str;
}

console.log(joinArray(arr));
// '{"a":1},{"b":2},{"c":3}'

Now you can see the output of the above code is {"a":1},{"b":2},{"c":3} which is desired.

Javascript array to string without commas

If you want to convert an array to a string without commas then you can use the join() method with any separator other than a comma or leave it blank.

var arr = [10, 25, true, 'Hello'];

// without comma
console.log(arr.join('')); // 1025trueHello
console.log(arr.join('-')); // 10-25-true-Hello
console.log(arr.join(' + ')); // 10 + 25 + true + Hello

Convert array to string with commas

To convert an array to a string with commas then you can use the join() method with a comma as a separator or leave it blank (the default separator is a comma).

// javascript array to string with commas
var arr = [10, 25, true, 'Hello'];

// with comma
console.log(arr.join()); // 10,25,true,Hello
console.log(arr.join(',')); // 10,25,true,Hello

You can run all of the above codes in our online javascript compiler.