JavaScript lesson · 14 min

JavaScript Strings

Work with text values, clean user input, build labels, and create URL-friendly slugs.

Code runs locally in your browser

What you will practice

Create and combine text values.
Clean whitespace with trim.
Transform text for display and URLs.

What this means

A string is text inside your program. Names, search queries, product titles, button labels, URLs, error messages, and pasted form input are all usually strings.

Strings can be changed into new strings. You can trim spaces, convert letters to uppercase or lowercase, replace characters, split text into words, and join it back together.

Strings are values, not editable paper. Most string methods return a new string instead of changing the original one.

If this is your first time seeing this

A string is just text. Most things users type into a form arrive in your code as strings.

String methods help clean, compare, and reshape that text before you show it or use it.

Mini glossary

String: A text value surrounded by quotes, double quotes, or backticks.
trim: Removes extra spaces from the start and end of text.
slug: A URL-friendly version of a title, usually lowercase with hyphens.

Example from everyday life

A string is like a sticky note with words on it. You can copy the note, rewrite it neatly, make a short label from it, or turn it into a safe filename, but you still need to be clear about which version you are using.

How it works step by step

The code starts with messy text that has extra spaces and lowercase words.
`trim()` removes spaces from the beginning and end.
`split(" ")` breaks the cleaned string into words.
`map` formats every word so it starts with a capital letter.
`toLowerCase()` and `replaceAll(" ", "-")` create a URL-friendly slug.

Where you will use this

A blog editor turns a title into a URL slug.
A signup form trims accidental spaces from an email address.
A search box normalizes text before comparing it with results.

Before you run the code

Text input from real users is rarely perfect. It may contain extra spaces, inconsistent capitalization, or characters that need to be prepared for a URL.

String methods are small tools for cleaning and transforming that text before you display it, store it, or compare it.

Common beginner mistakes

Forgetting that string methods usually return a new string.
Comparing user input without trimming it first.
Building URLs from raw text without making the text URL-safe.

JavaScript editor

const rawTitle = "  lumio utils course  ";

const cleaned = rawTitle.trim();
const title = cleaned
  .split(" ")
  .map((word) => word[0].toUpperCase() + word.slice(1))
  .join(" ");
const slug = title.toLowerCase().replaceAll(" ", "-");

console.log(`Clean title: ${title}`);
console.log(`Slug: ${slug}`);

Console output

Run the code to see console output here.

Exercise checks0 of 2 checks passed.

WaitingFormats the cleaned title

WaitingCreates a URL-friendly slug

Code runs locally in a temporary browser worker with a timeout. It is not sent to Lumio analytics or executed on the server.

Try changing this next

Change the title text and see how the slug changes.
Remove `trim()` and notice what happens to the cleaned title.
Replace spaces with underscores instead of hyphens.

Previous lesson Next lesson