String Methods & Template Literals

You can write correct string code that still feels hard to read. JavaScript gives you two upgrades now: everyday methods, commands you call with a dot, and template literals, strings written with backticks that let values fit into text cleanly.

Backticks build readable messages

A template literal is a string written with backticks instead of quotes. Its best feature is interpolation, placing an expression inside a string with ${...} so JavaScript evaluates the expression and inserts the result.

const playerName = "Mina";
const score = 42;
const rank = "Gold";
 
const oldMessage = "Player " + playerName + " scored " + score + " points.";
const newMessage = `Player ${playerName} scored ${score} points.`;
const rankMessage = `${playerName} reached ${rank.toUpperCase()} rank.`;
 
console.log(oldMessage);
console.log(newMessage);
console.log(rankMessage);

→ Player Mina scored 42 points., Player Mina scored 42 points., then Mina reached GOLD rank.

Inside ${...}, you can put any expression: a variable, arithmetic, or a method call. Read it as "run this little piece of code and place the value here."

Template literals also make multiline strings painless. You do not need \n for every line break:

const playerName = "Mina";
const score = 42;
 
const receipt = `Player: ${playerName}
Score: ${score}
Status: saved`;
 
console.log(receipt);

→ Player: Mina
Score: 42
Status: saved

The backticks are like a form with blanks. Normal text stays as text; ${...} blanks get filled by JavaScript.

Clean and check text

String methods return new strings or useful answers. The original sealed token stays unchanged unless you reassign a label.

Use trim() to remove whitespace from the edges, toUpperCase() to make display text loud, includes() to ask whether text appears anywhere, startsWith() to ask whether text begins a certain way, and padStart() to add leading characters until the string reaches a target length.

const rawName = "  mina  ";
const cleanName = rawName.trim();
const displayName = cleanName.toUpperCase();
const ticketNumber = String(42).padStart(5, "0");
const roomCode = "VIP-042";
 
console.log(`raw: "${rawName}"`);
console.log(`clean: "${cleanName}"`);
console.log(`display: ${displayName}`);
console.log(`ticket: ${ticketNumber}`);
console.log(roomCode.includes("VIP"));
console.log(roomCode.startsWith("VIP-"));

→ raw: " mina ", clean: "mina", display: MINA, ticket: 00042, true, then true.

padStart(5, "0") reads as "make this string length 5 by adding zeros to the front." It is useful for receipt numbers, ticket IDs, and aligned console output.

Notice rawName still has spaces. trim() returned a new string, and cleanName holds that result.

Replace and split text

replace() changes the first matching piece of text. replaceAll() changes every matching piece.

const message = "SCORE points for Mina. SCORE is a new record.";
const firstFix = message.replace("SCORE", "42");
const fullFix = message.replaceAll("SCORE", "42");
const rosterLine = "Mina,Rae,Ivo";
const roster = rosterLine.split(",");
 
console.log(firstFix);
console.log(fullFix);
console.log(roster);
console.log(roster.length);

→ 42 points for Mina. SCORE is a new record., 42 points for Mina. 42 is a new record., ['Mina', 'Rae', 'Ivo'], then 3.

split() cuts a string at every separator and returns an array, a list-like object. Section 6 teaches arrays properly. For now, the useful mental model is enough: "Mina,Rae,Ivo".split(",") gives you three text pieces grouped in order.

This does not mutate message or rosterLine. Each method returns a new value.

Try it - format a player badge

Run this, then change rawName, score, and roomCode. Add one more template literal line that prints a message you would actually want to read.

Clean output is a habit

Readable output is not about making strings fancy. It is about making each piece easy to verify.

Prefer this shape:

const playerName = "Mina";
const score = 42;
const level = 7;
const ticket = String(level).padStart(2, "0");
 
const summary = `${playerName} scored ${score} points on level ${ticket}.`;
const report = `Run report
player: ${playerName}
score: ${score}
level: ${ticket}`;
 
console.log(summary);
console.log(report);

→ Mina scored 42 points on level 07.
Run report
player: Mina
score: 42
level: 07

Names hold the parts. Methods clean the parts. The template literal shows the final sentence in almost the same shape a person will read it.

You now have the daily string toolkit: clean text, check text, replace pieces, split lists, and build output that reads like the final message. Next, strings become part of decisions, where your program chooses different paths based on values.