Search for a command to run...
JavaScript strings are one of the most used data types, and splitting a string is a frequently performed task. Let's learn about it.
Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
I love reading your articles. You explain things simply and yet detailed. Thanks for sharing!
Hey Mudit, thanks a lot. It means a lot to me.
bigbutton, Glad it was helpful.
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.
Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD
Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.
A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment
Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.
GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
On this page
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");
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']
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']
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,