A string is a data structure that represents a sequence of characters, and an array is a data structure that contains multiple values.
And did you know – a string can be broken apart into an array of multiple strings using the split
method. Let's see how that works with some examples.
TL;DR
If you just want the code, here you go:
const publisher = 'free code camp'
publisher.split(' ') // [ 'free', 'code', 'camp' ]
Syntax
According to the MDN, the syntax you'll need to split the string is str.split([separator[, limit]])
. If we apply this to the above example:
str
ispublisher
separator
is' '
- there is no
limit
When do you need to split a string?
Example 1: getting part of a string
Here is a common example which involves getting the token from an auth header that is part of a Token-based Authentication System.
If this doesn't mean anything to you that's ok. All you need to know for the following example is that there is a string with the value bearer token
, but only token
is needed (as this is the part that identifies the user):
const authHeader = 'bearer token'
const split = authHeader.split(' ') // (1) [ 'bearer', 'token' ]
const token = split[1] // (2) token
Here's what's happening in the above code:
- The string is split with
' '
as the separator - The second entry in the array is accessed
Example 2: apply array methods to a string
Often the input you are given is a string, but you want to apply array methods to it (eg. map
, filter
, or reduce
).
For example, let's say you are given a string of morse code and you want to see what it reads in English:
const morse = '-.-. --- -.. .'
// (1)
const morseToChar = {
'-.-.': 'c',
'-..': 'd',
'.': 'e',
'---': 'o',
}
const morseArray = morse.split(' ') // (2) [ '-.-.', '---', '-..', '.' ]
const textArray = morseArray.map((char) => morseToChar[char]) // (3) [ 'c', 'o', 'd', 'e' ]
const text = textArray.join(") // (4)
Here's what's happening in the above code:
- An object literal is created to map morse chars to the English alphabet
- The morse code is split into an array with a
' '
as the separator. (Without' '
as an argument you would end up with an array that has separate entries for each.
and-
.) - The morse code array is mapped/transformed to a text array
- A string is created from the array with
''
as the separator. (Without''
as an argument the output would bec,o,d,e
.)
How to add a limit to split
According to the MDN, it is also possible to pass a limit
as an argument to split
. I have never needed to do this, but here is how you could apply it:
const publisher = 'free code camp'
publisher.split(' ', 1) // [ 'free' ]
In the above example, the array is limited to one entry. Without it the value of the array would be [ 'free', 'code', 'camp' ]
.
Before you go…
Thank you for reading this far! I write about my professional and educational experiences as a self-taught software developer, so feel free to check out my website or subscribe to my newsletter for more content.
You might also like:
- Learn JavaScript with these resources
- Learning material - software development (starting with Intro to CS)