Join Array items' strings which contain commas inside

Question

Input Array:

["a,b,c", "foo,bar", "1,2,1", "a"] // should convert to → '"a,b,c","foo,bar","1,2,1","a"'

Now, using toString() or .join("") will produce the unwanted:

var arr = ["a,b,c", "foo,bar", "1,2,1", "a"];

console.log( arr.toString() )
console.log( arr.join(',') )

So, to bypass that, the first which comes to mind is JSON.stringify:

var arr = ["a,b,c", "foo,bar", "1,2,1", "a"];

var s = JSON.stringify(arr).slice(1,-1);

console.log( typeof s, ":" , s )

↑ The above is the wanted result, but i'm sure there's a cleaner way of doing it

Question:

Is this the only way to convert an Array which has string items containing commas to a String?

Answer 1

Here is another way to get the same result as with stringify (except when arr contains strings with embedded double-quotes):

arr.reduce((a, c, i) => a + (i > 0 ? ',"' : '"') + c + '"', '')

Answer 2

It depends on what "converting to string" means to you. An array is an ordered list of items numerically accessed. A string is a textual representation of that ordered list. If your question is "how to convert an array to a string while still being able to get the original array back," then the most performant answer would be JSON.stringify to convert the Array to a String, then JSON.parse to convert the string back into an array. However, JSON.stringify is only one of the many ways you could convert an array to a string.

A simple way to join all the strings in the array together is either by using Array.prototype.join.call or String.prototype.concat.apply

"use strict";
(function(){
  var arr = ["a,b,c", "foo,bar", "1,2,1", "a"];
  console.log( "Array.prototype.join:   ", arr.join("") );
  console.log( "String.prototype.concat: ", String.prototype.concat.apply("", arr) );
})();

Another way you could convert an array to a string is by going through each string in the array and concatenating them together.

"use strict";
(function(){
  var arr = ["a,b,c", "foo,bar", "1,2,1", "a"];
  var res = "";
  var i = arr.length;
  var curStr = "";
  while (i--) {
    curStr = arr[i];
    // when the item on the left side is a string, the "+"
    //  operator acts as a concatination operator
    res = res + curStr + ",";
    // res += curStr + ","; // works just as well
    // res += arr[i] + ","; // also works too
  }
  console.log( res );
})();

Using the fact that we can go through each item in the array, and look at each string individually, we can do something like converting each string to a base64 blob, then joining each string with a line break.

"use strict";
(function(window){
  var btoa = window.btoa, atob = window.atob;
  
  function encode(theArray){
    var i = theArray.length, res = "";
    while (i--) res += btoa(theArray[i]) + "\n";
    return res.slice(0,-1);
  }
  function decode(theString){
    var splitted = theString.split("\n");
    var i = splitted.length, res = [];
    while (i--) res.push( atob(splitted[i]) );
    return res;
  }
  
  var arr = ["a,b,c", "foo,bar", "1,2,1", "a"];
  var encoded_arr = encode(arr);
  console.log("encoded_arr: ", JSON.stringify(encoded_arr, null, 1).replace(/\\n/g, "\n") );
  var decoded_arr = decode(encoded_arr);
  console.log( "decoded_arr", JSON.stringify(decoded_arr, null, 1).replace(/\\n/g, "\n") );
})(self);

There are countless more ways to join an array of strings together depending on your specific needs. Below are many such examples. Please emphasize that while all the following "work", none of them are as efficient as Array.prototype.join.

• String.prototype.replace

function joinWithRegexp(str1, str2) {
    return str1.replace(new RegExp("$"), str2);
}
console.log(joinWithRegexp("Foo", " bar"));

• String.prototype.padStart

function joinWithPadStart(str1, str2) {
    return str2.padStart(str1.length + str2.length, str1);
}
console.log(joinWithPadStart("Foo", " bar"));

• String.prototype.padEnd

function joinWithPadEnd(str1, str2) {
    return str1.padEnd(str1.length + str2.length, str2);
}
console.log(joinWithPadEnd("Foo", " bar"));

• Template Literals

function joinWithTemplateLiteral(str1, str2) {
    return `${str1}${str2}`;
}
console.log(joinWithTemplateLiteral("Foo", " bar"));

• DOM

var tmpElement = document.createElement("div");
function joinWithDOM(str1, str2) {
    tmpElement.appendChild(document.createTextNode(str1));
    tmpElement.appendChild(document.createTextNode(str2));
    return tmpElement.textContent;
}
console.log(joinWithDOM("Foo", " bar"));

• Blob

var reader = new FileReader;
function joinWithBlob(str1, str2, thenFunc) {
    reader.onload = function(){ thenFunc( reader.result ); };
    reader.readAsText(new Blob([str1, str2]));
}
joinWithBlob("Foo", " bar", function(result){
    console.log(result);
});