Unfortunately for us, the methods to turn arrays to strings and strings to arrays are not named that explicitly, but here is a quick cheat sheet on how to do it.<\/p>\n\n\n\n
Let’s say we have an array of fruits: <\/p>\n\n\n\n
let fruitsArray = ['strawberries', 'bananas', 'apples'];<\/pre>\n\n\n\nTo make it an array, we have 2 options:
toString()<\/code> andjoin()<\/code>.<\/p>\n\n\n\nlet fruitsJoin = fruitsArray.join();\nconsole.log(\"fruitsJoin: %o\", fruitsJoin);\n\/\/ returns: strawberries,bananas,apples\n\nlet fruitsJoinDash = fruitsArray.join(\" - \");\nconsole.log(\"fruitsJoinDash: %o\", fruitsJoinDash);\n\/\/ returns: strawberries - bananas - apples\n\nlet fruitsToString = fruitsArray.toString();\nconsole.log(\"fruitsToString: %o\", fruitsToString);\n\/\/ returns: strawberries,bananas,apples<\/pre>\n\n\n\nWe can see in this example that
join()<\/code> without parameter is equivalent totoString()<\/code>. For more flexibility, I prefer usingjoin()<\/code> to specify the separator<\/em> I want (by default, it’s:\",\"<\/code>). <\/p>\n\n\n\nHave a look at the documentation for more details about join()<\/a> and toString()<\/a>.<\/p>\n\n\n\n
String to Array<\/h2>\n\n\n\n
Let’s say we have now a vegetables string: <\/p>\n\n\n\n
let vegetablesString = \"potatoes, broccoli, carrots\";<\/pre>\n\n\n\nNow, to make it into an array, all we need to do is to split it!<\/p>\n\n\n\n
let vegetablesSplit = vegetablesString.split(\", \");\nconsole.log(\"vegetablesSplit: %o\", vegetablesSplit);\n\/\/ returns: [\"potatoes\",\"broccoli\",\"carrots\"]\n\nlet vegetablesSplitDefault = vegetablesString.split();\nconsole.log(\"vegetablesSplitDefault: %o\", vegetablesSplitDefault);\n\/\/ returns: [\"potatoes, broccoli, carrots\"]\n\nlet vegetablesSplitLimit = vegetablesString.split(\", \", 2);\nconsole.log(\"vegetablesSplitLimit: %o\", vegetablesSplitLimit);\n\/\/ returns: [\"potatoes\",\"broccoli\"]<\/pre>\n\n\n\nThe
split()<\/code> method takes 2 optional parameters: the separator<\/em> and the limit<\/em>. Please note that if you don’t specify the separator<\/em>,split()<\/code> will return an array containing the entire original string. Also, the limit<\/em>, as its name states, will limit the number of elements returned in the array. <\/p>\n\n\n\nHave a look at the documentation for more details about split()<\/a>.<\/p>\n\n\n\n
<\/div>\n\n\n\n👉As always, you can find all the examples above (and play with them) in the dedicated Codepen: JS Array to String and String to Array<\/a>.<\/p>\n\n\n\n
<\/div>\n\n\n\nFeel free to\u00a0buy me a coffee (or tea)<\/a>\u00a0if you found this article useful\u00a0☕️ 🙂<\/p>\n","protected":false},"excerpt":{"rendered":"
Unfortunately for us, the methods to turn arrays to strings and strings to arrays are not named that explicitly, but here is a quick cheat sheet on how to do it. Array to String Let’s say we have an array of fruits: To make it an array, we have 2 options: toString() and join(). We can see in this example that join() without parameter is equivalent to toString(). For more flexibility, I prefer using join() to specify the separator I want (by default, it’s: “,”). Have a look at the documentation for more details about join() and toString(). String to … Continue reading Javascript Array to String and String to Array<\/span>