Converting a string into an array in JavaScript is tricky. The act of changing the string is simple, but if not done properly, you might see errors or even latent errors.
Before diving into errors commonly associated with changing a string into an array, it might be helpful khổng lồ go into how lớn create strings và arrays in JavaScript. With these foundations in mind, you should be able lớn understand better how khổng lồ convert a string into an array without causing an error.
Let’s get to it!
What Is a String in JavaScript?
Whether you’re just starting in JavaScript or you’re an expert, you’re most likely familiar with JavaScript strings. They are fundamental in coding. So, we won’t spend too much time on this particular topic. What you need to know is that a JavaScript string stores a series of characters within quotes.
For example:
Let text = ‘darkedeneurope.com is Awesome’Or you can put the exact same string in double-quotes:
Let text = “darkedeneurope.com is Awesome”Next, we’ll provide a quick refresher on what an array is in JavaScript.
Bạn đang xem: Convert string with commas to array
What Is an Array in JavaScript?
If you already know what an array is & you’re comfortable working with arrays, please proceed to the next section, where we’ll go over how khổng lồ convert strings to arrays.
For those of you who might need a refresher on arrays, here’s a simple definition:
An array in JavaScript uses a single variable khổng lồ store several elements. It’s perfect when you need to create và store lists.
Here’s an example of an array:
Const A = <“darkedeneurope.com”, “ Error Monitoring”, “Debugging”>You’ll receive the following các mục when you run this script:
darkedeneurope.com, Error Monitoring, Debugging.And that’s an array!
Why Convert a String to lớn an Array
When working with Data, there are times when we’re in control và when we’re not. By changing a string into an array, it allows us khổng lồ take control of certain data points.
For example, maybe we have incorrectly formatted data coming from the API. Perhaps the API might contain a specific character for ‘darkedeneurope.com-is-awesome’ that is not required in the final output. For this purpose, we will split the string data by using a delimiter (which we’ll go over in the next section) for every occurrence of “-” lớn get the final output đầu ra “darkedeneurope.com is awesome.”
Or, perhaps, you have a list of strings that you want to call on as an array because, from a data point of view, it makes more sense.
Converting Strings to lớn Arrays in JavaScript
As you can see, strings and arrays serve two different purposes. A string stores characters, while an array creates list-like objects due khổng lồ its ability khổng lồ hold more than one value. You might need to lớn convert those strings into an array in some cases. The split() method is the most popular way to vị this.
Using the Split() Method
The split() method is one of the most popular ways JavaScript developers convert their strings into arrays. When using a split() within a string, the substring returns as an array.
Here’s an example:
Let A = “darkedeneurope.com Error Monitoring & Debugger”;Const split_string = A.split(“ “):console.log(split_string)Output = <“darkedeneurope.com”, “Error”, “Monitoring”, “and”, “Debugger”>

What just happened here? Why did the A.split(“ “) turn our original string into an array?
This is how the computer program reads the split(): string.split(delimiter, limit)
Let’s continue this demostration & use the same example. Let’s say the data we get from an API looks lượt thích this “darkedeneurope.com-is-awesome,” và output should be a string “darkedeneurope.com is awesome.”
To accomplish this, we will use the JavaScript string split() method, which accepts a separator as one of the options. Here we will pass the “-” separator telling the split method lớn look at the string data coming from the API, separate it at every “-” instance và provide the output đầu ra in an array.

Here we use the string split() method with a separator “-”. The output đầu ra is an array of strings separated at every instance of “-”. Lớn get our desired string output, we will use the Array join() method to lớn combine each element in the array back into a string without the “-” character.
What is a Delimiter and a Limit
The delimiter indicates where to split the string. If you decide to leave it empty, JavaScript will automatically mặc định to turning each character into an array. The “limit” is how many times the string should be split. Keep in mind that both of these are optional, but they provide more control over how the string should be split.
In the above example, the string we converted into an array is the one set khổng lồ “A” and between the double-quotes. You can take it a step further, as well. You can change the delimiter so the program picks up specific areas lớn convert into an array.
Xem thêm: Từ Khóa Parent Trong Php Oop, Phương Thức Tĩnh Và Thuộc Tính Tĩnh Trong Php
Example:
Let B = “darkedeneurope.com, Error, Monitoring, Performance, Debugger”;Const split_string = B.split(“ , “):console.log(split_string)Output = <“darkedeneurope.com”, “Error”, “Monitoring”, “Performance”, “Debugger”>

But, if you leave the delimiter empty, lượt thích so:
Let C = “darkedeneurope.com”;Const split_string = C.split(“ “); //note that there is no additional space between “ “console.log(split_string)The đầu ra is:
<“A”, “i”, “r”, ”b” ,”r”, ”a” ,”k”, ”e”>

What happens when you put a limit in? When you put a limit in, you’re limiting how much a string should be listed within your array.
Here’s an example of a limit with 6:
Let D = “darkedeneurope.com is an awesome error monitoring and debugging tool”;Const split_string = D.split(“ “ ,6);console.log(split_string)The output will be:
<“darkedeneurope.com”, “is”, “an”, “awesome”, “error”, “monitoring”>.

The split() method is the best và most common method out there for converting a string into an array.
Errors When Converting From a String khổng lồ an Array
When switching between strings và arrays, there’s always a chance that you might create an error that could end up in production. Here is a các mục of errors that might arise and how khổng lồ fix them if they do:
“Object doesn’t support this property or method” or “split is not a function”
“Split is Not a Function” Error
JavaScript is a “loosely typed” language. This means that the language will automatically convert data types so the user doesn’t have to lớn specify what type of information should be stored in a variable in advance.
For example, a bug in the code where the expected đầu ra should be a string “53” but JavaScripts converts into a number type 53. The split() is a string method, so anything besides a string will throw an error. If you try to lớn use a split() method on a number lượt thích 53, it will give an error “split is not a function”
Example:

If this error pop-ups for you, it means that your attempt to lớn split() failed and didn’t convert your string to an array. The easiest way khổng lồ fix this is to lớn return khổng lồ the split() và fix what’s causing the error.
“TypeError: Cannot read property ‘split’ of undefined” Error
When using the string split() method, keep an eye out for TypeErrors. TypeErrors occur if the split string is “undefined.”
For example, invoking split() method on a variable. If the variable is declared and never assigned a string value, it will be undefined and the TypeError will be thrown by JavaScript.
Example:

Avoid this error by using proper error handling. Before involving the split() method, kiểm tra for any undefined variables.
Example:

Find Errors With darkedeneurope.com
When you go back và manipulate existing code, there’s always a chance that changing one thing can lead to a cascade of errors. This can be true with you convert a string into an array within JavaScript. Ensure that anytime you change existing code, you’ll be able khổng lồ catch any new errors with an error monitoring software like darkedeneurope.com. darkedeneurope.com Error & Performance Monitoring will easily find errors associated with changing a string lớn an array within JavaScript & tell you exactly where the error occurred.
Give it a try! Create a free-forever developer account, which comes with unlimited error and performance events for the first 30 days.