JavaScript Strings
splitturns a string into an array by cutting it at a separator.
It is the opposite of join, which turns an array back into a string.
Together they let you use array methods on text.
Example
javascript
const text = "a,b,c";
const parts = text.split(",");
console.log(parts.length);
console.log(parts[0]);The output is 3 then a.
The separator says where to cut, and is removed from the result.
An empty string separator splits into single characters.
No separator at all gives an array holding the whole string.
Syntax
javascript
text.split(separator);The result is always an array.
A space is the usual separator for a sentence.
Example
javascript
const sentence = "the quick brown fox";
const words = sentence.split(" ");
console.log(words.length);
console.log(words[3]);The output is 4 then fox.
An empty separator gives one element per character.
Example
javascript
const word = "hello";
const letters = word.split("");
console.log(letters.length);
console.log(letters.reverse().join(""));Reversing a string is usually done exactly this way.
join rebuilds a string from the array.
Example
javascript
const parts = ["a", "b", "c"];
console.log(parts.join("-"));
console.log(parts.join(""));The separator is up to you.
Split, work on the array, then join back.
Example
javascript
const sentence = "the quick brown fox";
const capitalised = sentence
.split(" ")
.map(function (word) {
return word[0].toUpperCase() + word.slice(1);
})
.join(" ");
console.log(capitalised);This is a very common pattern for formatting text.
If the separator is not there, you get an array holding one item.
Example
javascript
const text = "no commas here";
const parts = text.split(",");
console.log(parts.length);
console.log(parts[0]);The output is 1 then the whole string.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript String split</title>
</head>
<body>
<h1>String split</h1>
<p id="out"></p>
<script>
const sentence = "the quick brown fox";
const words = sentence.split(" ");
const titled = words.map(function (w) {
return w[0].toUpperCase() + w.slice(1);
}).join(" ");
document.getElementById("out").innerHTML =
"Words: " + words.length +
"<br>Reversed letters: " + sentence.split("").reverse().join("") +
"<br>Title case: " + titled;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try a different separator:
Split on the letter o and see how the pieces fall.
split returns an array.join turns the array back into a string.split and join are the bridge between strings and arrays.
Splitting lets you use map and filter on text.
Almost every text-formatting job goes through this pair.