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

avatar
Borislav Hadzhiev

Last updated: Dec 31, 2022
4 min

banner

# 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.

index.js
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

convert array to comma separated 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.

index.js
// โœ… 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.

index.js
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.

index.js
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.

index.js
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.

index.js
const arr = ['bobby', 'hadz', null]; console.log(String(arr)); // ๐Ÿ‘‰๏ธ bobby,hadz, console.log(arr.join(',')); // ๐Ÿ‘‰๏ธ bobby,hadz,

working around undefined and null values

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

index.js
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

using array filter to exclude null and undefined

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.

index.js
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.

index.js
// โœ… 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

defining reusable function

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.

index.js
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.
index.js
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.

index.js
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:

NameDescription
patternThe pattern to look for in the string. Can be a string or a regular expression.
replacementA string used to replace the substring match by the supplied pattern.

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.

index.js
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:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev