FSM Full Stack Masterclass
Platform under construction
JavaScript course badge

Strings, Numbers & Math

Intermediate

Strings

Strings store text. They look simple, but real string work includes quotes, escaping, length, indexing, normalization and safe output.

const title = "JavaScript";
const message = "Learn " + title;

console.log(message.length);
console.log(message[0]);

Strings, Numbers & Math

A string is text, but text still has structure.

A JavaScript string is a sequence of characters. You can create strings with double quotes, single quotes or backticks. Backticks create template literals, which are covered in the next lesson.

Strings are primitive values and immutable. That means a method such as toUpperCase() returns a new string. It does not change the original value.

In real projects, strings show up everywhere: labels, headings, search text, form values, API fields, paths, messages and generated markup. Treat them as data, not as random pieces of text.

Quotes

Use single or double quotes consistently. Escape the same quote type inside the string.

Length

string.length returns the number of UTF-16 code units, not always the number of visible characters.

Indexing

string[0] reads a character-like unit by position. Indexes start at 0.

Immutability

String methods return new values. Assign the result if you need to keep it.

Examples

Start with the smallest working pattern.

Normalize text before comparing it

const rawInput = "  JavaScript  ";
const normalized = rawInput.trim().toLowerCase();

if (normalized === "javascript") {
  console.log("Match found");
}

Comparing raw text directly

const rawInput = "  JavaScript  ";

if (rawInput === "javascript") {
  console.log("This will not run.");
}

Syntax reference

Named examples you can scan, copy, change and understand.

This is the practical reference part of the lesson. Each example has one job, a stable anchor and a small assignment, so the page works both as a course and as a developer reference when you need the syntax later.

Create a string

Use quotes for normal text values.

const label = "Save changes";
const status = "ready";

console.log(label);

What to notice

  • Read the variable names before the syntax.
  • Change one value and predict the result before running it.

Try it yourself

  1. Rename one value and update every place where it is used.
  2. Add one console.log line that proves what the example returns.

Escape quotes

Use a backslash when the quote belongs inside the text.

const message = "Press \"Run\" to preview the code.";

console.log(message);

What to notice

  • Read the variable names before the syntax.
  • Change one value and predict the result before running it.

Try it yourself

  1. Rename one value and update every place where it is used.
  2. Add one console.log line that proves what the example returns.

Read string length

Useful for counters and simple validation.

const input = "JavaScript";

if (input.length > 20) {
  console.log("Text is too long.");
}

What to notice

  • Read the variable names before the syntax.
  • Change one value and predict the result before running it.

Try it yourself

  1. Rename one value and update every place where it is used.
  2. Add one console.log line that proves what the example returns.

Strings are immutable

Store the returned value when you transform text.

const original = "javascript";
const normalized = original.toUpperCase();

console.log(original);   // "javascript"
console.log(normalized); // "JAVASCRIPT"

What to notice

  • Read the variable names before the syntax.
  • Change one value and predict the result before running it.

Try it yourself

  1. Rename one value and update every place where it is used.
  2. Add one console.log line that proves what the example returns.

Code patterns

Reusable examples for quick reference.

These small examples are designed for scanning. Use them when you need the syntax quickly, then read the surrounding notes when you want the deeper reason behind the pattern.

Create a string

Use quotes for normal text values.

const label = "Save changes";
const status = "ready";

console.log(label);

Escape quotes

Use a backslash when the quote belongs inside the text.

const message = "Press \"Run\" to preview the code.";

console.log(message);

Read string length

Useful for counters and simple validation.

const input = "JavaScript";

if (input.length > 20) {
  console.log("Text is too long.");
}

Strings are immutable

Store the returned value when you transform text.

const original = "javascript";
const normalized = original.toUpperCase();

console.log(original);   // "javascript"
console.log(normalized); // "JAVASCRIPT"

Rules that matter

Keep text and numbers predictable.

Strings and numbers are simple until they cross a boundary: form input, API data, generated output, rounding, formatting or search. Normalize, validate and format deliberately.

Choose consistent quotes

Consistency makes scanning easier and reduces escaping noise.

Normalize before matching

Trim spaces and choose the right case before comparing text.

Do not mutate mentally

Methods return new strings. The original value stays the same.

Use textContent for text output

Do not turn untrusted strings into HTML with innerHTML.

Watch empty strings

An empty string can be a valid value or a missing value. Decide deliberately.

Remember Unicode complexity

Visible characters and string length are not always the same thing.

Production thinking

Small value mistakes become visible product mistakes.

Why does this matter?

Many bugs are text bugs: invisible spaces, wrong case, unsafe output or a value that looks empty but is not handled correctly.

Accessibility

Text is what assistive technology reads. String logic should produce clear labels, messages and status updates.

Production note

Production string handling needs normalization, escaping, validation and predictable formatting at system boundaries.

SEO note

Headings, titles, metadata and links are strings. Broken string logic can create poor or duplicated visible content.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

  • Remove trim() and compare the character count.
  • Show the first character with value[0].
  • Add a warning when the message is empty.

Practice assignment

Do this before moving to the next topic.

  1. Create a string with double quotes.
  2. Create a string that contains quote marks.
  3. Normalize a string before comparing it.

Try it yourself

Build a small character counter

Live preview

Self-check

Before you continue, prove that you understand Strings.

Intermediate

Explain the answer in plain language first. Then change the code example and verify that the result matches your explanation.

  1. Can you explain what a string stores?
  2. Can you explain why strings are immutable?
  3. Can you explain what length returns?
  4. Can you explain why trim is useful before comparison?
  5. Can you explain why textContent is safer than innerHTML for plain text?