JavaScript String Split Join Trim and Pad Guide

JavaScript has four utility string methods that handle everyday formatting: split, join, trim, and pad. split turns a string into an array at a separator, join combines array elements back into a string, trim removes unwanted whitespace from the ends, and padStart or padEnd align text to a fixed character width.

These methods are not as conceptually deep as closures or prototypes. They are tools you reach for constantly when cleaning data, formatting output, or preparing strings for display.

javascript

const csv = "apple,banana,grape";
const items = csv.split(",");
 
console.log(items);
console.log(items.join(" | "));
console.log(items.join(" | ").length);
console.log("   hello   ".trim());
console.log("42".padStart(5, "0"));

This prints the array, then a pipe-separated string, then its length, then the trimmed word, then a zero-padded number. In five lines you can see all four methods at work.

For a broader overview of the string method toolkit, see the JavaScript string methods guide.

split() -- string to array

The split method breaks a string into an array at a separator character. The separator can be any string, and it is removed from the resulting pieces.

javascript

const path = "/users/profile/settings";
const parts = path.split("/");
 
console.log(parts);

This prints ["", "users", "profile", "settings"]. The leading empty string appears because the path starts with a slash. Every separator creates a boundary between array elements, including before the first character if the string starts with the separator.

The separator does not have to be a single character. You can split on words too:

javascript

const text = "first then second then third";
console.log(text.split(" then "));

This prints ["first", "second", "third"]. The word " then " with surrounding spaces is the separator, and it is removed from each piece.

For more advanced splitting, pass a regular expression. This splits on commas or semicolons:

javascript

const mixed = "a,b;c,d";
console.log(mixed.split(/[,;]/));

join() -- array to string

The join method is the inverse of split. It combines array elements into a single string, inserting a separator between each pair.

javascript

const words = ["Hello", "World", "2026"];
console.log(words.join(" "));
console.log(words.join("-"));
console.log(words.join(""));

The first prints Hello World 2026 with spaces. The second prints Hello-World-2026 with hyphens. The third prints HelloWorld2026 with no separator.

join works on arrays of any type. Numbers, booleans, and other values are converted to strings automatically:

javascript

const data = [1, true, "hello"];
console.log(data.join(" | "));

This prints 1 | true | hello. Every element becomes its string representation before joining.

trim() -- removing whitespace

trim, trimStart, and trimEnd remove whitespace from the ends of a string. They are most commonly used for cleaning user input from forms.

javascript

const raw = "   hello world   ";
 
console.log(`|${raw.trim()}|`);
console.log(`|${raw.trimStart()}|`);
console.log(`|${raw.trimEnd()}|`);

The first prints |hello world| because trim removes whitespace from both ends. The second keeps the trailing spaces because trimStart only strips leading spaces. The third keeps the leading spaces because trimEnd only strips trailing spaces.

The most common pattern is chaining trim with toLowerCase for case-insensitive comparisons. For searching within a cleaned string, see the guide to includes, startsWith, and endsWith.

padStart() and padEnd() -- fixed-width formatting

padStart and padEnd add a padding character to the beginning or end of a string until it reaches a target length.

javascript

const num = "42";
 
console.log(num.padStart(5, "0"));
console.log(num.padEnd(5, "."));

The first prints 00042 by adding zeros at the start until the string has five characters. The second prints 42... by adding dots at the end.

Zero-padding is common for invoice numbers, clock displays, and any fixed-width numeric output:

javascript

const hours = "9";
const minutes = "5";
 
console.log(`${hours.padStart(2, "0")}:${minutes.padStart(2, "0")}`);

This prints 09:05 instead of 9:5, which is the standard clock format.

Practical use case: CSV parsing

These four methods often appear together in data processing. Here is a complete example that parses and formats CSV data:

javascript

function parseCSVLine(line) {
  return line.trim().split(",").map(item => item.trim());
}
 
const row = "  apple , banana , grape  ";
console.log(parseCSVLine(row));

The function trims the line, splits on commas, then trims each individual item. The result is an array of clean fruit names with all extra whitespace removed from both the line and each cell.

Going the other direction, you can build a CSV line from an array with join:

javascript

const fruits = ["apple", "banana", "grape"];
console.log(fruits.join(", "));

This prints apple, banana, grape as a single comma-separated line, the reverse of the parsing example above.

Common mistakes

Expecting split on an empty separator to split into characters can be surprising. The expression "hello".split("") returns ["h", "e", "l", "l", "o"], which is correct but sometimes unexpected when coming from other languages.

Forgetting that join only works on arrays is another slip. The method lives on Array.prototype, not String.prototype. You call it on the array, passing the separator: arr.join(","), not ",".join(arr).

Using padStart with a target length shorter than the string does nothing. The expression "hello".padStart(3, "x") returns "hello" unchanged because the string already exceeds the target length.