I recently learned that the .split()
method in Javascript can take in an optional second argument that is the number of times it’ll split a given string. It’ll ignore everything after the string has been split that number of times, even if there are additional matches.
In this post, I will explain how split()
works, the arguments it takes in, and some example use cases.
Understanding .split()
If you are unfamiliar with .split()
in Javascript, it is a built-in method for breaking up a string into multiple parts, based on the character(s) that you define. This is the format for .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 " "
.
Assigning "I love tacos!"
to a variable string
, returns the same result.
let string = "I love tacos!"
string.split(" ")
Using the Optional limit
Argument
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']
Use Cases
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 areaCode
returns ['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 ['555']
.
Additional Information
.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
- Using
.split()
does not modify the original string -
.split()
can be used together with other built-in methods like.join()
Resources
- String.prototype.split()
- What is a real world use case for splitting a string in JavaScript?
- Array.prototype.join()
The post Doing the .split()
with Javascript appeared first on Shannon Crabill — Front End Software Engineer.
Top comments (0)