I recently learned that the
In this post, I will explain how
split() works, the arguments it takes in, and some example use cases.
If you are unfamiliar with
.split() is as follows:
"string to split".split("character[s]_to_split_by", numTimesToSplit)
The parts that make up a valid
.split() method are:
- The string, or variable that references a string to be split. Required.
- A character or string to use as the point of reference on where to split the string. Required.
- A positive integer of the number of splits to make, after which
.split()will stop evaluating the string. Optional.
Using the format above, if I wanted to split the string
"I love tacos!" so that each word is its own string, I can do the following.
"I love tacos!".split(" ")
Which would return
['I', 'love', 'tacos!']. The original string is split on each empty space
"I love tacos!" to a variable
string, returns the same result.
let string = "I love tacos!" string.split(" ")
Where I found using the optional limit argument helpful was if I wanted to split a string into separate variables, but didn’t need all of the string I was calling the function on.
Let’s say I had copy and pasted some HTML colors names, to use in an app I’m building. Each row contains the named color, it’s hex and rgb values. Picking a few samples, and putting each row as it’s own array item, we have something that looks like this.
const data = [ "Gold #FFD700 rgb(255, 215, 0)", "Indigo #4B0082 rgb(75, 0, 130)", "Chartreuse #7FFF00 rgb(127, 255, 0)", "WhiteSmoke #F5F5F5 rgb(245, 245, 245)" ]
Splitting each array item on each word break (
" "), returns this.
['Gold', '#FFD700', 'rgb(255,', '215,', '0)'] ['Indigo', '#4B0082', 'rgb(75,', '0,', '130)'] ['Chartreuse', '#7FFF00', 'rgb(127,', '255,', '0)'] ['WhiteSmoke', '#F5F5F5', 'rgb(245,', '245,', '245)']
This works. But it’s a little messy if we don’t care about the RGB values.
If we pass in
2 as the second argument
.split() will ignore everything after it’s made two split groups. If we call
.split(" ", 2) on each array item, the return looks like this instead.
['Gold', '#FFD700'] ['Indigo', '#4B0082'] ['Chartreuse', '#7FFF00'] ['WhiteSmoke', '#F5F5F5']
Here’s another example where using the limit argument with
.split() is useful.
Let’s say we have a bunch of phone numbers as strings and we want to assign the area code to its own variable. If our phone numbers are formatted like
"555-867-5309", we can split on each hyphen.
let phone = "555-867-5309" let areaCode = phone.split("-")
It works, but now
['555', '867', '5309']. With one small change to the above code, we can cleanly assign the area code to it’s own variable and ignore the rest of the phone number.
let phone = "555-867-5309" let areaCode = phone.split("-", 1)
After we’ve made
1 split on the first hyphen, the
.split() operation stops.
areaCode now returns
.split() can break strings into smaller parts, but here are some additional things to keep in mind.
- You can split by more than one character
- The character[s] to split by are case sensitive
.split()does not modify the original string
.split()can be used together with other built-in methods like