We will learn how to join non-empty strings with a separator in JavaScript using two different methods. Each method is rather straightforward, and you can choose whichever you want.
Join non-empty strings with a separator in JavaScript
Using join() and filter()
join() is a method that works on an array of substrings, it will return a string concatenated separated by a delimiter given. To discover the syntax and usage of this join() method, you can read this tutorial.
Syntax:
join(separator)
Parameter:
- separator: A pattern such as a string or a character that will be added between each substring.
You can use this function to join non-empty strings with a separator. However, to make sure an array contains only non-empty strings, we need to use the filter() method to remove empty strings from it:
let myArray = ['Learn', null, 'Share', undefined, 'IT', ''];
// Remove the empty strings from array:
myArray = myArray.filter(Boolean);
console.log(myArray);
// Join non-empty strings with a separator is a comma
let res = myArray.join(',');
console.log(res);
// Join non-empty strings with a separator is a space
res = myArray.join(' ');
console.log(res);Output:
Array ["Learn", "Share", "IT"]
"Learn,Share,IT"
"Learn Share IT"
The above example shows you an array that contains both empty strings and non-empty strings. We have used the filter method with a Boolean function in order to remove empty strings from the array. After that we provide you with two examples of joining non-empty strings from an array with two different separators: one is a comma and other is a white space.
Using for loop and concat operator
If you have no idea what a filter() function is or you just don’t want to use the join() method for some reason. Then you can implement it without using any methods or functions. For example:
let myArray = ['Learn', null, 'Share', undefined, 'IT', ''];
let res;
// Loop through the array's elements
for (substring of myArray) {
// Check if this element is not an empty string
if (substring) {
// Then concatenate it using separator is a comma
if (res) {
res = res + ',' + substring;
} else {
res = substring;
}
}
}
console.log(res);Output:
"Learn,Share,IT"The logic behind this method is very simple: we will loop through an array to check whether the current element is an empty string or not, if yes, then we do nothing, otherwise we will add it to the res variable. However, if this is the first time res is assigned, we don’t add a separator to it. Otherwise, we will add a separator and then the substring to the res in order to join those non-empty strings.
Summary
We have learned to join non-empty strings with a separator in JavaScript using two different methods. It would help if you considered that each approach has its pros and cons. We recommend you use the join() method and the filter() method as they are the built-in functions designed to achieve this. Please leave us a reply if you have any questions. Good luck!
Maybe you are interested:
- Split a String with multiple Separators using JavaScript
- Check if two strings are not equal in javascript
- How to compare Strings in JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R
