JS String Methods - Part 1

split(). Ok, so join() isn't a String method but they look so good together!

In this post, skip to:

• Split
• Join
• Practice

Split

Split() takes in a separator and an optional limit as parameters. The string will be split every time the separator occurs, and this list of substrings will be returned as an array.

Let's try splitting a string at the comma, at every space character (useful for retrieving words!), using an empty separator which will then separate everything, with a separator that's not in the string, and finally without providing a separator at all"

let string = 'I am a millipede, I am astounding!'

string.split(',')
//output: (2) ['I am a millipede', ' I am astounding!']

string.split(' ')
//output: (7) ['I', 'am', 'a', 'millipede,', 'I', 'am', 'astounding!']

// friendly reminder that spaces are characters too:
string.split('')
//output: (34) ['I', ' ', 'a', 'm', ' ', 'a', ' ', 'm', 'i', 'l', 'l', 'i', 'p', 'e', 'd', 'e', ',', ' ', 'I', ' ', 'a', 'm', ' ', 'a', 's', 't', 'o', 'u', 'n', 'd', 'i', 'n', 'g', '!']

string.split('banana king')
//output: ['I am a millipede, I am astounding!']

string.split()
//output: ['I am a millipede, I am astounding!']

The second parameter, the limit, tells how many entries will be placed in the array. Any leftover string is ignored.

Let's try separating the string at the comma, but limiting the array to a single entry:

let string = 'I am a millipede, I am astounding!'

string.split(',', 1)
//output: ['I am a millipede']

What about if we separate at every "I"?

let string = 'I am a millipede, I am astounding!'

string.split('I')
//output: (3) ['', ' am a millipede, ', ' am astounding!']

string.split('I', 1)
//output: ['']

If your separator happens at the beginning or end of the string, it'll still cause a split but an empty entry will be added to the array.

Well, what if we pass a 0 as the limit? In this case the resulting array itself will be empty!

let string = 'I am a millipede, I am astounding!'

string.split('I', 0)
//output: []

You can also split with a regular expression as the separator rather than a string. This allows you to wrap the regular expression in capturing parentheses and include the separator in the resulting array.

Let's use /\s/ to split the string at the space characters, then add parentheses to the separator and compare. Also, let's play around with the variations!

let string = 'I am a millipede, I am astounding!'

string.split(' ')
//output: (7) ['I', 'am', 'a', 'millipede,', 'I', 'am', 'astounding!']

string.split(/\s/)
//output: (7) ['I', 'am', 'a', 'millipede,', 'I', 'am', 'astounding!']

string.split(/ /)
//output: (7) ['I', 'am', 'a', 'millipede,', 'I', 'am', 'astounding!']

string.split(/(\s)/)
//output: (13) ['I', ' ', 'am', ' ', 'a', ' ', 'millipede,', ' ', 'I', ' ', 'am', ' ', 'astounding!']

string.split(/( )/)
//output: (13) ['I', ' ', 'am', ' ', 'a', ' ', 'millipede,', ' ', 'I', ' ', 'am', ' ', 'astounding!']

Something worth noting is that if the separator is an empty string (as in split('')) and so the string is split at the character level, those characters are NOT the characters we see but rather UTF-16 units.

'🐛'.split('')
//output: (2) ['\uD83D', '\uDC1B']

At little more about this on Part 3 of this series.

Join

join() is not a String method, but an Array method. However, splitting a string returns an array so join() is free game to turn that array back into a string!

It doesn't take a limit like split(), but it does take a separator. If you don't provide one, then your elements will be separated by a comma just like they were in the array.

let string = 'I am Yoda'

let splitString = string.split(' ')

console.log(splitString)
//output: (3) ['I', 'am', 'Yoda']

splitString.join()
//output: 'I,am,Yoda'

splitString.join('')
//output: 'IamYoda'

splitString.join(' ')
//output: 'I am Yoda'

splitString.join('...! ') + '...!'
//output: 'I...! am...! Yoda...!'

That also opens up the possibility of playing around with split strings before returning them!

let string = 'I am Yoda'

string.split(' ').reverse().join(' ')
//output: 'Yoda am I'

Practice

If you want a little practice, these 8-kyu Kata are a nice starting point:

• Remove String Spaces
• Returning Strings
• Reversed String
• Convert number to reversed array of digits