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,