This is a tutorial on how to convert a JavaScript array into a string.
Because there are multiple ways to convert an array into a string, we will provide examples of each approach and then explain their pros and cons.
Converting a JavaScript array into a string by using the toString() method.
The simplest approach involves using the Array.prototype.toString() method.
This method will return the array’s elements as a single string, separated by commas:
//Create an example JavaScript array. var testArray = [1, 2, 3] //Convert the array into a string var str = testArray.toString(); //Log the string to the console. console.log(str); //Result is "1,2,3"
In the JavaScript example above, we created a simple array. After that, we then converted this array into a string by using the toString() method.
If you run this code on your own machine, you will see that the console prints out the following string:
1,2,3
Here, you can see that our array elements have been automatically joined together (concatenated). Furthermore, the array elements have been separated out by commas.
The only drawback to using this approach is that you have no control over which character is used as the separator. It will always use commas to separate your array elements.
Converting an array into a string using the join() method.
If you want to use a different character as the separator for your array elements, then you can use the join() method.
Similarly, this method can also be useful if you are using commas but want to insert a blank space after each one:
//Example array.
var testArray = [1, 2, 3]
//Using the join() method.
var str = testArray.join(', ');
//Log the result to the console.
console.log(str); //Result is "1, 2, 3"
If you run this example, you will see that we have added a space character after each comma.
The great thing about the join() method is that it allows you to manually specify the separator character.
For example, if you want to separate each array element by a hyphen character instead of a comma, then you can do the following:
//Using the hyphen as the separator character.
var str = testArray.join('-');
This will convert the JavaScript array into a string that looks like this: “1-2-3”.
Alternatively, if you want to use a (dot) character, then you can simply pass a “.” string in as the separator parameter:
//Using a dot as the separator character.
var str = testArray.join('.');
The above snippet will result in a string that looks like this: “1.2.3”.
It is worth noting that the separator parameter for the join() method is completely optional. You do not have to provide a separator.
However, if you fail to manually specify a parameter, it will behave the same as the toString() method. In other words, it will use the comma character with no spaces as a default.
If one of your array values is null or undefined, then this method will convert it into an empty string.
If it contains a boolean FALSE or TRUE value, then the join() method will convert that value into its textual value. i.e. False will become the string “false” and true will become the string “true”.
Using concatenation.
You can also use some simple concatenation to convert a JS array into a string:
//Example array. var testArray = ['a', 'b', 'c']; //Using concatenation var str = testArray + ''; //Log the result console.log(str); //Result is "1,2,3"
This will convert the array elements into a string and separate each element with a comma.
Although this method works, I would personally advise against using it.
Firstly, in my opinion, it feels “hacky”. Secondly, it makes your code far less readable. This is because the goal of the operation is not obvious.
So, in conclusion:
- If you’re happy with the separator being a comma, then simply use the toString() method.
- If you want to use a custom separator or add a blank space after the comma, then use the join() method.
Hopefully, you found this guide useful!