Splitting, Joining and Parsing Text

Most text in a web application arrives as one long string and has to become structure: a comma-separated list, a query string, a log line, a number typed into a form. Splitting and joining are the two halves of that job, and the number conversion is where most of the bugs hide.

What does split actually return?

split(separator) cuts a string into an array of pieces. The separator is a string or a regular expression, and the result always contains at least one element.

const line = 'Ada,Grace,Linus';

console.log(line.split(','));       // [ 'Ada', 'Grace', 'Linus' ]
console.log('a,b,c'.split(',', 2));  // [ 'a', 'b' ]
console.log('a,,b'.split(','));     // [ 'a', '', 'b' ]
console.log('solo'.split(','));     // [ 'solo' ]

Four behaviours are worth remembering. The second argument is a limit: the array is cut short and the rest of the string is discarded rather than kept, so 'a,b,c'.split(',', 2) loses the c entirely. Empty fields are preserved, which is why 'a,,b' gives you an empty string in the middle instead of skipping it. A string with no separator produces a one-element array, never an empty one. And a multi-character separator works the same way — 'a::b'.split('::') gives you two pieces.

How do I join a list back into text?

join(separator) is the inverse: it turns an array of pieces back into one string, inserting the separator between them.

const parts = ['shoes', 'socks', 'hat'];

console.log(parts.join(', '));     // shoes, socks, hat
console.log(parts.join(' and '));  // shoes and socks and hat
console.log([1, 2, 3].join('-'));   // 1-2-3
console.log(['a', 'b'].join());     // a,b

Called with no argument, join uses a comma. The detail that catches people is how it treats values that are not strings: null and undefined become empty strings rather than the literal text 'null'. That is convenient for building a list out of optional values, and it can also hide a bug, so make sure you meant it.

How do I read a query string?

For URLs, the platform already ships a parser. URLSearchParams handles the encoding and decoding for you.

const query = 'name=Ada&role=admin&page=2';
const params = Object.fromEntries(new URLSearchParams(query));

console.log(params.name);   // Ada
console.log(params.page);   // 2

Two things to notice. The values come back as strings, so page is '2' and you need to convert it before doing arithmetic on it. And the encoding is handled automatically — a space written as %20 arrives as a real space. If the same key appears twice, URLSearchParams keeps both values and you can read them all with getAll.

How do I turn a string into a number?

Converting text into a number has two traps, and both of them produce a number you did not expect.

const input = ' 42 ';

console.log(Number(input.trim()));   // 42
console.log(parseInt(input, 10));    // 42
console.log(Number('42px'));         // NaN
console.log(parseInt('42px', 10));   // 42

Number() is strict: it accepts the entire string or it gives you NaN, which is why '42px' becomes NaN. parseInt is lenient — it reads the leading digits and ignores the rest, so '42px' quietly becomes 42, which is exactly why you should always pass the radix and prefer Number() for anything that must be entirely numeric. The whitespace case is the other trap: Number(' 42 ') is 42 because the conversion ignores surrounding whitespace, but Number('') and Number(' ') are both 0, which is not what anybody expects from an empty field.

How do I parse a fixed-format line?

Log files and fixed-width records are the classic case for splitting, because you know the shape of the data in advance.

const log = '2026-03-04 09:15:22 ERROR payment timeout';
const parts = log.split(' ');

console.log(parts[0], parts[1], parts[2]);
// 2026-03-04 09:15:22 ERROR

console.log(parts.slice(3).join(' '));
// payment timeout

Split on a single space, then take the tail with slice and join. The fixed fields come from known positions, and everything after the last fixed field is free text that you rejoin. Splitting on a plain space rather than a regular expression keeps empty fields, which matters if the message happens to contain a double space.

Which text parsing helpers should I know?

Try it yourself: write a file called parse.js and start with const csv = 'pen,3;book,12;lamp,20';. Split it on ';' and then on ',' to produce three pairs, and print the pairs. Build an array of product names and an array of prices with map, then print the total price with reduce. Next, take a query string such as 'page=2&sort=name', read page and sort with URLSearchParams, and convert page with Number before printing it. Finally, write a small function toCsv(rows) that takes an array of arrays and joins each row with commas, and run it over your three pairs.