Imagine you're working with a long strip of physical film from an old movie projector. If you want to get a specific scene, you don't re-film the whole movie; you just take a pair of scissors and snip out the exact segment you need. Or, if you want to separate every single frame into its own individual piece, you'd cut the film every time you see a black border between frames.

That's exactly how we handle strings in JavaScript. We aren't changing the original string (remember, strings are immutable), but we're "snipping" out pieces of it to create new strings or arrays.

Grabbing a Chunk with slice and substring

When you need a piece of a string, you'll usually reach for slice(). It takes two arguments: where to start and where to stop. The trick here is that it includes the start index but excludes the end index. I always tell people to think of it as "up to, but not including."

const logEntry = "ERROR:2023-10-12:Database connection failed";
const errorCode = logEntry.slice(0, 5); 
console.log(errorCode); // "ERROR"

Now, you'll also see substring() in a lot of old codebases. For the most part, it does the exact same thing as slice(). However, slice() has a superpower: negative numbers. If you pass a negative index to slice(), it starts counting from the end of the string. substring() can't do that; it just treats negative numbers as 0.

const filename = "report_final_v2.pdf";
// I want the extension, and I know it's the last 4 characters
const extension = filename.slice(-4); 
console.log(extension); // ".pdf"

In my experience, just stick with slice(). It's more flexible, and you won't have to switch between two different methods depending on whether you're counting from the front or the back.

Chopping strings into arrays with split

Sometimes you don't want a "chunk" of a string; you want to break the whole thing apart based on a specific character. This is where split() comes in. Instead of giving it coordinates, you give it a "separator"—the character that acts as the cutting point.

Let's go back to that log entry. If we know the parts are separated by colons, we can turn that single string into a clean list (an array) in one move.

const logEntry = "ERROR:2023-10-12:Database connection failed";
const parts = logEntry.split(":"); 
console.log(parts); // ["ERROR", "2023-10-12", "Database connection failed"]

One pro tip: if you pass an empty string "" into split(), it will chop the string into every single individual character. It's a quick way to turn a word into a list of letters, though you'll probably use it more often for CSV data or parsing user input.

📋 Practical Task

The Log-File Metadata Extractor

You've been handed a series of raw log strings from a server. Each string follows this exact format: "TIMESTAMP|LEVEL|MESSAGE" (e.g., "2023-11-01 10:00|WARN|Disk space low").

Write a script that takes the following string:
const rawLog = "2023-11-01 10:00|WARN|Disk space low";

Your task is to:

• Use split() to break the string into its three components.
• Use slice() on the timestamp (the first element of your array) to extract only the date "2023-11-01", removing the time.
• Log the final result as a new string in this format: "Date: 2023-11-01, Level: WARN".