Challenge - String operations

Build a text formatting tool with string methods and template literals.

Text formatting challenge

In this challenge you will write a text formatting function. It takes a name string, trims the surrounding spaces and capitalizes the first letter.

The order matters: first clean spaces with trim(), then take the first letter with slice(0, 1) and call toUpperCase(). For the rest of the letters use slice(1) and toLowerCase().

The result is returned with a template literal: `Hello, ${first}${rest}!`. This syntax makes it easy to embed variables inside a string.

Chaining string methods

String methods can be chained. name.trim().slice(0, 1).toUpperCase() calls three methods in a row and each one passes its result to the next.

slice(start, end) returns a substring that includes start and excludes end. slice(1) skips the first letter and gives the rest.

To combine results, a template literal is more readable than the + operator: `Hello, ${first}${rest}!`. Inside ${} you can place any expression.

Exercise Write the formatName function

Define a function named formatName. It should take a name parameter. First clean spaces with trim(). Capitalize the first letter with slice(0, 1).toUpperCase(); lowercase the rest with slice(1).toLowerCase(). Return the result with a `Hello, ${first}${rest}!` template literal.

Show example solution

First call name.trim(). Take the first letter with slice(0, 1).toUpperCase() and the rest with slice(1).toLowerCase(). Combine the result inside a template literal.

Example solution:
function formatName(name) {
  const trimmed = name.trim();
  const first = trimmed.slice(0, 1).toUpperCase();
  const rest = trimmed.slice(1).toLowerCase();
  return `Hello, ${first}${rest}!`;
}

Test yourself

What does "javascript".slice(0, 4) return?
```
"javascript".slice(0, 4);
```
- "script"
- "jav"
- "javascript"
- "java"
Show answer

"java" — Correct. slice(0, 4) takes indexes 0, 1, 2 and 3; the result is "java".

Embed a variable into a template literal

const greeting = `Hello, ${____}!`;

Show answer

const greeting = `Hello, ${name}!`;

Next lesson: Challenge - Error handling

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies