Convert Array to String (with and without Commas) in JS

# Table of Contents

1. Convert Array to comma-separated String in JavaScript
2. Convert Array to String (with and without Commas) using Array.join()
3. Convert an array to a string without commas using String.replaceAll()

# Convert Array to comma-separated String in JavaScript

You can use the String() constructor to convert an array to a comma-separated string.

The String() constructor will return a string where the array elements are separated by commas.

Copied!
const arr = ['bobby', 'hadz', 'com'];

// ✅ using String() constructor
const str = String(arr);
console.log(str); // 👉️ 'bobby,hadz,com'
console.log(typeof str); // 👉️ string

// -------------------------------------------
// ✅ Using toString() method

const str2 = arr.toString();
console.log(str2); // 👉️ 'bobby,hadz,com'
console.log(typeof str2); // 👉️ string

The only argument we passed to the String object is the value we want to convert to a string.

Since we provided an array, the result is a comma-separated string.

The String() constructor and the Array.toString() methods use the join() method to convert the array into a comma-separated string under the hood.

# Convert Array to String (with and without Commas) using Array.join()

An alternative, but also very common approach is to use the Array.join() method.

The Array.join() method will return a string where all of the array elements are joined with a comma separator.

Copied!
// ✅ Convert an array to a comma-separated string
const arr = ['bobby', 'hadz', 'com'];

const str = arr.join(',');
console.log(str); // 👉️ 'one,two,three'

const str2 = arr.join(', ');
console.log(str2); // 👉️ "bobby, hadz, com"

To convert an array to a string without commas, pass an empty string to the Array.join() method.

Copied!
const arr = ['bobby', 'hadz', '.com'];

const withoutCommas = arr.join('');
console.log(withoutCommas); // 👉️ 'bobbyhadz.com'

console.log(typeof withoutCommas); // 👉️ string

If the separator argument is set to an empty string, the array elements are joined without any characters in between them.

The Array.join() method concatenates all of the elements in an array using a separator.

The only argument the Array.join() method takes is a separator - the string used to separate the elements of the array.

If a value for the separator argument is omitted, the array elements are joined with a comma ,.

You can pass any value for the separator to the Array.join() method. Here are some other examples.

Copied!
const arr = ['bobby', 'hadz', 'com'];

const withSpaces = arr.join(' ');
console.log(withSpaces); // 👉️ 'bobby hadz com'

const withCommaAndSpace = arr.join(', ');
console.log(withCommaAndSpace); // 👉️ bobby, hadz, com

const withDashes = arr.join('-');
console.log(withDashes); // 👉️ 'bobby-hadz-com'

const withoutSeparator = arr.join('');
console.log(withoutSeparator); // 👉️ bobbyhadzcom

If you call the join method on an empty array, it returns an empty string.

Copied!
console.log([].join(',')); // 👉️ ''

# Working around undefined and null values

An important thing to note is that if the array contains elements that are undefined, null or an empty array [], they get converted to an empty string.

Copied!
const arr = ['bobby', 'hadz', null];

console.log(String(arr)); // 👉️ bobby,hadz,
console.log(arr.join(',')); // 👉️ bobby,hadz,

If you need to remove the null and undefined values from an array
before calling the Array.join() method use the Array.filter() method.

Copied!
const arr = [null, 'bobby', 'hadz', null, undefined, 'com'];

const str = arr
  .filter(element => {
    return element !== null && element !== undefined;
  })
  .join(',');

console.log(str); // 👉️ bobby,hadz,com

The function we passed to the Array.filter() method gets called with each element in the array.

On each iteration, we check if the current element is not equal to null and undefined and return the result.

Copied!
const arr = [null, 'bobby', 'hadz', null, undefined, 'com'];

// 👇️ [ 'bobby', 'hadz', 'com' ]
console.log(
  arr.filter(element => {
    return element !== null && element !== undefined;
  }),
);

The filter() method returns a new array that only contains the elements that meet the condition.

The last step is to use the Array.join() method to convert the array to a comma-separated string.

# Defining a reusable function

If you have to do this often, define a reusable function.

Copied!
// ✅ convert an array to a comma-separated string
function arrayToCommaString(array) {
  return array
    .filter(element => {
      return element !== null && element !== undefined;
    })
    .join(',');
}

const arr = [null, 'bobby', 'hadz', null, undefined, 'com'];

const str = arrayToCommaString(arr);
console.log(str); // 👉️ bobby,hadz,com

The function takes an array as a parameter and converts the array to a comma-separated string.

You can call the join() method with an empty string to convert the array to a string without commas.

Copied!
function toStringWithoutCommas(array, separator = '') {
  return array
    .filter(element => {
      return element !== null && element !== undefined;
    })
    .join(separator);
}

const arr = [null, 'bobby', undefined, 'hadz', null, 'com'];

const str1 = toStringWithoutCommas(arr);
console.log(str1); // 👉️ "bobbyhadzcom"

const str2 = toStringWithoutCommas(arr, '-');
console.log(str2); // 👉️ "bobby-hadz-com"

The function takes an array and optionally a separator and converts the array to a string without commas.

# Convert an array to a string without commas using String.replaceAll()

To convert an array to a string without commas:

1. Use the Array.map() method to iterate over the array.
2. Use the replaceAll() method to remove all commas from each array element.
3. Use the Array.join() method to join the array to a string without commas.

Copied!
const arr = ['bo,bby', 'ha,dz', 'c,om'];

const str = arr
  .map(element => {
    return element.replaceAll(',', '');
  })
  .join('');

console.log(str); // 👉️ bobbyhadzcom

The function we passed to the Array.map() method gets called with each element in the array.

On each iteration, we use the String.replaceAll() method to remove all commas from the string and return the result.

The map() method returns a new array containing the values returned from the callback function.

Copied!
const arr = ['bo,bby', 'ha,dz', 'c,om'];

// 👇️ [ 'bobby', 'hadz', 'com' ]
console.log(
  arr.map(element => {
    return element.replaceAll(',', '');
  }),
);

The String.replaceAll() method returns a new string with all matches of a pattern replaced by the provided replacement.

The method takes the following parameters:

The String.replaceAll() method returns a new string with the matches of the pattern replaced. The method doesn't change the original string.

The last step is to use the Array.join() method to join the array into a string without commas.

Copied!
const arr = ['bo,bby', 'ha,dz', 'c,om'];

const str = arr
  .map(element => {
    return element.replaceAll(',', '');
  })
  .join('');

console.log(str); // 👉️ bobbyhadzcom

We joined the array elements without a separator, but you can use any other value.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Convert an Array of Objects to an Array of Values in JS
• How to convert an Array to a Map in JavaScript
• Convert Array of Strings to Array of Numbers in JavaScript
• Convert an Array to an Object using JavaScript