Concatenate Strings with a Separator using JavaScript

# Concatenate Strings with a Separator in JavaScript

To concatenate strings with a separator:

1. Add the strings to an array.
2. Pass the separator as an argument to the Array.join() method.
3. The join() method will concatenate the strings with the specified separator.

Copied!
const str1 = 'bobby';
const str2 = 'hadz';
const str3 = 'com';

const commaSeparated = [str1, str2, str3].join(',');
console.log(commaSeparated); // 👉️ "bobby,hadz,com"

const hyphenSeparated = [str1, str2, str3].join('-');
console.log(hyphenSeparated); // 👉️ "bobby-hadz-com"

You can specify any string as the separator, e.g. an underscore, a word, a space, etc.

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

# Dealing with empty strings

If some of the strings are empty, you will get multiple separators next to one another.

Copied!
const str1 = 'bobby';
const str2 = 'hadz';
const str3 = '';
const str4 = 'com';

const result = [str1, str2, str3, str4].join('#');
console.log(result); // 👉️ bobby#hadz##com

Notice that there are two hash symbols next to one another because the str3 variable stores an empty string.

You can use the Array.filter() method to remove the empty strings from the array before calling join().

Copied!
const str1 = 'bobby';
const str2 = 'hadz';
const str3 = '';
const str4 = 'com';

const result = [str1, str2, str3, str4].filter(element => element).join('#');
console.log(result); // 👉️ bobby#hadz#com

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

On each iteration, we return the current element to exclude all falsy values (e.g. empty strings) from the new array.

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

# Concatenating Strings with different separators

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

Copied!
const str1 = 'bobby';
const str2 = 'hadz';
const str3 = 'com';

const withoutSeparator = [str1, str2, str3].join();
console.log(withoutSeparator); // 👉️ "bobby,hadz,com"

Even if that's what you need, it's a best practice to be explicit and pass the comma to the join() method, as not all developers are aware of the default behavior.

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

Copied!
const str1 = 'bobby';
const str2 = 'hadz';
const str3 = 'com';

const withoutSeparator = [str1, str2, str3].join('');
console.log(withoutSeparator); // 👉️ "bobbyhadzcom"

If the join method is called on an empty array, an empty string is returned.

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

Note that any undefined, null, or empty array [] values get converted to an empty string.

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

If you see a trailing separator in the result, chances are your array contains an undefined, null or [] value.

As shown in the previous example, you can use the Array.filter() method to remove all falsy values from the array before calling join().

Copied!
const str0 = '';
const str1 = 'bobby';
const str2 = undefined;
const str3 = 'hadz';
const str4 = '';

const result = [str0, str1, str2, str3, str4]
  .filter(element => element)
  .join('-');
console.log(result); // 👉️ bobby-hadz

We used the filter() method to exclude all falsy values from the array before calling join().

The falsy values in JavaScript are: false, 0, -0, "" (empty string), null, undefined, NaN (Not a number).

# Additional Resources

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

• Concatenate a String with a Variable in JavaScript
• How to Concatenate Two Numbers in JavaScript