How to split a string in JavaScript

JavaScript strings are one of the most used data types, and splitting a string is a frequently performed task. Let's learn about it.

JavaScript strings are sequences of characters enclosed in single('') or double quotes(""). We can create a string as a primitive using the string literal or as an object using the String() constructor.

String using a string literal,

const greeting = "What a beautiful world".

String using the String() object,

const greeting = new String("What a beautiful world");

JavaScript Split Method

The JavaScript string has access to a particular split() method that splits a string into multiple substrings based on a splitter. The split method returns an array with all the divided portions of the strings. The split method doesn't change the original string.

We split a string using the space(' ') as a splitter in the example below.

const greeting = "What a beautiful world";
const arr = greeting.split(' ');
console.log(arr);

The output is an array with a bunch of strings after splitting.

["What", "a", "beautiful", "world"]

The splitter(the argument to the split method) can be a single character or any other strings. If we want to split a string by each character, we can pass the empty string('') as the splitter.

const greeting = "What a beautiful world";
const arr = greeting.split(''); // The splitter is an empty string, not a space
console.log(arr);

The output,

['W', 'h', 'a', 't', ' ', 'a', ' ', 'b', 'e', 'a', 'u', 't', 'i', 'f', 'u', 'l', ' ', 'w', 'o', 'r', 'l', 'd']

If you invoke the split method without passing a splitter, it returns an array with the entire string.

const greeting = "What a beautiful world";
const arr = greeting.split();
console.log(arr);

The output,

['What a beautiful world']

Splitting With a Limit

The split() method takes another optional argument other than the splitter. You can also pass a limit to limit the number of splits. In the following example, we split the string using a space character with a limit of 2.

const greeting = "What a beautiful world";
const arr = greeting.split(' ', 2);
console.log(arr);

After splitting by the space character, it will return an array of strings, but the returned array will contain only the first two splits. Hence the output,

['What', 'a']

JavaScript String Splitting and Array Destructuring

Since ES6, we can pick the values from the array in a much more innovative way. As the split method returns an array, we can use the array destructuring syntax to get the element from the array.

const cartoon = "Tom Jerry";
let [tom, jerry] = cartoon.split(' ');
console.log(tom); // Tom
console.log(jerry); // Jerry

That's all for now. I hope you find this article helpful.

Let's connect,